Music box animation production:
After learning CSS3 animation, I found that music boxes can also be made through animation. Let's not talk much, let's go!
Demo code:
- HTML fragment
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
- css style
<style>
body{
perspective: 1000px;/* 定义透视 */
}
//父盒子
section{
position: relative;//相对定位
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: move 10s linear infinite;
background: url(../../../images/champion.jpg) no-repeat;
}
//子盒子div
section div{
position: absolute;//绝对定位
top:0;
left: 0;
width: 100%;
height: 100%;
background: url(../../../images/champion.jpg) no-repeat
}
/* z轴移动200个像素单位,选中第一个盒子*/
section div:nth-child(1){
transform: translateZ(300px);
}
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
/* 选中第二个盒子 */
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
}
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px);
}
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
}
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px);
}
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px);
}
/* 定义一个动画效果 */
@keyframes move{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);/* 沿着y轴移动360度 */
}
}
/* 当鼠标经过盒子的时候，停止旋转 */
section:hover{
animation-play-state: paused;/* 停止动画 */
}
</style>
Code analysis:
- First define a parent container section in the body, nest 6 sub-div box models in the parent container, and add an absolute positioning to the sub-box div container, and set the relative positioning of the parent container, which is the so-called "child-like father-like", So that the child box can be in the scope of the parent box, and the position can be adjusted at will without affecting other external boxes.
section{
position: relative;//相对定位
width: 300px;
height: 200px;
margin: 100px auto;
}
//子盒子div
section div{
position: absolute;//绝对定位
}
- Add moving effects to the child boxes through pseudo-class elements. There are 6 boxes in total, so set each box to move 60 degrees, which is exactly 360 degrees.
/* 选中第一个盒子 */
/* z轴移动200个像素单位,选中第一个盒子*/
section div:nth-child(1){
transform: translateZ(300px);//想Z轴移动300个像素单位
}
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
/* 选中第二个盒子 */
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
}
/* 选中第三个盒子 */
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px);
}
/* 选中第四个盒子 */
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
}
/* 选中第五个盒子 */
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px);
}
/* 选中第六个盒子 */
/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px);
}
- The definition of rotation animation
defines an animation named move here. from represents 0%, that is, when the animation starts, and to represents 100%, that is, when the animation is completed. In the case of the music box here, it can be concluded through analysis that it moves along the Y axis, so it is only necessary to add the method of rotateY to the animation.
/* 定义一个动画效果，动画名字为：move */
@keyframes move{
from{
transform: rotateY(0);/* 沿着y轴移动0度 */
}
to{
transform: rotateY(360deg);/* 沿着y轴移动360度 */
}
}
- Calling the animation
Call the animation through the animation property, and the parameters are the name of the animation, the transition time, the speed curve of the animation, and the number of times the animation is played.
transform-style: preserve-3d;/* 保留3d的效果 */
animation: move 10s linear infinite;
In addition, you also need to set the perspective effect for the body, the effect is even better!
body{
perspective: 1000px;/* 定义透视 */
}
- Finally, you can set a hover selector for the parent box of the box. When the mouse passes over the picture, the music box will stop rotating!
/* 当鼠标经过盒子的时候，停止旋转 */
section:hover{
animation-play-state: paused;/* 停止动画 */
}
Show results:
