图片选中的两种方法
开发工具与关键技术:DW CSS3旋转动画
作者:周欢
撰写时间:2019/3/3
纯图片排版美观还是动态的图片排版美观?要是是我我会选择动态的图片排版,显得有活力。
其实在还没有接触CSS3动画之前我感觉CSS3动画很难,但是它有很有趣。在接触CSS3动画之后就觉得它好像也没那么难,而且是越发越有趣。使用CSS3动画可以做出有意思的动画效果图,看一个小页面动起来的感觉很不错,就比如自己养的小猫咪一样偶尔还能逗一逗。
我近期无聊的时候做了一个图片动画加载效果,一起瞧瞧
这个是图片动画加载的源代码,是不是很简单,就使用到了一个div和img标签
这是图片动画加载的CSS样式,对包裹img标签的div进行了一个设置,然后对img标签加了点边框(把它想象为相框),将img标签的大小和包裹住img标签的div大小设置为一样就可以达img图片自适应盒子大小了。
涉及的知识点:
border
盒子的边框属性
box-shadow
盒子的阴影属性(水平方向阴影,垂直方向阴影,模糊距离,颜色)
position
定位 (绝对定位absolute、相对定位relative、固定定位fixed)
transform-origin
改变圆点
transition
动画函数的调用(所调用的函数,动画执行时间,动画速度曲线)
这也是图片动画加载的CSS样式,这个主要是对img图片的细节处理(主要是美观效果)。
中间着重的是使用CSS3中的旋转效果,然后将图片再次进行细节的处理。
涉及知识点:
子元素选择器first-child
(第一个子元素)、nth-child(2)
(第2个子元素)、
nth-child(3)
(第2个子元素)、nth-child(4)
(第4子元素)、
last-child(
选择到最后一个子元素)
:hover
伪类属性
Transform
动画变形(rotate旋转属性、skew扭曲属性、scale缩放属性)
Rotate
旋转动画 单位为deg度,负值为逆时针方向,正值为顺时针方向。
旋转动画之前
旋转动画效果之后