box-shadow实现光剑

2018-02-11 14:06:41来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

box-shadow实现光剑

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta content="width=device-width, initial-scale=1">    <title></title>    <style>        /* defaults */        html {            -moz-box-sizing: border-box;            box-sizing: border-box;            font-size: 16px;        }        *,        *:before,        *:after {            -moz-box-sizing: inherit;            box-sizing: inherit;        }        body,        html {            height: 100%;            background-color: black;            color: white;        }        a {            color: inherit;        }        /* cf */        .cf:before,        .cf:after {            content: " ";            display: table;        }        .cf:after {            clear: both;        }        .cf {            *zoom: 1;        }        /* lightsaber */        .lightsaber-cont {            height: 100%;            text-align: center;        }        .lightsaber-cont:before {            display: inline-block;            height: 100%;            margin-right: -0.25em;            vertical-align: middle;            content: "";        }        .lightsaber {            display: inline-block;            width: 85%;            height: 20px;            vertical-align: middle;        }        /* blade */        @keyframes blade-glow {            0% {                box-shadow: 20px 0 50px 6px;            }            50% {                box-shadow: 20px 0 50px 12px;            }            100% {                box-shadow: 20px 0 50px 6px;            }        }        .blade {            float: right;            position: relative;            z-index: 1;            width: 75%;            height: 14px;            border: 1px solid red;            border-left: none;            margin-top: 3px;            border-radius: 0 47% 47% 0;            background-color: white;            color: red;            animation: blade-glow 4s infinite;        }        /* hilt */        .hilt {            float: left;            position: relative;            z-index: 2;            width: 25%;            height: 100%;            border: 1px solid #333;            border-radius: 35% 20% 20% 35%;            background-color: #999;        }    </style></head><body><div >    <div >        <div ></div>        <div ></div>    </div></div></body></html>

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台