流星效果

来源：互联网发布：惠州狼雨seo 编辑：程序博客网时间：2024/04/29 23:49
流星划过的效果
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        html,body {            width: 100%;            height: 100%;            margin: 0;            background:#444444;        }        .space {            width: 235px;            height: 280px;            margin:150px;            background: #121212;            float:left;            overflow: hidden;        }        .space:hover .star {            display: block;            width: 0px;            height: 0px;            border-radius: 50%;            background: #fff;            top: -50px;            left:200px;            position: relative;            transform-origin: 100% 0;            animation: star-ani 6s infinite ease-out;            box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);            opacity: 0;            z-index: 2;        }        .space:hover .star:after {            content: '';            display: block;            top: -10px;            left: 200px;            border: 0px solid #fff;            border-width: 0px 90px 3px 90px;            border-color: transparent transparent transparent #fff;            transform: rotate(-45deg) translate3d(1px, 3px, 0);            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);            transform-origin: 0% 100%;            animation: shooting-ani 1s infinite ease-out;        }        .space:hover .star1 {            top: -10px;            left: 300px;            background: #fff;            animation-delay: 0.5s;            -webkit-animation-delay:0.5s;            -moz-animation-delay: 0.5s;        }        .space:hover .star1:after {            border-color: transparent transparent transparent #fff;            animation-delay: 0.5s;            -webkit-animation-delay:0.5s;            -moz-animation-delay: 0.5s;        }        .space:hover .star2 {            top: 100px;            left: 200px;            background: #fff;            animation-delay: 0s;            -webkit-animation-delay:0s;            -moz-animation-delay: 0s;        }        .space:hover .star2:after {            border-color: transparent transparent transparent #fff;            animation-delay: 0;            -webkit-animation-delay:0s;            -moz-animation-delay: 0s;        }        .space:hover .star3 {            top: -10px;            left: 100px;            background: #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay: 1.5s;        }        .space:hover .star3:after {            border-color: transparent transparent transparent #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay:1.5s;        }        .space:hover .star4 {            top: 100px;            left: 250px;            background: #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay: 1.5s;        }        .space:hover .star4:after {            border-color: transparent transparent transparent #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay:1.5s;        }        .space:hover .star5 {            top: 200px;            left: 250px;            background: #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay: 1.5s;        }        .space:hover .star5:after {            border-color: transparent transparent transparent #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay: 1.5s;        }        .space:hover .star6 {            top: -10px;            left: 100px;            background: #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay: 1.5s;        }        .space:hover .star6:after {            border-color: transparent transparent transparent #fff;            animation-delay: 1.5s;            -webkit-animation-delay: 1.5s;            -moz-animation-delay: 1.5s;        }        .space:hover .star7 {            top: 100px;            left: 200px;            background: #fff;            animation-delay: 3s;            -webkit-animation-delay:3s;            -moz-animation-delay: 3s;        }        .space:hover .star7:after {            border-color: transparent transparent transparent #fff;            animation-delay: 3s;            -webkit-animation-delay:3s;            -moz-animation-delay: 3s;        }        .space:hover .star13 {            top: -10px;            left: 210px;            background: #fff;            animation-delay: 3s;            -webkit-animation-delay:3s;            -moz-animation-delay: 3s;        }        .space:hover .star13:after {            border-color: transparent transparent transparent #fff;            animation-delay: 3s;            -webkit-animation-delay:3s;            -moz-animation-delay: 3s;        }        .space:hover .star14 {            top: -100px;            left: 150px;            background: #fff;            animation-delay: 2s;            -webkit-animation-delay:2s;            -moz-animation-delay: 2s;        }        .space:hover .star14:after {            border-color: transparent transparent transparent #fff;            animation-delay: 2s;            -webkit-animation-delay:2s;            -moz-animation-delay: 2s;        }        .space:hover .star15 {            top: 200px;            left: 250px;            background: #fff;            animation-delay: 2.5s;            -webkit-animation-delay:2.5s;            -moz-animation-delay: 2.5s;        }        .space:hover .star15:after {            border-color: transparent transparent transparent #fff;            animation-delay: 2.5s;            -webkit-animation-delay:2.5s;            -moz-animation-delay: 2.5s;        }        .space:hover .star8 {            top: -10px;            left: 100px;            background: #fff;            animation-delay: 3s;            -webkit-animation-delay: 3s;            -moz-animation-delay: 3s;        }        .space:hover .star8:after {            border-color: transparent transparent transparent #fff;            animation-delay: 3s;            -webkit-animation-delay: 3s;            -moz-animation-delay:3s;        }        .space:hover .star9 {            top: 100px;            left: 250px;            background: #fff;            animation-delay: 4s;            -webkit-animation-delay: 4s;            -moz-animation-delay: 4s;        }        .space:hover .star9:after {            border-color: transparent transparent transparent #fff;            animation-delay: 4s;            -webkit-animation-delay: 4s;            -moz-animation-delay:4s;        }        .space:hover .star10 {            top: 200px;            left: 250px;            background: #fff;            animation-delay: 5s;            -webkit-animation-delay: 5s;            -moz-animation-delay: 5s;        }        .space:hover .star10:after {            border-color: transparent transparent transparent #fff;            animation-delay: 5s;            -webkit-animation-delay: 5s;            -moz-animation-delay: 5s;        }        .space:hover .star11 {            top: -10px;            left: 100px;            background: #fff;            animation-delay: 5s;            -webkit-animation-delay: 5s;            -moz-animation-delay: 5s;        }        .space:hover .star11:after {            border-color: transparent transparent transparent #fff;            animation-delay: 5s;            -webkit-animation-delay: 5s;            -moz-animation-delay: 5s;        }        .space:hover .star12 {            top: -10px;            left: 100px;            background: #fff;            animation-delay: 6s;            -webkit-animation-delay: 6s;            -moz-animation-delay: 6s;        }        .space:hover .star12:after {            border-color: transparent transparent transparent #fff;            animation-delay: 6s;            -webkit-animation-delay: 6s;            -moz-animation-delay: 6s;        }        @keyframes star-ani {            0% {                opacity: 0;                transform: scale(0) rotate(0) translate3d(0, 0, 0);                -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);                -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);            }            50% {                opacity: 1;                transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);                -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);                -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);            }            100% {                opacity: 0;                transform: scale(1) rotate(0) translate3d(-400px, 300px, 0);                -webkit-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);                -moz-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);            }        }    </style></head><body>    <div class="space">        <div class="star"></div>        <div class="star star1"></div>        <div class="star star2"></div>        <div class="star star3"></div>        <div class="star star4"></div>        <div class="star star5"></div>        <div class="star star6"></div>        <div class="star star7"></div>        <div class="star star8"></div>        <div class="star star9"></div>        <div class="star star10"></div>        <div class="star star11"></div>        <div class="star star12"></div>        <div class="star star13"></div>        <div class="star star14"></div>        <div class="star star15"></div>    </div></body></html>
阅读全文
0 0