如何实现CSS3动画变幻?
开发工具与关键技术:DW CSS3动画
作者:蛋蛋
撰写时间:2019年1月16日
#1.下面我们使用HTML来处理CSS3的部分,下面我们来看一个例子.
#2.html与 /html之间的文本描述网页 头部,主要描述文档各种属性和信息body 与 /body 之间的文本是可见的页面内容
见下图所示:
#3.在截图中我们可以看到
- 创建一个HTML文件后再创建CSS文件并用link引入
- 用一个标签div包裹一个自定义的类名“wraper”再在标签写文本内容~~
- 写完源代码后我们进行写CSS样式.内容详情请见下图;
接下来再拓展一些可任意变幻的动画方法:
- Rotate(deg) 旋转,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
- Scale(x,y) 缩放,方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。
- Skew(x,y) 扭曲 ,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。
与上面的例子的过渡效果,但是使用了简写的 transition 属性
Eg : transition{
all是过渡所有;
xs是过渡所需时间
linear是匀速线性速度}
#4. 通过一些transform属性来完成之后用animation 调用
通过@keyframes关键帧 创建动画,将一套 CSS 样式逐渐变化为另一套样式,
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
而调用动画是用的animation
子属性:
1)animation:animation-name;(调用动画)
2)animation-duration (动画播放时间)
3)animation-timing-function (动画播放方式)
4)animation-delay (动画开始播放时间)
5)animation-iteration-count (动画播放次数)
如有疑问请在下方评论? 谢谢