今天在这里教大家怎样运用css哄好女朋友,这里就要运用到css3的动画效果。
变形操作-transform
变形操作-transform是css3中新增的属性,使用 transform 控制元素的变形操作,移动、旋转、3D转换、倾斜、缩放。transform的属性值有以下几种:
translateX 控制元素在X轴上移动
translateY 控制元素在Y轴上移动
translateZ 控制元素在Z轴上的移动
rotate() 2D旋转
rotateX() X轴的旋转 3D
rotateY() Y轴的旋转 3D
rotateZ() Z轴的旋转 3D
如果只单纯的旋转Z轴的话,只会看到元素在页面中绕顺时针或逆时针方向转动。
scale 缩放
scale的缩放只是视觉效果,并不改变元素的大小。
skew 倾斜
skew的倾斜也只是视觉效果。
在进行元素的变形操作时,记得要设置视距(perspective设置视距,800p是人类能够接触最完美的视距)和开启3D效果(transform-style:persever-3D;开启3D效果可以将一个2D平面通过转换呈现出3D效果)
过渡动画-transition
过渡动画指的是一个变化的过程(从开始点到结束点这中间经历的一个阶段呈现出来)
使用transition就可以控制元素的过渡效果,通常与变形操作-transform配合使用,可以将元素变形前到变形后这一阶段的过程呈现出来。
过渡动画-transition必须要有的两个取值方式是过渡的属性名称和过渡所需的时间,当然transition的属性值不只有这两个,像过渡的类型,过渡的延时等等就并不是必须要取得值。
关键帧动画-@keyframes
关于如何哄好女朋友关键的点就在这里了。
关键帧动画,顾名思义就是一帧一帧的画面组合成的动画
运用关键帧动画需要先写一个剧本,就是你的元素该怎样运动,变化。
@keyframes (剧本名)
1%~100% 或 from to
写好剧本之后就可以在你需要添加动画的地方使用animation样式进行添加,animation和过渡动画transform一样都有两个必须要填写的属性值,分别是关键帧动画-@keyframes的剧本名字和动画的播放时间,其中播放方式,播放次数和延时是可以选填的。下面我们来看一下效果:
试问将这样的旋转木马的图片换成自己女朋友的图片,她还会生气???