CSS+JS实现土味中秋特效

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

Hello!掘金的小伙伴们大家好，我是 妖孽哪里逃 ,昨天写了一篇 用CSS制作中秋之夜星星闪烁动效 的技术文章反响不容乐观,我还是有点小失落的;希望大家能多多支持;谢谢!今天我们来实现一个元素颜色变换的动效.

正文开始~

背景星星闪烁

这个此处省略,代码请参考我昨天写的 用CSS制作中秋之夜星星闪烁动效 ;

画又大又皎洁的月亮

HTML代码
    <div>
        <div class="moon">
        </div>
    </div>
 
CSS代码
   .moon {
            margin: 0 auto;
            position: absolute;
            top: 50%;
            transform: translateY(-300px);
            box-sizing: border-box;
            left: 0;
            right: 0;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: white;
            opacity: 0.9;
            box-shadow: 0px 0px 40px 15px white;
            z-index: 1;
            text-align: center;
        }

这里我们来了解一下盒子box-shadow的相关知识;

元素添加阴影
box-shadow: *h-shadow v-shadow blur spread color* inset;
*注意：* boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

月亮加入关于中秋的诗句的动效

这是一个字体颜色可以随机变换的动画

HTML代码
 <div class="moon">
            <p>唐代：齐已的《中秋月》</p>
            <p>空碧无云露湿衣，众星光外涌清规。</p>
            <p>东林莫碍渐高势，四海正看当路时。</p>
            <p>还许分明吟皓魄，肯教幽暗取丹枝。</p>
            <p>可怜关夜婵娟影，正对五候残酒卮。</p>
 </div>
 
CSS代码

上面有月亮的css
 p {
     color: chartreuse;
     font-size: 24px;
     font-weight: bold;
   }
 p:first-child {
    margin-top: 30%;
   }
   
JS代码块
 function changeEvent() {
        let list = document.getElementsByTagName('p')
        for (i = 0; i < list.length; i++) {
            list[i].style.color = "#" + (~~(Math.random() * (1 << 24))).toString(16)
        }
    }
    changeEvent()
    setInterval(() => {
    changeEvent()
    }, 1500)
    
    我代码一贴,有没有觉得这逻辑动效也太简单
    我心态崩了呀!

其实就是靠改变元素style属性加上js数学公式Math.room 然后再转成16进制;最后设置一个定时器就好了

添加中秋快乐字样的动效

看到这个动效你们是不是觉得好丑,没关系重要的是要展现颜色随机变换的效果

HTML代码
        <div class="textLeft text">
           中秋
        </div>
        <div class="moon">
            <p>唐代：齐已的《中秋月》</p>
            <p>空碧无云露湿衣，众星光外涌清规。</p>
            <p>东林莫碍渐高势，四海正看当路时。</p>
            <p>还许分明吟皓魄，肯教幽暗取丹枝。</p>
            <p>可怜关夜婵娟影，正对五候残酒卮。</p>
        </div>
        <div class="textRight text">
            快乐
        </div>
        
 CSS代码
    .textLeft,
    .textRight {
            width: 150px;
            height: 400px;
            line-height: 200px;
            border: 8px solid #fff;
            text-align: center;
            color: #fff;
            font-size: 80px;
            font-weight: bold;
            position: absolute;
            top: 50%;
            transform: translateY(-200px);
        }

        .textLeft {
            left: 15%;
        }

        .textRight {
            right: 15%;
        }
        
 JS代码
 
 在上一步的changeEvent方法中加入以下代码就好
 let textList = document.getElementsByClassName('text')
        for (i = 0; i < textList.length; i++) {
            textList[i].style.color = "#" + (~~(Math.random() * (1 << 24))).toString(16)
            textList[i].style.border = "8px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
        }

这里比上一步只是多了个边框颜色随机变换的动效

结语

到了这里,其实像这种颜色随机变换的动效可以设计的非常炫酷;你们也可以自由发挥试一下哦!