昨天 ui 提交過來乙個登入頁的設計稿，要求背景有乙個流星雨動畫，做完之後覺得挺有趣，分享一下~
一、流星動畫
首先建立乙個 div 作為畫布
<div
id="stars"
>
<
div
class
="star"
style
="top: 0px;left: 500px;"
>
div>
div>
html, body #stars為了防止瀏覽器解析度太大而影響視覺效果，給畫布加了 max-width 和 margin:auto
然後畫出流星的形狀
.star .star:after建立動畫，實現流星劃過、漸入漸隱的效果
@keyframes star-fall 50% 100% }在50%的節點上，我沒有加上scale(1)這條屬性
是因為加上之後，動畫進行到 50% 的時候，會有乙個很明顯的停頓
刪掉 scale(1) 能改善這個情況，但並沒有解決
而且當 animation-timing-function 設定為 linear 之外的屬性的時候，問題特別嚴重
二、形成流星雨
上面只是建立了乙個流星，如果要形成流星雨，還需要繼續
<div
id="stars"
>
div>
var stars = document.getelementbyid('
stars')
//js隨機生成流星
for (var j=0;j<30;j++)
//封裝隨機數方法
function randomdistance (max, min)
通過 js 動態生成流星，保證 left 和 top 的值在某一範圍內隨機，就能產生較好的效果
然後用 js 新增動畫延時，讓流星不會同時出現
var star = document.getelementsbyclassname('star')
//給流星新增動畫延時
for (var i = 0, len = star.length; i < len; i++)
為了防止一開始只有乙個流星的尷尬場面，我將 index 為 6 的倍數的流星設為一開始就出現 用css3做乙個求婚小動畫
本案例主要是運用到了css3的animation keyframes transform等屬性，熟悉了，就可以做更多的其他動畫效果，這幾個屬性功能非常強大。首先，我們先來看看效果圖喲。一 準備工作 1 需要了解animation keyframes transform屬性 keyframes 讓開發...
css3做乙個loading動畫效果（詳細思路）
純css3的動畫做效果 小人來回移動，碰到小球時，小球消失。首先，html搭建結構 css布局 要點1 這個移動的小人是用兩個半圓來實現 move top和move down這兩個子。看似乙個圓構成，但要做出嘴巴張開與閉合這個效果，乙個圓是不能做出來的，採用兩個圓定位重疊，用css的clip屬性將乙...
python求婚創意 用css3做乙個求婚小動畫
首先放張效果圖 然後一步步分析一下 首先是剛出現的新郎的動畫 w m img margin right 0 float right margin top 60px animation towoman 0.5s ease 5s both keyframes towoman 0 opacity 0 tr...