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

最新推荐文章于 2022-01-24 17:04:14 发布

crazy的蓝色梦想

最新推荐文章于 2022-01-24 17:04:14 发布

阅读量1.9k

点赞数 7

分类专栏： HTML5基础 CSS3案例文章标签： canvas绘制满屏繁星 css3炫酷照片集 html5背景音乐

本文链接：https://blog.csdn.net/qq_41257129/article/details/89428548

版权

HTML5基础同时被 2 个专栏收录

25 篇文章 3 订阅

订阅专栏

CSS3案例

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

● 满屏繁星用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];// init
    var  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>