Home > Developer > Web Develop
Css3:3d Wrapping Implementation Chapter
Not much nonsense to say, directly to everyone to see the effect: [Not only background, but also music]
Big God please detour: little white Please continue to look down:
is not the heart , heart than action: code in hand, the world I have, vindicate the weapon can not miss.Html,css code is in the bottom, as for the picture of the word is not here to paste, the picture path to their favorite can be.
Source code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>3d player </title>
<style>
*{
margin:0;padding:0;
}
body{
Background-size:cover;background:url ("images/image10/bg.jpg") Center Top;background-repeat:no-repeat;ove Rflow:hidden;
}
ul{
Width:200px;height:200px;position:absolute;top:400px;left:20%;margin-left: -100PX;TRANSFORM-STYLE:PR eserve-3d;
Transform:rotatex (0deg) Rotatey (0deg), animation:play 6s linear 0s infinite normal;
}
ul li {
list-style:none;width:200px;height:200px;line-height:200px;font-size:60px;text-align:center;position : absolute;top:0; left:0;
}
ul Li img{
width:200px;height:200px;border:5px solid skyblue;box-sizing:border-box;
}
ul:hover{
animation-play-state:paused;
}
ul:hover Li img{
opacity:0.7;
}
ul Li:hover img{
opacity:1;
}
ul Li:nth-child (1) {
Transform:rotatey (60deg) Translatez (200px);
}
ul Li:nth-child (2) {
Transform:rotatey (120deg) Translatez (200px);
}
ul Li:nth-child (3) {
Transform:rotatey (180deg) Translatez (200px);
}
ul Li:nth-child (4) {
Transform:rotatey (240deg) Translatez (200px);
}
ul Li:nth-child (5) {
Transform:rotatey (300deg) Translatez (200px);
}
ul Li:nth-child (6) {
Transform:rotatey (360deg) Translatez (200px);
}
@keyframes Play {
from{
Transform:rotatex ( -12deg) Rotatey (0deg);
}
to{
Transform:rotatex ( -12deg) Rotatey (360deg);
}
}
. heart{
width:173px;height:157px;position:absolute;left:100px;bottom:100px;animation:plays 5s linear 0s infin Ite normal;
}
@keyframes plays {
0%{
left:150px;bottom:150px;opacity:0.8;
}
20%{
left:250px;bottom:250px;opacity:0.6;
}
40%{
left:350px;bottom:350px;opacity:0.5;
}
60%{
left:500px;bottom:500px;opacity:0.3;
}
80%{
left:600px;bottom:300px;opacity:0.5;
}
90%{
left:800px;bottom:100px;opacity:0.8;
}
100%{
left:900px;bottom:0px;opacity:0.1;
}
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<audio src= "Images/image10/song.mp3" autoplay= " AutoPlay "loop=" Loop ></audio>
<script>
</script>
</body>
Css3:3d Wrapping Implementation
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
