标签：audio es2017 hidden position doctype for 表白 otto state
CSS3：3D环绕实现篇
废话不多说，直接给大家看效果：[不仅有背景，还有音乐]
大神请绕道：小白请继续往下看：
HTML,CSS代码都在下方，至于图片的话就不在这里粘贴了，把图片路径改成自己喜欢的就可以了。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D播放器</title>
<style>
*{
margin: 0;padding: 0;
}
body{
background-size: cover;background:url("images/image10/bg.jpg") center top;background-repeat: no-repeat;overflow: hidden;
}
ul{
width: 200px;height: 200px;position: absolute;top: 400px;left: 20%;margin-left: -100px;transform-style: preserve-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 infinite 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>
</head>
<body>
<ul>
<li><img src="images/image10/y1.jpeg"></li>
<li><img src="images/image10/y2.jpg"></li>
<li><img src="images/image10/y3.jpeg"></li>
<li><img src="images/image10/y4.png"></li>
<li><img src="images/image10/y5.jpg"></li>
<li><img src="images/image10/y6.jpg"></li>
</ul>
<img src="images/image10/xin.png"class="heart"><audio src="images/image10/song.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
</script>
</body>
</html>
标签：audio es2017 hidden position doctype for 表白 otto state
原文地址：http://www.cnblogs.com/fy666/p/7856614.html
