CSS3——animation的基础（轮播图）

最新推荐文章于 2024-05-24 23:45:01 发布

weixin_30940783

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量144

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/fuluqi/p/7260940.html

版权

作为前端刚入门的小菜鸟，只想记录一下每天的小收获

对于animation动画

1.实现动画效果的组成：

（1）通过类似Flash的关键帧来声明一个动画

（2）在animation属性中调用关键帧声明的动画

2.animation是一个复合属性包括很多的子属性：

　　animation-name:用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加载时会应用animation-name 指定的动画，从而执行动画。　

　　animation-duration 用来设置动画播放所需的时间

　　animation-timing-function 用来设置动画的播放方式，有一些值如下：

　　　　　速度由快到慢，然后逐渐变慢：ease

　　　　　速度越来越快，呈现加速状态：ease-in;

　　　　　速度越来越慢，呈现一种减速状态：ease-out

　　　　　先加速，在减速：ease-in-out

　　　　匀速状态：linear

　　　　自定义(三段赛贝尔曲线);cubic-bezier

　　animation-delay 用来指定动画的延迟时间（一直循环的值：infinite）

　　animation-iteration-count 用来指定动画播放的循环次数

　　animation-direction 用来指定动画的播放方向(逆向：alternate)

　　animation-play-state 用来控制动画的播放状态(停止：paused)

　　animation-fill-mode 用来设置动画的时间外属性

　　　　　　动画结束后不返回：forwards

　　　　　　动画结束后迅速返回：backforwards

　　　　　　根据情况产生前两个效果：base

　　　　　　默认：normal;

　　简写形式：animation: myani 1s ease 2 alternate 0s both;

3.为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

Opera Firefox Chrome Safari IE

支持需带前缀15 ~ 29 5 ~ 15 4 ~ 42 4 ~ 8 无

支持不带前缀无16+ 43+ 无10.0+

//兼容完整版，Opera 在这个属性上加入webkit，所以没有-o-

-webkit-animation: myani 1s ease 2 alternate 0s both;

-moz-animation: myani 1s ease 2 alternate 0s both;

-ms-animation: myani 1s ease 2 alternate 0s both;

transition: all 1s ease 0s;

//@keyframes 也需要加上前缀

@-webkit-keyframes myani {...}

@-moz-keyframes myani {...}

@-o-keyframes myani {...}

@-ms-keyframes myani {...}

keyframes myani {...}

<下面的例子没有加上兼容性>

1.幻灯片式轮播图

<div id="container">
    <div></div>
    <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

*{margin:0;padding:0;}

#container{
    width:100%;
    height:100px;
 position:relative;
 overflow:hidden;
}

#container>:not(:first-child){
 opacity:0;
}

#container>:first-child{
 width:300px;
 height:100px;
 position:absolute;
 font-weight:bold;">mediumpurple;
 animation-name:shuf1;
 animation-duration:20s; /*动画执行时间*/
 animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
 animation-iteration-count:infinite; /*动画执行次数*/
}

#container>:nth-child(2){
 width:300px;
 height:100px;
 position:absolute;
 font-weight:bold;">palegreen;
 animation-name:shuf2;
 animation-duration:20s; /*动画执行时间*/
 animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
 animation-iteration-count:infinite; /*动画执行次数*/
}

#container>:nth-child(3){
 width:300px;
 height:100px;
 poaition:absolute;
 font-weight:bold;">pink;
 animation-name:shuf3;
 animation-duration:20s; /*动画执行时间*/
 animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
 animation-iteration-count:infinite; /*动画执行次数*/
}


#container>:nth-child(4){
 width:300px;
 height:100px;
 poaition:absolute;
 font-weight:bold;">lightskyblue;
 animation-name:shuf4;
 animation-duration:20s; /*动画执行时间*/
 animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
 animation-iteration-count:infinite; /*动画执行次数*/
}



#container>:nth-child(3){
 width:300px;
 height:100px;
 poaition:absolute;
 font-weight:bold;">yellowgreen;
 animation-name:shuf5;
 animation-duration:20s; /*动画执行时间*/
 animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
 animation-iteration-count:infinite; /*动画执行次数*/
 }


#container>:nth-child(6){
 width:300px;
 height:100px;
 poaition:absolute;
 font-weight:bold;">darkgrey;
 animation-name:shuf6;
 animation-duration:20s; /*动画执行时间*/
 animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
 animation-iteration-count:infinite; /*动画执行次数*/
}


@keyframes shuf1 {
0% {opacity: 1;}
14%,28%,42%,56%,72%,86%,100%{opacity:0.5}
}

@keyframes shuf2 {
0%,14% {opacity:0 ;}
28%{opacity:1;}
42%,56%,72%,86% ,100%{opacity:0;}
}

@keyframes shuf3 {
0%,14% ,28%{opacity: 0;}
42% {opacity:1;}
56%,72%,86% ,100%{opacity:0;}
}

@keyframes shuf4 {
0%,14% ,28%,42% {opacity: 0;}
56% {opacity:1;}
72%,86% ,100%{opacity:0;}
}

@keyframes shuf5 {
0%,14% ,28%,42%,56% {opacity: 0;}
72% {opacity:1;}
86% ,100%{opacity:0;}
}

@keyframes shuf6 {
0%,14% ,28%,42%,56%,72% {opacity: 0;}
86% {opacity:1; }
100%{opacity:0;}
}

2.水平轮播图

html代码处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <link rel="stylesheet" href="case2.css">
</head>
<body>
<div id="main">
 <div id="container">
 <div></div>
 <div></div>
 <div></div>
 </div>
</div>
</body>
</html>

css样式

*{margin:0;padding:0;}

#main{
 width:1000px;
 height:200px;
 margin:0 auto;
 border:1px solid black;
 position:relative;
 overflow:hidden;
}

#container{
 width:3000px;
 height:200px;
 border:1px solid black;
 position:absolute;
 top:0;
 animation-name:a1;
 animation-duration:30s;/*设置动画播放的时间*/
 animation-timing-function:linear; /*设置动画的缓动状态*/
 animation-iteration-count:infinite; /*设置动画的循环次数*/
 animation-direction:alternate; /* 设置动画逆向运动*/
}
#container>div{
 width:1000px;
 height:200px;
 float:left;

}

#container>:first-child{
 font-weight:bold;">#65B053;
}

#container>:nth-child(2){
 font-weight:bold;">#59B7DF;
}

#container>:nth-child(3){
 font-weight:bold;">#E8E25D;
}



@keyframes a1{
0%{margin-left:0;}
45%,50%{margin-left:-1000px;}/*设置每张图片的停留时间*/
95%,100%{margin-left:-2000px;}
}

转载于:https://www.cnblogs.com/fuluqi/p/7260940.html

weixin_30940783

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3——animation的基础（轮播图）

作为前端刚入门的小菜鸟，只想记录一下每天的小收获对于animation动画1.实现动画效果的组成：（1）通过类似Flash的关键帧来声明一个动画（2）在animation属性中调用关键帧声明的动画2.animation是一个复合属性包括很多的子属性：　　animation-name:用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加载...
复制链接

扫一扫