01css3动画添加
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 添加动画效果 */
/* 1.指定动画的名称 */
/* animation-name: moveTest;
/* 2设置动画的总耗时 */
/* animation-duration: 4s; */
/* 3.动画的时间函数 */
/* animation-timing-function: linear; */
/* 4动画的延时时间 */
/* animation-delay: .5s; */
/* 5.设置动画的播放次数 默认1次 数值可以放数字次数 也可以设置无限次infinite */
/* animation-iteration-count:1; */
/* 6.设置交替动画 alternate:来回交替 */
/* animation-direction:normal; */
/*7.设置动画结束时的状态:默认情况下,动画执行完毕之后,会回到原始状态
forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态*/
/* animation-fill-mode: backwards; */
/* 创建动画 */
@keyframes moveTest{
/* from{
0%
background: red;
}
to{
100%
background: blue;
} */
/* 百分比是指整个动画的耗时的百分比 */
0%{top: 0;left: 20%;background-color: red;}
25%{top:0;left:80%; background-color: blue;}
50%{top:80%; left:80%; background-color:green ;}
75%{top:80%; left: 20%; background-color: purple;}
100%{top:0; left:20%;background-color: red;}
}
/* div:hover{
/* 8设置动画的播放状态 */
/* animation-play-state: paused; */
<script>
var div=document.querySelector("div");
document.querySelector("#play").οnclick=function(){
div.style.animationPlayState="running";
}
document.querySelector("#pause").οnclick=function(){
div.style.animationPlayState="paused";
}
</script>
02使用动画实现无缝滚动
div>ul{
width: 200%;
list-style: none;
animation: move 7s infinite linear;
}
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/7.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/7.jpg"></li>
</ul>
03loading加载效果
.spinner>div:nth-child(2){
animation-delay: -1.1s;
}
.spinner>div:nth-child(3){
animation-delay: -1.0s;
}
.spinner>div:nth-child(4){
animation-delay: -0.9s;
}
.spinner>div:nth-child(5){
animation-delay: -0.8s;
}
.spinner>div{
background-color: darkgreen;
width: 6px;
height: 100%;
display: inline-block;
animation: mymove 1.2s infinite ease-in-out;
}
@keyframes mymove{
0%,40%,100%{transform: scaleY(0.4);}
20%{
transform: scaleY(1);
}
}
04仿天猫商品效果
.m_img img{
transform: scale(1);
transition: transform .5s;
}
.main li:hover .m_img img{
transform: scale(1.2);
}
05心跳
@keyframes heart{
0%{transform: scale(1);}
50%{transform: scale(1.2);}
100%{transform: scale(1);}
}
06旋转
div img{
animation: rotate 2s infinite linear;
}
@keyframes rotate{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
07两面翻转的盒子
div:hover img{
transform: rotateY(180deg);
}
div img:last-child{
backface-visibility: hidden;
/* 定义当图片不面向屏幕的时候是否可见 */
}
08切割轮播
超纲,布出外表就行(自己的要求)
尚德制作(移动端)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">