深圳市住房和建設(shè)局網(wǎng)站幫人推廣注冊app的平臺
【今日文章】：如何用css 實現(xiàn)星空效果
- 需求
- 實現(xiàn)
- tips:
需求
用CSS 實現(xiàn)星空效果的需求：
- 屏幕上有“星星”，且向上移動。
- 移動的時候，動畫效果要連貫，不能出現(xiàn)閃一下的樣子。
實現(xiàn)
這里我們需要知道，“星星”是怎么產(chǎn)生的。
通過box-shaow: xxx, xxx, xxx, xxx;就能產(chǎn)生多個陰影，這些陰影也就是我們需要的星星。
其次是星星的動畫是怎么做的？
星星向上移動，且移動完成以后，沒有“閃”一下的效果。這是常見的動畫上面的需求，我們通常的做法就是復(fù)制一份一樣的“星星”出來。上面的原來的div動畫結(jié)束以后，接著顯示下面的“星星”。
<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. 寫一個子元素，復(fù)制star， 當動畫結(jié)束的時候，展示一模一樣的子元素。不會出現(xiàn)動畫“閃”一下的效果。 */
.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以后，下面沒東西了。最合理的解決方案是 "復(fù)制" 一份出來。*/
@keyframes moveup{100%{transform:translateY(-100vh)}
}</style>
tips:
父親display:flex；子元素margin:auto。
這個時候能上下左右居中的原理是，margin:auto能填滿子元素到父元素上下左右的距離。
如果是margin-left:auto，那是子元素填滿子元素左側(cè)到父元素的距離。