HTML+CSS+JS实现流星天体动画场景特效
【摘要】 HTML+CSS+JS实现流星天体动画场景特效
🍅 作者主页：
🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
效果演示： 文末获取源码
代码目录：
主要代码实现：
CSS样式：
* {
border-radius: 100px;
}
body {
font-size: 30px;
color: white
}
#ibandoc {
color: white;
}
html {
height: 100%;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: 100vh;
}
.night li {
position: absolute;
list-style: none;
width: 5px;
height: 5px;
border-radius: 100%;
background-color: #fff;
transform: rotate(45deg);
}
.night li:nth-child(1) {
width: 16px;
height: 16px;
top: 80%;
left: 25%;
background-color: grey;
}
.night li:nth-child(2) {
top: 40%;
left: 40%;
}
.night li:nth-child(3) {
opacity: 0;
top: 20%;
left: 45%;
width: 5px;
height: 37px;
animation: meteor 1.5s infinite linear;
animation-delay: 1s;
}
.night li:nth-child(4) {
top: 5%;
left: 50%;
}
.night li:nth-child(5) {
opacity: 0;
top: 20%;
left: 55%;
width: 1px;
height: 15px;
animation: meteor 1.5s infinite linear;
}
@keyframes meteor {
10% {
opacity: 2;
}
80% {
left: 5%;
top: 85%;
opacity: 0;
}
}
.planet {
width: 285px;
height: 285px;
background-image: url("../img/bg1.jpg");
);
border-radius: 50%;
background-size: cover;
box-shadow: -80px -20px 70px 2px rgb(29, 28, 28) inset, 3px 0 20px rgba(206, 182, 138, 0.555);
animation: spin 10s linear reverse infinite;
transform: rotate(30deg);
backface-visibility: hidden;
}
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
@keyframes spin {
100% {
background-position: 100%;
}
}
HTML代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Planet!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<div class="container">
<div class="night">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="planet"></div>
</div>
</body>
</html>上面的图片文件需要引入
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看或下方微信公众号获取~！
打卡 文章 更新 47 / 100天
精彩推荐更新中：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）