霓虹灯绘画板效果 html+css+js

最新推荐文章于 2022-12-14 22:08:46 发布

原创

最新推荐文章于 2022-12-14 22:08:46 发布 · 5.4k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #html #css3

效果：

在这里插入图片描述

实现：

1. 定义标签，.main是底层盒子，.txt是文字，.dot是图中的小圆圈，用js动态大量添加。

 <div class="main">
        <h1 class="txt">北极光之夜</h1>
        <div class="dot" style="--color: red;"></div>      
    </div>

style="- -color: red;" 这个是var函数的应用，点击链接文章的开头讲有。
2. 底层盒子的基本样式：

.main{
   
   
          position: fixed;
          top: 0;
          left: 0;
          width: 100%; 
          height: 100%;
          background-color: rgb(0, 0, 0);
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          align-content: space-around;
          cursor: pointer;
        }

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; 相对于浏览器窗口进行定位，然后跟窗口一样大。
display: flex; flex布局；
justify-content: space-around; 主轴子元素平分剩余空间排列。
flex-wrap: wrap; 定义多行。
align-content: space-around; 侧轴子元素平分剩余空间排列。
cursor: pointer; 鼠标样式为小手。

3. 小圆圈的基本样式：

 .dot{
   
   
            position: relative;
            width: 20px;
            height: 20px;
           
        }

position: relative; 相对定位。

4. 用双伪类显示小圆圈：

 .dot::before{
   
   
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            bottom: 1px;
            right: 1px;
            background-color: rgba(65, 64, 64,.5);       
            border-radius: 50%;
            transition: all 120s ease-out;            
        }