前端入门到熟悉day08

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">