东莞网站建设市场,什么 a wordpress,个人主页图,网站建设如何上传文件在CSS3中新增了一个很有意思的东西#xff0c;那就是动画#xff0c;有了动画我们可以做很多的事情#xff0c;让我为大家介绍一下动画吧#xff01; 本篇文章关于介绍动画#xff0c;利用小球移动为你们介绍一下动画 默认样式#xff1a;
!DOCTYPE html
ht…在CSS3中新增了一个很有意思的东西那就是动画有了动画我们可以做很多的事情让我为大家介绍一下动画吧 本篇文章关于介绍动画利用小球移动为你们介绍一下动画 默认样式
!DOCTYPE html
html langen
headmeta charsetUTF-8title动画/titlestyle* {margin: 0;padding: 0;}.box {/* 绝对定位,子绝父相 */position: relative;width: 1000px;height: 100px;border: 1px solid black;margin: 100px auto;}.ball {width: 100px;height: 100px;border-radius: 50%;background-color: pink;/* 绝对定位,接下来用定位来实现移动 */position: absolute;top: 0;left: 0;}/style
/head
bodydiv classbox!-- 小球 --div classball/div/div
/body
/html在我们使用动画前我们需要定义关键帧使用的语法 keyframes 名称 { } /* 定义关键帧 */keyframes move {/* 第一种方法,from to *//* from {left:0;}to {left: 900px;} *//* 第二种方法,百分比的形式 *//* 0% {left:0;}100%{left: 900px;} */}动画的使用语法与含义
语法含义animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个周期animation-delay设置动画在启动前的延迟间隔animation-iteration-count定义动画的播放次数animation-direction指定是否应该轮流反向播放动画animation-fill-mode规定当动画不播放时当动画完成时或当动画有一个延迟未开始播放时要应用到元素的样式animation-play-state指定动画是否正在运行或已暂停
使用动画让小球动起来 /* 给小球定义关键帧 */keyframes move {0% {left:0;}100%{left: 900px;}}跟着这一步步来自己动手试试吧看只能看的懂理论还是得要实践
一、animation-name
我们把名称给到我们小球的选择器当中
animation-name: move;定义了动画名称还是做不出效果的所以我们用到了animation-duration
二、 animation-duration
动画指定需要多少秒或毫秒完成 单位使用s(秒)
animation-duration: 2s;这样我们的小球就移动起来了不过会有一个问题但我们打开页面或者刷新页面的时候动画就已经执行起来了会闪现一段路程所以我们要使用到延迟时间animation-delay
三、animation-delay
我们给小球添加延迟时间
/* 延迟2秒开始单位用s */
animation-delay: 2s;这样就解决了当我们页面还没加载完就开始执行了动画
四、animation-timing-function
是不是在尝试的过程中感觉小球滚动的速度有点奇特一下慢一下快又一下慢的这是animation-timing-function的属性值导致的默认值是ease
属性值简述ease 默认动画以低速开始然后加快在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束linear(常用)动画从头到尾的速度是相同的(匀速)steps指定了时间函数中的间隔数量( 步长 )
演示效果
我们把小球的速度改成匀速
animation-timing-function: linear;五、animation-iteration-count
定义动画播放的次数 可以使用number数字 我们想让动画执行2次
animation-iteration-count: 2;在这当中我们有一个十分常用的属性 infinite(无限的) 这个属性可以反复执行动画
animation-iteration-count: infinite;六、animation-direction
动画播放的方向
属性值简述normal 默认值动画按正常播放reverse动画反向播放alternate动画在奇数次1、3、5…正向播放在偶数次2、4、6…反向播放alternate-reverse动画在奇数次1、3、5…反向播放在偶数次2、4、6…正向播放
在使用alternate与alternate-reverse之前我们需要让动画无限的播放或者是播放2次以上
animation-direction:alternate;七、animation-fill-mode
属性简述backwards动画执行完毕后回到最初的位置forwards动画执行完毕后停在最后一帧不动
animation-fill-mode: forwards;八、animation-play-state
指定动画是否正在运行或已暂停 我用:hover为大家演示一下不和其他属性一样写在一起
.ball:hover {animation-play-state: paused;
}注意看鼠标
代码总结
!DOCTYPE html
html langen
headmeta charsetUTF-8title动画/titlestyle* {margin: 0;padding: 0;}.box {/* 绝对定位,子绝父相 */position: relative;width: 1000px;height: 100px;border: 1px solid black;margin: 100px auto;}.ball {/* 绝对定位,接下来用定位来实现移动 */position: absolute;top: 0;left: 0;width: 100px;height: 100px;border-radius: 50%;background-color: pink;/* 动画名称 */animation-name: move;/* 所需时间 */animation-duration: 2s;/* 延迟时间 */animation-delay: 2s;/* 运动曲线 */animation-timing-function: linear;/* 定义动画播放的次数 */animation-iteration-count: infinite;/* 动画播放方向 *//* animation-direction:alternate; *//* 最后一帧停止不动 *//* animation-fill-mode: forwards; */}/* 鼠标经过小球停止移出继续动 */.ball:hover {animation-play-state: paused;}/* 给小球定义关键帧 */keyframes move {0% {left: 0;}100% {left: 900px;}}/style
/head
bodydiv classbox!-- 小球 --div classball/div/div
/body
/html九、复合属性(常用)
我们可以直接使用animation animation: 动画的名称 时间 运动曲线 开始时间 播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停;
复合属性简写
/* 要使用到forwards需要不无限循环 */
animation: move 2s 2s linear infinite alternate;感谢大家的阅读本人文笔有限如有错误的地方可以向我指出感谢大家
