前端入门到熟悉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; */
02使用动画实现无缝滚动
div>ul{
width: 200%;
list-style: none;
animation: move 7s infinite linear;
}
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切割轮播
超纲，布出外表就行（自己的要求）
尚德制作（移动端）