前端学习（二十七、八练习）变形+动画（css）

demo中老师用了transform，transition，animation，动画+变形特效，做了个旋转的3D骰子一样的效果，这两天研究一下这个如何制作:

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>动画学习</title>
<link rel="stylesheet" href="css/style.css" media="print">

<style>
.content{/*定位位置*/
position: absolute;
width: 400px;
height: 400px;
line-height: 400px;
top: 50%;
left: 50%;
margin: -200px;
cursor: default;/*光标为一个箭头*/
perspective: 1000px;/*设置视觉距离物体远近*/
}
.box{
width: 100%;
height: 100%;
transform-style: preserve-3d;/*启用3D功能，如果不启用则只有最外层一层有3D功能*/
-webkit-animation: abc 5s 14s linear infinite both;/*动画名持续时间延迟时间线性运动次数为无限次动画开始的时候停在动画的第一帧，结束的时候停在最后一帧*/
}
.content .box>div{ /* > 子元素选择器*/
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;/*令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。*/
border: 2px solid rgba(0,0,0,0.8);
background: rgba(0,0,0,0);
text-align: center;
line-height: inherit;/*继承父元素的line-height*/
font-size: 50px;
transition: 1s linear;/*设置所有的div运动时间1s，匀速*/
}
.content .box .box-top{
-webkit-animation: top 2s 2s linear both;/*动画名持续时间延迟时间线性匀速运动动画开始的时候停在动画的第一帧，结束的时候停在最后一帧*/
}
.box-left{
-webkit-animation: left 2s 4s linear both;
}
.box-right{
-webkit-animation: right 2s 6s linear both;
}
.box-bottom{
-webkit-animation: bottom 2s 8s linear both;
}
.box-back{
-webkit-animation: back 2s 10s linear both;
}
.box-front{
-webkit-animation: front 2s 12s linear both;
}
@-webkit-keyframes abc {
100%{-webkit-transform:rotate3d(1,1,1,360deg) }/*定义3D旋转，rotate3d就是3D旋转*/
}
@-webkit-keyframes top {
100%{-webkit-transform: rotateX(90deg) translateZ(200px)}/*沿着X轴旋转旋转的轴心是Z轴的200px处*/
}
@-webkit-keyframes left {
100%{-webkit-transform: rotateY(-90deg) translateZ(200px)}/*沿着Y轴旋转旋转的轴心是Y轴的200px处*/
}
@-webkit-keyframes right {
100%{
-webkit-transform: rotateY(90deg) translateZ(200px);
}
}
@-webkit-keyframes bottom {
100%{
-webkit-transform: rotateX(-90deg) translateZ(200px);
}
}
@-webkit-keyframes back {
100%{-webkit-transform:rotateZ(-90deg) translateZ(-200px)}
}
@-webkit-keyframes front {
100%{-webkit-transform:rotateZ(90deg) translateZ(200px)}
}
</style>
</head>
<body>

<div class="content">
<div class="box">
<div class="box-left">Left</div>
<div class="box-right">Right</div>
<div class="box-front">Front</div>
<div class="box-back">Back</div>
<div class="box-bottom">Bottom</div>
<div class="box-top">Top</div>
</div>
</div>
</body>
</html>

前端学习（二十七、八练习） 变形+动画（css）

猜你喜欢

前端学习（二十七、八练习）变形+动画（css）