用 CSS3 做一個流星雨動畫
昨天 UI 提交過來一個登錄頁的設計稿，要求背景有一個流星雨動畫，做完之后覺得挺有趣，分享一下~ 一、流星動畫 首先創建一個 div 作為畫布 為了防止瀏覽器分辨率太大而影響視覺效果，給畫布加了 max-width 和 margin:auto ...
相關推薦
html、css、javascript 實現紅包雨
先看看效果吧！ HTML代碼： CSS代碼： JavaScript代碼： *:ஐ٩(๑´ᵕ`)۶ஐ:* 學習使我進步 歡迎留言討論哦！ ...
8個純CSS3制作的動畫應用及源碼
對於一個復雜的圖形或者動畫來說，之前我們的處理方式是圖片疊加或者利用CSS+JavaScript的方法，然而隨着CSS3標准的不斷成熟，我們甚至完全可以利用CSS3來繪制一些圖片和制作豐富的動畫特效。本文主要是分享了8個純CSS3制作的動畫應用，提供源代碼下載。 1、純CSS3實現發光開關切換按鈕 ...
css3動畫應用-音樂唱片旋轉播放特效
css3動畫應用-音樂唱片旋轉播放特效 核心點： 1、設置圖片為圓形居中，使圖片一直不停旋轉。 2、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環移動。 3、點擊圖標，音樂暫停，圖片停止旋轉；點擊圖片，音樂播放，圖片開始旋轉。 1、動設置圖片為圓形居中，使圖片一直不停旋轉 ...
7款純CSS3實現的炫酷動畫應用
1、純CSS3實現人物搖頭動畫 這次我們要來分享一款超級可愛的純CSS3人物搖頭動畫，初始化的時候人物的各個部位是利用CSS3動畫效果拼接而成，接下來就是人物聽音樂的場景，一邊聽音樂一邊搖着腦袋，十分陶醉的樣子，周圍還會出現跳動的音符動畫。 在線演示 源碼下載 2、CSS3 ...
貝塞爾曲線與CSS3動畫、SVG和canvas的應用
簡介 貝塞爾曲線是可以做出很多復雜的效果來的，比如彈跳球的復雜動畫效果，首先加速下降，停止，然后彈起時逐漸減速的效果。 使用貝塞爾曲線常用的兩個網址如下： 緩動函數：http://www.xuanfengge.com/easeing/easeing/ cubic-bezier：http ...
CSS3動畫事件
CSS3 的動畫效果強大，在移動端使用廣泛，動畫執行開始和結束都可以使用JS來監聽其事件。 animationstart animationend 以下是一個示例 <!DOCTYPE html> <html> <head> ...
CSS3動畫箭頭
<style type="text/css"> .arrow { display: block; width: 20px; height: 20px; position: absolute; bottom: 25px; left ...