transition动画
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>transform
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
margin:50px auto 0;
transition:all 1s ease;
}
.box:hover{
transform:translate(50px,50px);
}
.box2{
width:200px;
height:200px;
background-color:gold;
margin:50px auto 0;
transition:all 1s ease;
}
.box2:hover{
transform:rotate(360deg);
}
.box3{
width:200px;
height:200px;
background-color:gold;
margin:50px auto 0;
transition:all 1s ease;
}
.box3:hover{
transform:scale(0.5,0.2);
}
.box4{
width:200px;
height:200px;
background-color:gold;
margin:50px auto 0;
transition:all 1s ease;
}
.box4:hover{
transform:skew(0deg,45deg);
}
<div class="box">
<div class="box2">
<div class="box3">
<div class="box4">
</html>
laading动画
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document
<style type="text/css">
.box{
width:300px;
height:125px;
border:1px solid #000;
margin:200px auto 0;
}
.box p{
text-align:center;
width:100%;
float:left;
margin:0;
padding:0;
}
.box div{
width:30px;
height:70px;
float:left;
background-color:gold;
margin:15px;
border-radius:10px;
}
.box div:nth-child(1){
background-color:red;
animation:loading 500ms ease 0s infinite alternate;
}
.box div:nth-child(2){
background-color:green;
animation:loading 500ms ease 100ms infinite alternate;
}
.box div:nth-child(3){
background-color:pink;
animation:loading 500ms ease 200ms infinite alternate;
}
.box div:nth-child(4){
background-color:greenyellow;
animation:loading 500ms ease 300ms infinite alternate;
}
.box div:nth-child(5){
background-color:cyan;
animation:loading 500ms ease 400ms infinite alternate;
}
@keyframes loading{
from{
transform:scaleY(1);
}
to{
transform:scaleY(0.5);
}
}
<div class="box">
<p>loading...
</html>
图片翻转
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>图片翻面
<style type="text/css">
.con{
width:300px;
height:272px;
margin:100px auto 0;
position:relative;
transform-style:preserve-3d;
transform:perspective(800px)rotateY(0deg);
}
.pic,.info{
width:300px;
height:272px;
position:absolute;
left:0;
top:0;
backface-visibility:hidden;
transform:perspective(800px)rotateY(0deg);
transition:all 500ms ease;
}
.info{
background-color:gold;
text-align:center;
line-height:272px;
transform:translateZ(2px)rotateY(180deg);
}
.con:hover .pic{
transform:perspective(800px)rotateY(180deg);
}
.con:hover .info{
transform:perspective(800px)rotateY(0deg);
}
<div class="con">
<div class="pic"><img src="images/location_bg.jpg">
<div class="info">图片文字说明
</html>
网友评论