仿真灯泡 电灯泡 灯光 光环闪烁 流星雨

1.代码

html

    <div class="idea">
        <div class="lights">
            <div class="circle">
                <h1>idea</h1>
            </div>
            <div class="bar"></div>
        </div>
        <div class="text">
            <h1>saynotodrugs</h1>
        </div>
        <div class="panel">
            <div class="on-off"></div>
        </div>
    </div>

 

ccss

*,
        *:after,
        *:before,
        html {
            box-sizing: border-box
        }

        body,
        h1 {
            margin: 0;
            padding: 0;
            font-style: normal;
            font-family: 'Sacramento', cursive
        }

        body {
            background: #000
        }

        .idea,
        .circle h1,
        .text h1,
        .panel:before,
        .panel:after,
        .on-off {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }

        .idea,
        .lights:before,
        .lights:after,
        .circle,
        .circle:before,
        .circle:after,
        .circle h1,
        .circle h1:before,
        .circle h1:after,
        .bar,
        .bar:before,
        .bar:after,
        .text:before,
        .text h1,
        .panel:before,
        .panel:after,
        .on-off,
        .on-off:before,
        .me span {
            display: block;
            position: absolute
        }

        .lights,
        .text,
        .panel {
            height: 100%;
            display: block;
            position: relative;
            float: left
        }

        .lights:before,
        .lights:after,
        .circle:before,
        .circle:after,
        .circle h1:before,
        .circle h1:after,
        .bar:before,
        .bar:after,
        .text:before,
        .panel:before,
        .panel:after,
        .on-off:before {
            content: ""
        }

        .circle,
        .bar,
        .bar:before,
        .bar:after,
        .on-off:before {
            left: 50%;
            transform: translate(-50%, 0)
        }

        .circle,
        .circle:after,
        .panel:before,
        .panel:after,
        .on-off,
        .me {
            border-radius: 50%
        }

        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Root */


        /*                                                    ! Idea Start Here ...
=======================================================================================================================*/
        .idea {
            width: 647px;
            height: 500px
        }

        .lights {
            width: 247px;
            transform: rotate(-15deg)
        }


        .lights:before {
            width: 100px;
            height: 100px;
            bottom: 20px;
            left: 122px;
            border: 3px solid #fff;
            border-top: none;
            border-radius: 0 0 50% 50%
        }

        .lights:after {
            width: 58px;
            height: 100px;
            bottom: 100px;
            left: 219px;
            border-radius: 50% 0 0 0;
            border: 3px solid #fff;
            border-bottom: none;
            border-right: none
        }

        .circle {
            width: 200px;
            height: 200px;
            top: 50px;
            animation: lights 5s linear infinite alternate
        }

        @keyframes lights {

            0%,
            100% {
                background: radial-gradient(circle, #e6e6e6, #e6e6e6, #e6e6e6, #ccc);
                box-shadow: none
            }

            10%,
            20%,
            30%,
            40%,
            50%,
            60%,
            70%,
            80%,
            90% {
                background: radial-gradient(circle, #fff, #fff, #e6e6e6, #ccc);
                box-shadow: 0 -10px 30px -2px #fff, -10px 0 30px -2px #fff, 10px 0 30px -2px #fff
            }
        }

        .circle:before {
            background: #e7e7e7;
            width: 100px;
            height: 40px;
            bottom: -30px;
            left: 50px;
            box-shadow: inset 0 -4px 2px -2px #e5e5e5, inset 4px 0 2px -2px #e5e5e5, inset -4px 0 2px -2px #e5e5e5
        }

        .circle:after {
            background: #e7e7e7;
            width: 120px;
            height: 20px;
            bottom: 0;
            left: 40px;
            box-shadow: inset 4px 0 2px -2px #e5e5e5, inset -4px 0 2px -2px #e5e5e5
        }

        .circle h1 {
            color: #cc2e24;
            font-size: 44px;
            font-weight: 700;
            z-index: 1
        }

        .circle h1:before,
        .circle h1:after {
            background: #cc2e24;
            width: 3px;
            height: 124px;
            top: 38px
        }

        .circle h1:before {
            left: 11px;
            transform: rotate(-10deg)
        }

        .circle h1:after {
            right: 11px;
            transform: rotate(10deg)
        }

        .bar,
        .bar:before {
            width: 100px;
            height: 20px
        }

        .bar,
        .bar:before,
        .bar:after {
            background: #008080;
            box-shadow: inset 8px 0 6px -6px #006D6D, inset -8px 0 6px -6px #006D6D
        }

        .bar {
            top: 290px
        }

        .bar:before {
            top: 30px
        }

        .bar:after {
            width: 100px;
            height: 40px;
            top: 60px;
            border-radius: 0 0 50% 50%
        }

        .text {
            width: 300px
        }

        .text:before {
            background: #fff;
            width: 40px;
            height: 3px;
            top: 50.5%;
            right: -5px;
            z-index: -1;
            transform: translate(0, -50.5%)
        }

        .text h1 {
            color: #fff;
            font-size: 60px;
            font-weight: 400
        }

        .panel {
            width: 100px
        }

        .panel:before {
            background: #e6e6e6;
            width: 90px;
            height: 90px;
            box-shadow: inset 0 0 10px 2px #595959
        }

        .panel:after {
            width: 70px;
            height: 70px;
            animation: panel-after 5s linear infinite alternate
        }

        @keyframes panel-after {

            0%,
            100% {
                border: 2px solid #808080
            }

            10%,
            20%,
            30%,
            40%,
            50%,
            60%,
            70%,
            80%,
            90% {
                border: 2px solid #00d400;
                box-shadow: 0 0 10px 2px #00ff00, inset 0 0 10px 2px #00ff00
            }
        }

        .on-off {
            width: 40px;
            height: 40px;
            animation: on-off 5s linear infinite alternate
        }

        @keyframes on-off {

            0%,
            100% {
                border: 2px solid #808080;
                border-top-color: #e6e6e6
            }

            10%,
            20%,
            30%,
            40%,
            50%,
            60%,
            70%,
            80%,
            90% {
                border: 2px solid #00d400;
                border-top-color: #e6e6e6
            }
        }

        .on-off:before {
            width: 2px;
            height: 20px;
            top: -5px;
            animation: on-off-before 5s linear infinite alternate
        }

        @keyframes on-off-before {

            0%,
            100% {
                background: #808080
            }

            10%,
            20%,
            30%,
            40%,
            50%,
            60%,
            70%,
            80%,
            90% {
                background: #00d400
            }
        }

        .me {
            background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1735448/profile/profile-80.jpg?1528976396")no-repeat center / contain;
            width: 40px;
            height: 40px;
            bottom: 16px;
            right: 16px;
            display: block;
            position: fixed;
            animation: me 2s linear infinite alternate
        }

        @keyframes me {
            from {
                transform: translateY(-4px)
            }

            to {
                transform: translateY(4px)
            }
        }

        .me:hover span {
            right: 50px;
            opacity: 1;
            visibility: visible
        }

        .me span {
            width: 150px;
            top: 10px;
            right: 0;
            color: #008080;
            font-size: 16px;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
            font-weight: 400;
            text-align: center;
            z-index: -1;
            opacity: 0;
            visibility: hidden;
            transition: all .5s ease
        }

 

2.参考链接

 3. 扩展

光环闪烁

流星雨