显示效果
源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css动画练习</title>
</head>
<style>
body {
background: #999;
margin: 0 auto;
font-size: 100px;
height: 100%;
}
div {
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
}
div.a {
background: red;
transition: width 2s, height 2s, transform 2s;
}
div.b {
background: yellow;
transition: width 2s, height 2s, transform 2s;
}
div.c {
background: blue;
transition: width 2s, height 2s, transform 2s;
}
div.d {
background: pink;
transition: width 2s, height 2s, transform 2s;
}
div.e {
background: white;
transition: width 2s, height 2s, transform 2s;
}
div.f {
background: purple;
transition: width 2s, height 2s, transform 2s;
}
body:hover div.a {
width: 200px;
height: 200px;
transform: rotatex(260deg) rotate(90deg) translate(1100px, 0);
}
body:hover div.b {
width: 200px;
height: 200px;
transform: rotatex(-180deg) rotate(90deg) translate(300px, 0);
}
body:hover div.c {
width: 200px;
height: 200px;
transform: rotatey(-80deg) rotate(-90deg) translate(300px, -600px);
}
body:hover div.d {
width: 200px;
height: 200px;
transform: rotatey(80deg) rotate(90deg) translate(-300px, -600px);
}
body:hover div.e {
width: 200px;
height: 200px;
transform: rotatex(80deg) rotate(90deg) translate(-2300px, 0);
}
body:hover div.f {
width: 200px;
height: 200px;
transform: rotatex(360deg) rotate(90deg) translate(-300px, 0);
}
</style>
<body >
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</body>