3d旋转图：主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style：preserve-3d来实现；
全屏的雪花飘落用原生js来实现(随机的大小，透明度的变化等)，有详细注释；
html5主要是实现背景音乐和头部的字体卷动效果。
< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=""/>
html部分：
<body>
<div class="top">
<marquee behavior="alternate" direction="left">时光不老，我们不散</marquee>
</div>
<div class="box" id="_box">
<div class="pic" id="_pic">
<ul id="_ul">
<li><img class="active" src="images/wm.jpg" alt=""></li>
<li><img class="active" src="images/6.png" alt=""></li>
<li><img src="images/2.png" alt=""></li>
<li><img class="active" src="images/w.jpg" alt=""></li>
<li><img src="images/4.png" alt=""></li>
<li><img class="active"src="images/xin1.png" alt=""></li>
</ul>
</div>
</div>
<div class="text"></div>
<!-- <audio src="music.mp3" hidden="true" loop="true" preload="auto"></audio> -->
<embed src="music.mp3" type=""/>
</body>
css部分
<style>
*{
padding:0;
margin: 0;
list-style: none;
}
img{
width: 240px;
height: 240px;
}
img.active{
width: 200px;
height: 200px;
border-radius: 60px 60px 150px 150px;
}
html,body{
width:100%;
height: 100%;
}
body{
background: url('images/3.jpg') no-repeat;
background-size:cover;
overflow: hidden;
}
.top{
width: 400px;
height: 50px;
margin: 60px auto;
font-size: 30px;
font-family: "华文行楷";
color: #fff;
}
.top marquee{
margin-top: -80px;
}
.box {
width: 310px;
height: 260px;
margin: 20px auto;
/* 景深：离视线的距离 */
perspective: 800px;
}
.box .pic{
width: 100%;
height: 100%;
position: relative;
/* 设置3d环境 */
transform-style:preserve-3d;
animation: play 10s linear infinite;
}
@keyframes play {
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
.box .pic li{
position: absolute;
top: 0;
left: 0;
}
.text {
width: 500px;
height: 200px;
margin: 0 auto;
font-size:22px;
color: #6fade1;
font-family: "华文行楷";
}
.xh {
animation: snow 15s infinite linear;
}
@keyframes snow{
0%{
transform: rotate(0);
}
50%{
opacity: 0.4;
}
100%{
transform: rotate(360deg);
opacity: 0.1;
}
}
</style>
js部分
<script>
// 获得元素
var box = document.getElementById('_box');
var pic = document.getElementById('_pic');
var ul = document.getElementById('_ul');
var text = document.getElementsByClassName('text')[0];
var lis = ul.children;
var deg = 360 / lis.length;
var num = 0;
var string = "朋友之间不需要谢谢，也不需要对不起。因为真正的友谊不是谢谢也不是对不起，它只是静静的，告诉你：我还在！";
// 让li元素呈圈形式展开
for(var i = 0;i < lis.length ;i++)
{
lis[i].style.transform = "rotateY("+deg*i+"deg) translateZ(216px)";
}
// 让文字一个一个的出现在屏幕上
show();
function show(){
var timer = null;
text.innerHTML += string.charAt(num);
num++;
clearInterval(timer);
timer = setTimeout(show,200);
if(num == string.length)
{
clearInterval(timer);
}
}
// 制作雪花特效
var minsize = 5;// 最小的雪花
var maxsize = 50;// 最大的雪花
var delay = 100;// 生成雪花的时间间隔
var snowColor = "#fff";// 雪花颜色
var snowDiv = document.createElement('div');// 生成一个雪花
snowDiv.className = "xh";
snowDiv.style.position = "absolute";
snowDiv.style.left = '0';
snowDiv.style.top = "0";
snowDiv.style.color = snowColor;
snowDiv.innerHTML = "❉";
var dHeight = document.documentElement.clientHeight;// 检测可视区的高度；
var dWidth = document.documentElement.clientWidth;// 检测可视区的宽度
setInterval(function(){
var snowSize = minsize + Math.random()*maxsize;// 随机雪花的大小
var startLeft = Math.random()*dWidth;// 雪花随机出现/停止的left值
var stopLeft= Math.random()*dWidth;// 雪花随机出现/停止的left值
var startOpacity = 0.7 + Math.random()*0.3;// 随机的透明度
var stopHeight = dHeight -100;// 雪花停止的高度
var speed = 3 +Math.random() *5 ;// 雪花飘落过程的速度
var div = snowDiv.cloneNode(true);
div.style.left = startLeft + 'px';
div.style.opacity = startOpacity;
div.style.fontSize = snowSize + 'px';
document.body.appendChild(div);
animate(div,speed,stopHeight,stopLeft );
},delay);
function animate(obj,speed,stopHeight,stopLeft){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
obj.style.top = speed + obj.offsetTop + 'px';
if(obj.offsetTop >= stopHeight)
{
clearInterval(obj.timer);
document.body.removeChild(obj);// 到达设置的高度就移除
}
},50);
}
</script>