canva绘制满屏繁星 + 背景音乐 + css3炫酷3D照片集

● 满屏繁星用canvas绘制，有面向对象的思想
● css33D立方体采用纯css3知识点
● 点击图片这一块的一些交互用到了js的事件，鼠标经过点击图片一行的父级立方体停止旋转，鼠标离开立方体开始旋转
● 两侧文字呈一个一个字的展现用到了setInterval定时器
● 头部文字两侧滚动用到h5里面的marquee标签
● 背景音乐采用embed标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>满屏星星</title><style>*{padding:0;margin: 0;}html,body{width: 100%;height: 100%;overflow: hidden;}    img {width: 260px;height: 260px;}  .top {width: 600px;height: 50px;position: absolute;top: 50px;left: 50%;margin-left: -300px;font: 35px/50px '华文行楷';color: skyblue;} .wrapper {position: absolute;top: 170px;left: 50%;width: 400px;margin-left: -120px;/* 舞台 : 景深*/perspective: 1000px;}.wrapper .box{width:260px;height: 260px;position: relative;/* 3d效果 */transform-style: preserve-3d; transition: all 1s ;animation: play 10s infinite linear;cursor: pointer;}.wrapper .box:hover div.img1{transform: translateZ(200px); }.wrapper .box:hover div.img2{transform: translateZ(-200px) rotateY(180deg); }.wrapper .box:hover div.img3{transform: translateX(200px) rotateY(-90deg); }.wrapper .box:hover div.img4{transform: translateX(-200px) rotateY(90deg); }.wrapper .box:hover div.img5{transform: translateY(-200px) rotateX(90deg); }.wrapper .box:hover div.img6{transform: translateY(200px) rotateX(-90deg); }.wrapper .box.init{transform:  rotateX(-13deg) rotateY(40deg);}.wrapper .box.show1{transform: translateZ(-120px); }.wrapper .box.show2{transform: translateZ(-130px) rotateY(180deg); }.wrapper .box.show3{transform: translateZ(-130px) rotateY(-90deg); }.wrapper .box.show4{transform: translateZ(-130px) rotateY(90deg); }.wrapper .box.show5{transform: translateZ(-130px) rotateX(-90deg); }.wrapper .box.show6{transform: translateZ(-130px) rotateX(90deg); }@keyframes play {0%{transform: rotateX(0) rotateY(0) rotateZ(0);}100%{transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg) ;}}.wrapper .box>div{width: 260px;height: 260px;position: absolute;top:0;left: 0;}div.img1{transform: translateZ(130px); }div.img2{transform: translateZ(-130px) rotateY(180deg); }div.img3{transform: translateX(130px) rotateY(-90deg); }div.img4{transform: translateX(-130px) rotateY(90deg); }div.img5{transform: translateY(-130px) rotateX(90deg); }div.img6{transform: translateY(130px) rotateX(-90deg); }.btn-box{position: absolute;bottom: 10px;left: 25%;display: flex;justify-content: space-between;}.btn-box ul>li{position: relative;display: inline-block;width: 120px;height: 120px;margin-right: 4px;}.btn-box ul>li>input{width: 120px;height:  120px;border:2px solid #fff;outline: none;}.click{position: absolute;left: -135px;top:40px;color:burlywood;font-size: 22px;}.active{transform: scale(1.1);}.text1{width: 350px;height: 200px;position: absolute;top: 270px;left: 50px;line-height: 30px;color: skyblue;font-size: 22px;font-family: '华文行楷';}.text2  {width: 350px;height: 200px;position: absolute;top: 270px;right: 50px;line-height: 35px;color: skyblue;font-size: 22px;font-family: '华文行楷';}</style>
</head>
<body><canvas id="canvas" width="1500" height="800"></canvas><!-- <audio src="music.mp3"  preload="" loop></audio> --><embed src="music.mp3"  loop="true"><div class="top"><marquee behavior="alternate" direction="">时光不老，我们不散 ,爱你！</marquee></div><div class="wrapper"><div class="box init" id="_box"><div  class="img1"><img src="img/s1.jpg" alt=""></div><div  class="img2"><img src="img/s2.jpg" alt=""></div><div  class="img3"><img src="img/s3.jpg" alt=""></div><div  class="img4"><img src="img/s6.jpg" alt=""></div><div  class="img5"><img src="img/s5.jpg" alt=""></div><div  class="img6"><img src="img/3.jpg" alt=""></div></div></div><div class="btn-box"><span class="click" >点击图片 -></span><ul id="_ul"><li><input class="show1 " type="image" src="img/s1.jpg"></li><li><input class="show2" type="image" src="img/s2.jpg"></li><li><input class="show3" type="image" src="img/s3.jpg"></li><li><input class="show4" type="image" src="img/s6.jpg"></li><li><input class="show5" type="image" src="img/s5.jpg"></li><li><input class="show6" type="image" src="img/3.jpg"></li></ul></div><div class="text1"></div><div class="text2"></div>
</body>
</html>
<script>  var btns= document.getElementsByTagName('input');var box = document.getElementById('_box');var ul = document.getElementById('_ul');var classList = box.classList;var curClass = classList[1];// initvar  w ,h;var num = 300;function Star(){// 每颗星星的位置this.x = Math.floor( Math.random()*w);this.y = Math.floor( Math.random()*h);this.r = Math.random()*5+ 5;this.rot = Math.random()*360;this.xp = Math.random()*0.5 - 0.25;this.yp = Math.random()*0.5 -0.25;}Star.prototype.draw = function(ctx){ctx.beginPath();for(var i = 0;i< 5;i++){ctx.lineTo(Math.cos((18 + i*72)/180*Math.PI),-Math.sin((18 + i*72)/180*Math.PI));ctx.lineTo(Math.cos((54 + i*72)/180*Math.PI)*0.5,-Math.sin((54 + i*72)/180*Math.PI)*0.5);}ctx.closePath();}init();function init(){  var canvas = document.getElementById('canvas');var text1 = document.getElementsByClassName('text1')[0];var text2 = document.getElementsByClassName('text2')[0];w = canvas.width;h = canvas.height;var ctx = canvas.getContext('2d');         var bgStyle = ctx.createRadialGradient(w / 2,h ,0, w / 2,h,h);bgStyle.addColorStop(0,'#035');bgStyle.addColorStop(1,'black');ctx.fillStyle = bgStyle;ctx.fillRect(0,0,w,h);// 创建星星for(var  i = 0;i < num ;i++){var obj = new Star();starDraw(ctx,obj);       }// 显示文字var i = 0;var timer = null;var string1 = '高质量的单身比低质量的恋爱不知高级多少，一定到等到那个你想要的，并且合适的人。一切都会变得超好、爆好、无敌好！';     var string2 = '真正的朋友不是每天都联系，而是当你有困难会第一个站出来帮助你。 我一直都在！';timer = setInterval(function(){           text1.innerHTML += string1.charAt(i);text2.innerHTML += string2.charAt(i)i++;if( i>= string1.length){clearInterval(timer);}},100);ul.onmouseover = function(){box.style.animation = 'none';for(var  i = 0;i< btns.length;i++){btns[i].addEventListener('click',clickFn);}}ul.onmouseleave = function(){box.style.animation = 'play 10s infinite linear';for(var  i = 0;i< btns.length;i++){btns[i].classList.remove('active');}}}function clickFn(event){var event = event || window.event;        var targetClass = event.target.classList[0];console.log(targetClass);for(var  i = 0;i< btns.length;i++){btns[i].classList.remove('active');}event.target.classList.add('active');if(targetClass != curClass){classList.replace(curClass,targetClass);curClass = targetClass;}}// 画星星function starDraw(ctx,obj){ctx.save();ctx.translate(obj.x ,obj.y);//平移ctx.rotate(obj.rot/180*Math.PI);// 旋转ctx.scale(obj.r,obj.r);obj.draw(ctx);ctx.fillStyle = '#fff';ctx.fill();ctx.restore();}
</script>

canva绘制满屏繁星 + 背景音乐 + css3炫酷3D照片集相关推荐

js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构折叠面板的html结 ...
用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构该CS ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
jQuery+CSS3炫酷机械键盘js特效
下载地址 jQuery+CSS3炫酷机械键盘特效,点击键盘按键会出现凹进去的效果,css模拟真实的键盘特效. dd:
html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...

canva绘制满屏繁星 + 背景音乐 + css3炫酷3D照片集

canva绘制满屏繁星 + 背景音乐 + css3炫酷3D照片集相关推荐

最新文章

热门文章