• 技术文章 >web前端 >html教程

    html+css+js实现星空旋转和文字淡入效果(附代码)

    奋力向前奋力向前2021-07-13 19:04:48转载230
    本篇文章给大家通过代码示例介绍一下使用html+css+js如何实现一个星空旋转和文字逐渐出现的效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。

    废话不多说直接上代码,效果是一个星空旋转和文字逐渐出现的效果,文字是逐渐出现的,星空中的小球是旋转的

    <!DOCTYPE html><html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>星空特效</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                overflow: hidden;
                background-color: #000;
            }
            h1{
                position: absolute;
                line-height: 50px;
                letter-spacing: 5px;
                color: #fff;
                width: 300px;
                top: 40%;
                left: 50%;
                margin-left: -200px;
                font-size: 30px;
            }
        </style></head><body>
        <h1>
          
        </h1>
        <canvas></canvas>
        <script>
            var canvas=document.querySelector("canvas");
                ctx=canvas.getContext("2d");
                w=canvas.width=window.innerWidth;
                h=canvas.height=window.innerHeight;
                var canvas2=document.createElement("canvas");
                    ctx2=canvas2.getContext("2d");
                    canvas2.width=100;
                    canvas2.height=100;
                var a=canvas2.width/2;
            var grandient=ctx.createRadialGradient(a,a,0,a,a,a);
                grandient.addColorStop(0.025,'#fff');
                grandient.addColorStop(0.1, 'hsl(220,59%,18%)');
                grandient.addColorStop(0.025, 'hsl(220,60%,33%)');
                grandient.addColorStop(1,"transparent");
                ctx2.fillStyle=grandient;
                ctx2.beginPath();
                ctx2.arc(a,a,a,0,Math.PI*2);
                ctx2.fill();
                ctx2.closePath();
                var stars=[];
                var count=0;
                function Star(){
                    this.pos=Math.floor(Math.random()* w/2-100);
                    this.r=Math.floor(Math.random()*100);
                    this.dx=w/2;
                    this.dy=h/2;
                    this.rand=Math.floor(Math.random()*360);
                    this.speed=this.pos/100000;
                    stars[count]=this;
                    count ++;
                }
                Star.prototype.draw=function(){
                    var x=Math.sin(this.rand+1)* this.pos+this.dx;
                        y=Math.cos(this.rand)*this.pos/2+this.dy;
                    ctx.drawImage(canvas2,x-this.r/2,y-this.r/2,this.r,this.r);
                    this.rand=this.rand+this.speed;
                }
                for(var i=0;i<1000;i++){
                    new Star();
                }
                function anmit(){
                    ctx.clearRect(0,0,w,h);
                    for(var i=0;i<stars.length;i++){
                        stars[i].draw();
                    }
                    requestAnimationFrame(anmit);
                }
                anmit();
                var oH=document.getElementsByTagName("h1")[0];
                var arr=["这世间过于俗气","不像你一般","浩瀚星辰,温柔婉转"],
                    index=0,
                    arrLen=arr.length,
                    strLen=arr[0].length;
                    pos=0,
                    row=0,
                    str="",
                    timer=null;
                function print() {
                    while(row<index){
                        str=str+arr[row]+"<br>";
                        row++;
                    }
                    oH.innerHTML=str+arr[index].substring(0,pos);
                    if(pos==strLen){
                        index++;
                        pos =0;
                        if(index<arr.length){
                            strLen=arr[index].length;
                            timer=setTimeout(print,250);
                        }
                    }else{
                        pos++;
                        timer=setTimeout(print,250);
                    }
                }
                setTimeout(print,250);
        </script></body></html>

    效果图:

    效果视频博主已发往b站:https://www.bilibili.com/video/BV13K4y1e77Y?from=search&seid=9564283641943003056

    推荐学习:Html视频教程

    以上就是html+css+js实现星空旋转和文字淡入效果(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:html css
    上一篇:什么是HTML元素?浅谈元素的语法规则 下一篇:html怎么引用css文件
    VIP会员

    相关文章推荐

    • html怎么创建表格• 如何给html设置背景• html中如何添加一个表头• html页面里中文乱码怎么解决• html文本区域大小怎么设置• 什么是HTML元素?浅谈元素的语法规则• php怎么修改html文件内容• php 不解析html标签怎么办• HTML5 canvas如何绘制酷炫能量线条效果(附代码)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网