找回密码
当前位置：前端开发者 > CSS > 正文

前端开发纯CSS制作晚上开灯效果

2019-02-21 20:40:00 分类：CSS 阅读(167) 评论(0)
前端开发需要学java吗
我java开发还要写前端
java开发分前端和后端吗

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <style>
            /* css Document */
            /*公共样式*/
            body,
            button,
            select,
            textarea,
            input,
            label,
            option,
            fieldset,
            legend {
                font-family: 微软雅黑e\8f6f\96c5\9ed1, Tahoma, Verdana;
                font-size: 12px;
                line-height: 18px;
                color: #444;
            }
            body,
            div,
            dl,
            dt,
            dd,
            ul,
            ol,
            li,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            pre,
            form,
            fieldset,
            legend,
            input,
            textarea,
            button,
            p,
            blockquote,
            th,
            td {
                margin: 0;
                padding: 0;
            }
            textarea {
                resize: none;
            }
            .clear {
                height: 1px;
                overflow: hidden;
                clear: both;
            }
            a,
            img {
                border: 0;
            }
            a {
                color: #666;
                text-decoration: none;
            }
            li {
                list-style-type: none;
            }
            .fl {
                float: left;
            }
            .fr {
                float: right;
            }
            .nf {
                clear: both;
            }
            .red {
                color: red;
                font-weight: bold;
            }
            .green {
                color: #00b500;
                font-weight: bold;
            }
            .ds {
                display: block;
            }
            .hid {
                overflow: hidden;
            }
            .clearfix {
                *zoom: 1;
            }
            .clearfix:after {
                display: block;
                visibility: hidden;
                clear: both;
                height: 0;
                content: ‘.’;
                font-size: 0;
            }
            .jianbian {
                background: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0%, #f4f4f4),
                    color-stop(100%, #eee)
                );
                background: -webkit-linear-gradient(top, #f4f4f4 0, #eee 100%);
                background: linear-gradient(to bottom, #f4f4f4 0, #eee 100%);
            }
            .bottomshadow {
                border-bottom: solid 1px #b3b3b3;
                -webkit-box-shadow: 0 1px 1px 0 #dfdfdf;
                box-shadow: 0 1px 1px 0 #dfdfdf;
            }
            /*具体样式*/
            body {
                background: #113965;
            }
            .container {
                width: 100%;
                height: 100%;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0);
            }
            .container .lempLine {
                border-left: 2px solid #000;
                height: 300px;
                width: 0px;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0);
                z-index: 5;
            }
            .container .lempGroup {
                width: 120px;
                height: 120px;
                position: relative;
                left: 50%;
                transform: translate(-50%, -1px);
                z-index: 5;
            }
            .container .lempGroup .Lampshade {
                width: 0px;
                height: 0px;
                border-width: 0px 60px 60px 60px;
                border-color: #000000 transparent;
                border-style: solid;
                position: relative;
                z-index: 5;
            }
            .container .lempGroup .LampBulb {
                width: 50px;
                height: 50px;
                border-radius: 40px;
                position: relative;
                z-index: 4;
                left: 50%;
                top: -28px;
                transform: translate(-50%, 0);
            }
            .closeLight {
                background: #e7e7e7;
                border: 1px solid #e7e7e7;
            }
            .openLight {
                background: #eade3b;
                border: 1px solid #eade3b;
                box-shadow: 0 0 26px #eade3b;
            }
            .openBtn {
                width: 50px;
                height: 80px;
                background: #ffffff;
                border: 1px solid #fff;
                border-radius: 4px;
                position: relative;
                top: -45px;
                left: -120px;
                float: right;
                z-index: 1;
                box-shadow: 0px 0px 10px 0px #ffffff;
            }
            .openBtn > div {
                width: 40px;
                height: 70px;
                position: relative;
                left: 5px;
                top: 5px;
            }
            .openBtn > div > ul > li {
                width: 100%;
                height: 33px;
                text-align: center;
            }
            .openBtn > div > ul > li > span {
                position: relative;
                top: 10px;
                color: #000000;
                font-size: 14px;
                font-weight: 900;
                cursor: pointer;
            }
            .notic {
                width: 600px;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0);
                z-index: -1;
                top: -205px;
            }
            .notic > img {
                width: 100%;
            }
            .notic > p {
                font-size: 16px;
                color: #c9bc21;
            }
            .notic > p > span {
                font-size: 20px;
                color: #c9bc21;
            }
            .noticBar {
                width: 500px;
                height: 500px;
                display: none;
                border-radius: 250px;
                background: #f2e876;
                opacity: 0.4;
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                top: 150px;
                box-shadow: 0px 0px 210px 0px #f2e876;
            }
        </style>
    </head>
    <body>
        <div class=”container”>
            <div class=”lempLine”></div>
            <div class=”lempGroup”>
                <div class=”Lampshade”></div>
                <div id=”line” class=”LampBulb closeLight”></div>
            </div>
            <div class=”openBtn”>
                <div>
                    <ul>
                        <li>
                            <span id=”openBt”>ON</span>
                        </li>
                        <li>
                            <span id=”closeBt”>OFF</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class=”noticBar”></div>
            <div class=”notic”></div>
        </div>
        <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.js”></script>
        <script type=”text/javascript”>
            $(‘#openBt’).on(‘click’, function() {
                $(this).css({ color: ‘#f00’ })
                $(‘#closeBt’).css({ color: ‘#000’ })
                $(‘#line’).removeClass(‘closeLight’)
                $(‘#line’).addClass(‘openLight’)
                $(‘.noticBar’).show()
            })
            $(‘#closeBt’).on(‘click’, function() {
                $(this).css({ color: ‘#f00’ })
                $(‘#openBt’).css({ color: ‘#000’ })
                $(‘#line’).removeClass(‘openLight’)
                $(‘#line’).addClass(‘closeLight’)
                $(‘.noticBar’).hide()
            })
        </script>
    </body>
</html>
java开发学后端还是前端好
java开发好还是前端好
秦皇岛前端开发javaee教程
» 本文来自：前端开发者 » 《前端开发纯CSS制作晚上开灯效果》
» 本文链接地址：https://www.rokub.com/8184.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论