HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
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="data:images/wm.jpg" alt=""></li>
<li><img class="active" src="data:images/6.png" alt=""></li>
<li><img src="data:images/2.png" alt=""></li>
<li><img class="active" src="data:images/w.jpg" alt=""></li>
<li><img src="data:images/4.png" alt=""></li>
<li><img class="active"src="data: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>
HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）的更多相关文章
- 原生js实现浏览器全屏和退出全屏
全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- js指定区域全屏
<html> <head> <title>js指定区域全屏</title> <style> ...
- js设置页面全屏
html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...
- 利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
- 原生js的联动全选
开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...
- 原生JS实现雪花特效
今天在校园招聘上被问到的问题,用JS写出雪花的效果.我打算使用多种方法来试试如何实现雪花. 这是目前按照网上某种思路模仿的第一种雪花,不太好看,但是大致意思清楚. 思路1:该思路直接由JS实现. 雪花 ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- cascade属性
cascade属性是设置级联操作的也就是在操作一端的数据如果影响到多端数据时会进行级联操作,一对一的时候直接写在标签上,其他的要写在set标签上 cascade="none|save-upd ...
- Mysql group by top N的问题
在日常工作中,经常要查询分组的前几名.oracle中可以通过row_num来支持查询,mysql暂时不支持row_num.那么如何来完成这个需求呢? 例如: 表中的数据: +--------+---- ...
- BZOJ 1084 最大子矩阵 dp
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1084 题目大意: 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分 ...
- Save and read double array in a binary file
;} 32 bytes read 9.5 -3.4 1 2.1 "
- CCControlExtension/CCControl
#ifndef __CCCONTROL_H__ #define __CCCONTROL_H__ #include "CCInvocation.h" #include "C ...
- 1588. [HNOI2002]营业额统计【平衡树-splay 或 线段树】
Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...
- 【NOIP2014】解方程
题目描述 已知多项式方程 \[a_0 + a_1x + a_2x^2 + \dots +a_nx^n=0\] 求这个方程在\([1,m]\)内的整数解(\(n\)和\(m\)均为正整数). 输入输出格 ...
- P1081 开车旅行
题目描述 小 A 和小 B 决定利用假期外出旅行,他们将想去的城市从 1 到 N 编号,且编号较小的 城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市 i 的海拔高度为 Hi,城市 ...
- php数组的定义和数组的赋值
1.php执行过程 加载页面 语法检测 执行脚本 $arr=array(1,2,3); 索引数组 $arr=array("name"=>"user1", ...
- ethereumjs/ethereumjs-vm-4-tests
根据代码发现还要了解的模块有: ethereumjs/merkle-patricia-tree -对应数据存储的数据结构 ethereumjs-blockchain —— 区块链 ethereumjs ...