Home > Developer > Web Develop
Animation in the CSS in fact can be said to be very powerful, in the Web page loading speed, his functional effects can be a variety of changes, do not only unexpected, of course, the premise is that you have to master the CSS3 above the various labels, today brought me in the course of the animation 3D dynamic rotation. The code is as follows:
<?xml version= "1.0" encoding= "UTF-8"?>
<! DOCTYPE html
Public "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<title></title>
<style type= "Text/css" >
. bk{
BORDER:1PX solid blue;
width:1300px;
height:800px;
}
. dy1{
width:410px;
height:450px;
margin-left:450px;
margin-top:40px;
Position:absolute;
Background-image:url ("Image/beij1.png");
}
. dy2{
width:410px;
height:450px;
margin-left:450px;
margin-top:40px;
Position:absolute;
Background-image:url ("Image/beij2.png");
}
. dy3{
width:410px;
height:450px;
margin-left:450px;
margin-top:40px;
Position:absolute;
Background-image:url ("Image/beij3.png");
}
@keyframes Z1
{
From{transform:scale (0.5, 0.5);
}
to {Transform:scale (1, 1);
}
}
@keyframes Z2
{
From{transform:scale (0.5, 0.5);
}
to {Transform:scale (1, 1);
}
}
@keyframes Z3
{
From{transform:scale (0.5, 0.5);
}
to {Transform:scale (1, 1);
}
}
@keyframes z1-1
{
0%{margin-left:450px; z-index:1;}
14.2%{margin-left:150px; z-index:1;}
28.4%{margin-left:450px;z-index:3;}
36.6%{margin-left:450px;z-index:3;}
48.8%{margin-left:450px;z-index:3;}
61%{margin-left:750px;z-index:2;}
73.2%{margin-left:750px;z-index:2;}
85.4%{margin-left:750px;z-index:2;}
100%{margin-left:150px;z-index:1;}
}
@keyframes z2-1
{
0%{margin-left:450px; z-index:3;}
14.2%{margin-left:450px;z-index:3;}
28.4%{margin-left:750px;z-index:2;}
36.6%{margin-left:750px;z-index:3;}
48.8%{margin-left:750px;z-index:2;}
61%{margin-left:150px;z-index:1;}
73.2%{margin-left:150px;z-index:1;}
85.4%{margin-left:150px;z-index:1;}
100%{margin-left:450px;z-index:3;}
}
@keyframes z3-1
{
0%{margin-left:450px; z-index:2;}
14.2%{margin-left:750px;z-index:2;}
28.4%{margin-left:150px;z-index:1;}
36.6%{margin-left:150px;z-index:1;}
48.8%{margin-left:150px;z-index:1;}
61%{margin-left:450px;z-index:3;}
73.2%{margin-left:450px;z-index:3;}
85.4%{margin-left:450px;z-index:3;}
100%{margin-left:750px;z-index:2;}
}
. dy1{
Animation-name:z1,z1-1;
animation-duration:2s,10s;
Animation-iteration-count:1,infinite;
}
. dy2{
animation-name:z2,z2-1;
animation-duration:2s,10s;
Animation-iteration-count:1,infinite;
}
. dy3{
Animation-name:z3,z3-1;
animation-duration:2s,10s;
Animation-fill-mode:forwards;
Animation-iteration-count:1,infinite;
}
</style>
<body>
<div class= "BK" >
<div class= "Dy1" ></div>
<div class= "Dy2" ></div>
<div class= "Dy3" ></div>
</div>
</body>
This animation is not particularly successful, to be honest. Because the direction of rotation counterclockwise rotation, so it looks a bit natural,.
In doing this just pay attention to the direction of selection, there are a few div I into the stacking order so that the image will not be covered by other pictures, and control the time, the speed of conversion, these are to be noted. ，。 , the static effect is shown as follows:
CSS for animated functions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
