案例一
.box{
width: 100px;
height: 100px;
background: #f00;
margin: 0 auto;
/*animation-name: move;
animation-duration: 5s;
animation-delay: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;*/
/*animation-direction: reverse;*/ /*反方向*/
/*animation-fill-mode: forwards; 停在结束位置,不反回原点 */
animation: move 5s linear infinite reverse;
}
div:hover{
animation-play-state: paused;
}
/*方法一*/
/*@keyframes move{
from{transform: translate(0);}
to{transform: translateX(200px);}
}*/
/*方法二*/
@keyframes move{
0%{transform: translate(0,0);}
25%{transform: translate(300px,0);background: yellow;}
50%{transform: translate(300px,300px);background: yellowgreen;}
75%{transform: translate(0,300px);background: cyan;}
100%{transform: translate(0,0);}
}
案例二
div{
width: 100px;
height: 100px;
background: #f00;
margin-bottom: 20px;
/*animation-name: play;*/
animation-name: play;
animation-duration: 5s;
animation-delay: 2s;
animation-timing-function: linear;
}
div:nth-child(1){
animation-fill-mode: none;
}
div:nth-child(2){
animation-fill-mode: backwards;
}
div:nth-child(3){
animation-fill-mode: forwards;
}
div:nth-child(4){
animation-fill-mode: both;
}
@keyframes play{
0%{transform: translate(0,0);background: yellowgreen;}
100%{transform: translate(300px,0);}
}
案例三
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.nav{
width: 500px;
height: 100px;
margin: 50px auto;
border: 2px solid #000;
}
.nav li{
float: left;
margin: 20px;
}
.nav li img{
margin-right: 20px;
}
.nav li:hover img{
animation: move 3s;
}
@keyframes move{
0%{transform: translatey(0);opacity: 1;}
60%{transform: translatey(-50px);opacity: 0;}
61%{transform: translatey(30px);opacity: 0;}
100%{transform: translateY(0);opacity: 1;}
}
案例四
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
}
.box span{
display: block;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
position: absolute;
animation: play 1s linear infinite;
}
.box div{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.box1 span:nth-child(1){
left: 0;
top: 0;
}
.box1 span:nth-child(2){
right: 0;
top: 0;
}
.box1 span:nth-child(3){
right: 0;
bottom: 0;
}
.box1 span:nth-child(4){
left: 0;
bottom: 0;
}
.box2{
transform: rotate(45deg);
}
.box2 span:nth-child(1){
left: 0;
top: 0;
}
.box2 span:nth-child(2){
right: 0;
top: 0;
}
.box2 span:nth-child(3){
right: 0;
bottom: 0;
}
.box2 span:nth-child(4){
left: 0;
bottom: 0;
}
.box1 span:nth-child(1){
animation-delay: 0;
}
.box2 span:nth-child(1){
animation-delay: 0.1s;
}
.box1 span:nth-child(2){
animation-delay: 0.2s;
}
.box2 span:nth-child(2){
animation-delay: 0.3s;
}
.box1 span:nth-child(3){
animation-delay: 0.4s;
}
.box2 span:nth-child(3){
animation-delay: 0.5s;
}
.box1 span:nth-child(4){
animation-delay: 0.6;
}
.box2 span:nth-child(4){
animation-delay: 0.7s;
}
@keyframes play{
0%{transform: scale(1);}
50%{transform: scale(0);}
100%{transform: scale(1);}
}
案例五
.box{
width: 180px;
height: 300px;
border: 2px solid red;
margin: 50px auto;
background: url(img/charector.png) no-repeat 0 0;
animation: play 0.5s step-start infinite;
}
@keyframes play{
0%{background-position: 0 0;}
16%{background-position: -180px 0;}
33%{background-position: -360px 0;}
50%{background-position: -540px 0;}
66%{background-position: -720px 0;}
84%{background-position: -900px 0;}
100%{background-position: -1080px 0;}
}
案例六
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body{
perspective: 900px;
}
.box{
width: 500px;
height: 500px;
border: 2px solid red;
margin: 50px auto;
position: relative;
transition: 3s;
transform-style: preserve-3d;
}
.box li{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.box li:nth-child(1){
background: #f0f;
transform: translatez(100px);
}
.box li:nth-child(2){
background: #00f;
top: 50px;
left: 50px;
}
.box:hover{
transform: rotateY(360deg);
}
- 1
- 2
案例七
*{
margin: 0;
padding: 0;
}
body,html{height: 100%;}
.box{
width: 100%;
height: 100%;
background: url(img/2.jpg) no-repeat 0 0;
background-size: cover;
}
.box1,.box2{
width:768px;
height:768px;
margin: 0 auto;
position: relative;
}
.box1 img{
position: absolute;
}
.img1{
top: 50%;
left: 0;
right: 0;
margin: auto;
}
.img2,.img3{
position: absolute;
top:0;bottom:0;
left:0;right:0;
margin:auto;
}
.box2 img:nth-child(1){
top: -30px;
left: 0;
right: 0;
margin: auto;
}
.box2 img:nth-child(2){
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.box2 img:nth-child(3){
bottom: -30px;
left: 0;
right: 0;
margin: auto;
}
.box2 img:nth-child(4){
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
.box2 img:nth-child(5){
top: 70px;
right: 70px;
}
.box2 img:nth-child(6){
bottom: 70px;
right: 70px;
}
.box2 img:nth-child(7){
bottom: 70px;
left: 70px;
}
.box2 img:nth-child(8){
top: 70px;
left: 70px;
}
.img2,.box2{
animation: lunzi 20s linear infinite;
}
.box1:hover img{
animation-play-state: paused;
}
.box1:hover .box2{
animation-play-state: paused;
}
@keyframes lunzi{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
.box2 img{
animation: diaolan 20s linear infinite;
}
@keyframes diaolan{
0%{transform: rotate(0);}
100%{transform: rotate(-360deg);}
}*