虎年来啦，我用css+js实现的“灯笼”和随机祝福语！！！

“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

前言

虎年来啦，新的一年，新的气象。身为前端小小白，那当然得运用所学内容写写好看的css，但是css巅峰期已过，哈哈哈，浅显的css还是会的。接下来画一个灯笼

灯笼的实现

如图所示：该灯笼由两部分组成，中间的红色矩形部分和黄色的矩形部分组成，当然矩形都需要加上border-radius圆角边框属性。当然还有内外阴影用box-shadow属性实现，显得有些立体的感觉。当然最关键的还是定位的问题，给他们共同的父元素添加相对定位position: relative，子元素添加绝对定位position: absolute。

代码实现

 <!-- 灯笼1 -->
        <div class="lamps">
            <!-- 线 -->
            <div class="lamp_3">
            </div>

            <div class="lamp">
                <!-- 主体 金色矩形框-->
                <div class="lamp_1">
                </div>
                <!-- 红色椭圆 -->
                <div class="lamp_2">
                    <!-- 灯笼里的线 -->
                    <div class="border_1"></div>
                    <div class="border_2"></div>
                    <span>福</span>
                </div>
            </div>
        </div>
       
复制代码

还有灯笼里面的线也是用圆角边框来写的，这样一个灯笼就做好了，css样式后面展示。当然还可以添加灯笼左右摆的动画。

灯笼左右摆的动画用animation: move 5s 1s infinite;来实现

animation属性的用法，第一个参数为动画名，第二个参数为执行时间，第三个参数为动画速度，第四个参数为动画延时，第五个参数为执行次数（infinite为无限）第六个参数为执行方向，第七个参数为执行状态，第八个参数为动画停止的位置。

//move为动画名
@keyframes move {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(10deg);
            }
            50% {
                transform: rotate(0deg);
            }
            75% {
                transform: rotate(-10deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
复制代码

在js中写点击事件来随机祝福语（大家熟知的随机点名就是这样实现的）

随机祝福语可以用定时器（setInterval）来实现，将要生成的祝福语在数组中保存，渲染时，可以在定时器中改变数组下标的值，进而渲染不同的祝福语。

封装的定时器，num为数组的小标，让他在定时器中变化，这样每次渲染的值就会不一样

function set() {
            t = setInterval(function() {
                if (num >= arr.length - 1) {
                    num = 0;
                } else {
                    num++;
                }
                console.log(num);
                oCont.innerHTML = arr[num];
            }, 100)
        }
复制代码

在点击事件中，点击一次清除定时器，达到的效果可以停止祝福语的随机变化。这样我们就可以达到抽取的效果

然而有个重点就是再次触发点击事件的时候，调用定时器，让祝福语继续随机变化。

代码实现

 function set() {
            t = setInterval(function() {
                if (num >= arr.length - 1) {
                    num = 0;
                } else {
                    num++;
                }
                console.log(num);
                oCont.innerHTML = arr[num];
            }, 100)
        }

        oBtn.onclick = function() {
            flag = !flag;
            oBtn.style = "box-shadow: 0px 0px 10px black, 0px 0px 5px black inset"
            clearInterval(t);
           //再次点击时，调用定时器
            if (!flag) {
                oBtn.style = "box-shadow: 0px 0px 10px blackt";
                set();
            }
        }
复制代码

如图所示，可以随机祝福语。

扫描二维码关注公众号，回复： 13664251 查看本文章

源码如下所示：

css部分：

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
            background: url(./images/background.jpg) no-repeat;
            background-size: 100% 100%;
        }
        
        .lamps {
            position: absolute;
            left: 60px;
            /* transform: translateX(-50%); */
            top: 170px;
        }
        
        .lamps_1 {
            left: 440px;
        }
        
        .box {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 577px;
            width: 600px;
            background: url(./images/bk.png) no-repeat;
            background-size: 100% 100%;
        }
        
        .lamp {
            width: 100px;
            min-height: 100px;
            position: relative;
            /* border: 1px solid black; */
            margin-top: 30px;
            transform-origin: top;
            animation: move 5s 1s infinite;
        }
        
        .lamp .lamp_1 {
            height: 100px;
            width: 50px;
            background-color: rgb(253, 253, 36);
            border-radius: 10px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 2px 0px 5px rgb(68, 55, 55), 0px 0px 10px wheat inset;
        }
        
        .lamp .lamp_2 {
            width: 100px;
            height: 75px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50px;
            background-color: red;
            box-shadow: 0px 0px 50px red, 0px 0px 10px wheat inset;
            overflow: hidden;
        }
        
        .lamps .lamp_3 {
            height: 100px;
            width: 2px;
            background-color: black;
            opacity: .7;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
        }
        
        .lamp .border_1,
        .lamp .border_2 {
            height: 80px;
            width: 80px;
            position: absolute;
            top: -3px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid black;
            opacity: .5;
            border-radius: 50%;
        }
        
        .lamp .lamp_2 span {
            display: block;
            font-size: 40px;
            line-height: 75px;
            text-align: center;
        }
        
        .lamp .border_2 {
            width: 50px;
        }
        
        .content {
            width: 400px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px;
            box-shadow: 0px 0px 10px black, 0px 0px 5px black inset;
            background-color: salmon;
            font-size: 75px;
            line-height: 100px;
            text-align: center;
            margin: 50px auto;
        }
        
        button {
            height: 50px;
            width: 150px;
            font-size: 20px;
            border: 2px solid red;
            border-radius: 5px;
            background-color: salmon;
            cursor: pointer;
            opacity: .7;
            box-shadow: 0px 0px 10px black;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        @keyframes move {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(10deg);
            }
            50% {
                transform: rotate(0deg);
            }
            75% {
                transform: rotate(-10deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
    </style>
复制代码

 <div class="box">
        <!-- 灯笼1 -->
        <div class="lamps">
            <!-- 线 -->
            <div class="lamp_3">
            </div>

            <div class="lamp">
                <!-- 主体 金色矩形框-->
                <div class="lamp_1">
                </div>
                <!-- 红色椭圆 -->
                <div class="lamp_2">
                    <!-- 灯笼里的线 -->
                    <div class="border_1"></div>
                    <div class="border_2"></div>
                    <span>福</span>
                </div>
            </div>

        </div>
        <!-- 灯笼2 -->
        <div class="lamps lamps_1">
            <!-- 线 -->
            <div class="lamp_3">
            </div>

            <div class="lamp">
                <!-- 主体 金色矩形框-->
                <div class="lamp_1">
                </div>
                <!-- 红色椭圆 -->
                <div class="lamp_2">
                    <!-- 灯笼里的线 -->
                    <div class="border_1"></div>
                    <div class="border_2"></div>
                    <span>虎</span>
                </div>
            </div>

        </div>

        <!-- 祝福语框 -->
        <div class="content">

        </div>
        <button>点击抽取祝福语</button>
    </div>
    <script>
        let oBtn = document.querySelector('button');
        let oCont = document.querySelector('.content');

        let flag = false;
        let arr = ["虎虎生威", "虎年大吉", "万事如意", "心想事成", "生龙活虎", "福虎生旺", "虎气十足", "虎兆丰年", "金虎送喜"];
        oCont.innerHTML = arr[0];
        let num = 0;

        //定时器让祝福语随机
        set();

        function set() {
            t = setInterval(function() {
                if (num >= arr.length - 1) {
                    num = 0;
                } else {
                    num++;
                }
                console.log(num);
                oCont.innerHTML = arr[num];
            }, 100)
        }

        oBtn.onclick = function() {
            flag = !flag;
            oBtn.style = "box-shadow: 0px 0px 10px black, 0px 0px 5px black inset"
            clearInterval(t);
            if (!flag) {
                oBtn.style = "box-shadow: 0px 0px 10px blackt";
                set();
            }
        }
    </script>
复制代码