CSS 流星雨
流星雨
效果
代码
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>starstitle><style>@-webkit-keyframes star-opacity {0% {opacity: 0}40% {opacity: 1}60% {opacity: 1}100% {opacity: 0}}@keyframes star-opacity {0% {opacity: 0}40% {opacity: 1}60% {opacity: 1}100% {opacity: 0}}@-webkit-keyframes star-pos {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)}100% {transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);-webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);-moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)}}@keyframes star-pos {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)}100% {transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);-webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);-moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)}}body {padding: 0;margin: 0;}.index-bg {width: 100vw;height: 100vh;background: black;}.index-bg .stars {height: 0}.index-bg .star {display: block;width: 15px;height: 15px;border-radius: 50%;background: #fff;top: 100px;left: 400px;position: relative;-webkit-transform-origin: 100% 0;transform-origin: 100% 0;-webkit-animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;-webkit-box-shadow: 0 0 15px 5px rgba(255, 255, 255, .3);box-shadow: 0 0 15px 15px rgba(255, 255, 255, .3);opacity: 0;z-index: 2}.index-bg .star:after {content: '';display: block;top: 560;left: 662px;border: 0 solid #fff;border-width: 0 230px 9px;border-color: transparent transparent transparent rgba(243, 230, 230, 0.5);-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);transform: rotate(-45deg) translate3d(1px, 3px, 0);-webkit-box-shadow: 0 0 11px 0 rgba(255, 255, 255, .1);box-shadow: 0 0 11px 0 rgba(255, 255, 255, .1);-webkit-transform-origin: 0% 100%;transform-origin: 2% 100%}style>
head><body><div class="index-bg"><div class="stars"><div class="star">div><div class="star" style="top: 80px; left: 800px; animation-delay: 3s;">div><div class="star" style="top: 40px; left: 646px; animation-delay: 2s;">div><div class="star" style="top: 20px; left: 395px; animation-delay: 4s;">div><div class="star" style="top: 60px; left: 765px; animation-delay: 1s;">div><div class="star" style="top: 70px; left: 1200px; animation-delay: 2s;">div><div class="star" style="top: 20px; left: 1000px; animation-delay: 1s;">div><div class="star" style="top: 10px; left: 1400px; animation-delay: 2s;">div><div class="star" style="top: 1px; left: 1800px; animation-delay: 3s;">div><div class="star" style="top: 10px; left: 2300px; animation-delay: 3s;">div>div>div>
body>html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！