标签：动画 color li nth html background animation
动画
-
animation 动画
-
可复用
-
动的部分单独拿出来放在css里
-
@keyframes告诉你们动画具体的变化内容（怎么动）
-
-
-
animation-name : 需要带哦用的@keyframes的动画名
-
animation-duration: s ms 需要的时间
-
animation-delay : 动画速率的变化
-
anImation-timing-function
-
linear 匀速
-
ease 慢快慢
-
ease-in 漫入
-
ease-out 慢出
-
ease-in-out 慢入慢出
-
cublic-bezier 贝塞尔曲线
-
steps()//其中的数字代表停留的帧数的个数
-
start
-
保留下一帧 20% %0快速的过渡
-
-
end
-
保留当前帧 0% 100%帧快速的过去
-
-
-
-
animation-iteration-count 规定动画播放的次数
-
1 2 3 numeber
-
infinite 无限次数
-
-
anination-dircetion 动画变换的方向
-
normal 默认
-
reverse 反向
-
alternate 先正再反（播放次数至少2次）
-
alternate-reverse 先反
-
-
animation-fill-mode 决定动画的第一帧和最后一帧的状态
-
none 原始状态=》动画开始=》动画帧100%
-
forwards 原始状态=》动画开始=》动画帧100%
-
backwards 动画0帧=》动画开始=》动画100%
-
-
animation-play-state 控制动画开始暂停
-
paused 暂停
-
running 运行
-
1.案例
效果：运用动画达到变化颜色和宽度效果
<style>
div{
width: 200px;
height: 100px;
background-color: blue;
animation:run 3s steps(3) ;
}
div:hover{
animation-play-state: paused;
}
@keyframes run{
0%{
background-color: yellowgreen;
width: 100px;
}
100%{
background-color: red;
width: 800px;
}
}
</style>
<body>
<div>
</div>
</body>
案例二
通过动画的效果达到轮播的效果
<style>
*{margin:0;padding:0;}
a{text-decoration: none;}
li{list-style: none;}
div{
/* overflow: hidden; */
position: relative;
width: 1000px;
height: 475px;
border: 1px solid red;
margin: 100px auto 0;
}
ul{
position: absolute;
width: 7000px;
height: 475px;
/* 加一步 无效操作 */
animation:move 7s steps(7) infinite;
/* 0-1000 1000-2000 2000-3000 3000-4000
4000-5000 5000-6000 6000-7000*/
}
@keyframes move{
0%{
left: 0;
}
100%{
left:-7000px;
}
}
li{
float: left;
width: 1000px;
height: 475px;
}
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: orange;
}
li:nth-child(3){
background-color: yellow;
}
li:nth-child(4){
background-color: green;
}
li:nth-child(5){
background-color: yellowgreen;
}
li:nth-child(6){
background-color: blue;
}
li:nth-child(7){
background-color: purple;
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
标签：动画,color,li,nth,html,background,animation 来源： https://www.cnblogs.com/lxyyds/p/16201824.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。