【今日文章】:如何用css 实现星空效果-CSDN博客
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
【今日文章】如何用css 实现星空效果
需求
用CSS 实现星空效果的需求
- 屏幕上有“星星”且向上移动。
- 移动的时候动画效果要连贯不能出现闪一下的样子。
实现
这里我们需要知道“星星”是怎么产生的。
通过box-shaow: xxx, xxx, xxx, xxx;
就能产生多个阴影这些阴影也就是我们需要的星星
。
其次是星星的动画是怎么做的
星星向上移动且移动完成以后没有“闪”一下的效果。这是常见的动画上面的需求我们通常的做法就是复制一份一样
的“星星”出来。上面的原来的div动画结束以后接着显示下面的
“星星”。
<html>
<body>
<div class="star" id="star"></div>
<div class="centerFont"> 星空效果 </div>
</body>
</html>
<style>
html{
height:100%;
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(8, 70, 218) 90%);
overflow:hidden
}
/*
目的是让元素平铺页面
position:absolute;
left:0;
right:0;
让元素中的东西居中
text-align:center;
*/
.centerFont{
position:absolute;
top:50%;
left:0;
right:0;
color:#fff;
text-align:center;
font-size:50px;
margin-top:-25px;
}
/*
1. 通过box-shadow中写多个偏移的阴影就能形成星空效果。
*/
.star{
position:fixed;
width:10px;
height:10px;
border-radius:50%;
background:red;
left:0;
right:0;
box-shadow:90vh 90vh #fff, 60vh 70vh #fff, 70vh 14vh #fff, 60vh 13vh #fff, 20vh 12vh #fff, 80vh 10vh #fff, 15vh 15vh #fff , 15vh 15vh #fff, 20vh 20vh #fff;
animation: moveup 100s;
}
/*
3. 写一个子元素复制star 当动画结束的时候展示一模一样的子元素。
不会出现动画“闪”一下的效果。
*/
.star::after{
content:"";
position:fixed;
background:red;
left:0;
right:0;
top:100vh;/* 这是重点 */
border-radius:inherit; /* 继承父元素 */
box-shadow:inherit;
width:inherit;
height:inherit;
}
/*
2. 星空是需要移动的那怎样的动画效果才合理呢
首先第一步是整个星空向上移动100vh。
这个时候移动100vh以后下面没东西了。
最合理的解决方案是 "复制" 一份出来。
*/
@keyframes moveup{
100%{
transform:translateY(-100vh)
}
}
</style>
tips:
父亲display:flex子元素margin:auto。
这个时候能上下左右居中的原理是margin:auto能填满子元素到父元素上下左右的距离。
如果是margin-left:auto那是子元素填满子元素左侧到父元素的距离。
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |