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 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- 解析Java对象的equals()和hashCode()的使用
解析Java对象的equals()和hashCode()的使用 前言 在Java语言中,equals()和hashCode()两个函数的使用是紧密配合的,你要是自己设计其中一个,就要设计另外一个.在多 ...
- 关于options请求的一点理解
最近最项目改造,对所有的ajax请求统一做了一点处理,发现原来很正经的ajax请求突然不正常了,每个ajax之前都多了一个相应的method为options的请求.虽然之前知道ajax的请求中meth ...
- github air项目中遇到的几个问题及解决（nodejs居多）
https://github.com/cambecc/air 1.按照github中给出的步骤,执行到npm install,项目中的package.json包含了要安装的包的版本,但是安装的时候,p ...
- sed.md
SED sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用s ...
- 【[HNOI2012]矿场搭建】
抄题解真开心 我真是越来越菜了 这是点双的板子题,于是求出所有点双,之后讨论 如果点双里之有一个割点,那么如果这个割点炸了,这个点双就出不去了,于是我们得在这个点双内部除了这个割点位置放一个 如果有两 ...
- Mysql 用户权限管理--从 xxx command denied to user xxx
今天遇到一个mysql 权限的问题,即标题所述 xxx command denied to user xxx,一般mysql 这种报错,基本都属于当前用户没有进行该操作的权限,需要 root 用户授 ...
- java把行政区划放到一个节点树形中
作者原创:转载请注明出处.https://www.cnblogs.com/yunqing/p/9486923.html 先放数据,t_city表 //津京冀地区行政区划数据 SET FOREIGN_K ...
- Linux文件目录命令
Linux文件目录命令 pwd,查看当前工作目录的完整路径 pwd:/root ls,用来打印当前目录的清单,可以指定其他目录 -a:列出目录下所有的文件,包括以"."开头的隐藏文 ...
- Unity3D-射线效果
基于airplane_02 下面新建 Line Renderer 将上面的几个地方设置下 添加Script脚本: 脚本代码为: using System.Collections; using Syst ...
- 【luogu P2827 蚯蚓】 题解
题目链接:https://www.luogu.org/problemnew/show/P2827 35分:暴力sortO(mnlogn). 80分:考虑到每次不好维护不被切的点+q,正难则反.改成维护 ...