CSS3水滴向下滴落動畫效果
本章節分享一段程式碼例項,它實現了水滴下落的拉伸效果。
不過看起來有一點點的邪惡,我們們就不去計較了,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body, html { margin: 0; background-color: #fff; } .content { position: absolute; z-index: 10; } .father { position: absolute; top: 0px; bottom: 0px; width: 100%; background-color: #fff; margin: -50px 0px; -webkit-filter: contrast(100); z-index: 1; } .big { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -100px -100px; background-color: #f00; border-radius: 50%; -webkit-filter: blur(20px); z-index: 100; } .small { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: 140px 0px; background-color: #f00; border-radius: 50%; -webkit-filter: blur(20px); animation-name: 'change1'; animation-duration: 5s; animation-iteration-count: infinite; } .center { position: absolute; width: 40px; height: 200px; background-color: #f00; -webkit-filter: blur(20px); top: 50%; left: 50%; margin: -30px -70px; animation-name: 'change2'; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes change1 { 0% { margin: -85px -90px; } 50% { margin: 50px -90px; } 100% { margin: -85px -90px; } } @-keyframes change2 { 0% { height: 0px; } 50% { height: 100px; } 100% { height: 0px; } } </style> </head> <body> <div class="father"> <div class="center"></div> <div class="big"></div> <div class="small"></div> </div> </body> </html>
相關文章
- css3水滴效果程式碼例項CSSS3
- CSS3動畫按鈕效果CSSS3動畫
- CSS3載入等待動畫效果CSSS3動畫
- css3動畫完成打字機效果CSSS3動畫
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- css3實現動畫閃爍效果CSSS3動畫
- css3動畫效果抖動解決CSSS3動畫
- jQuery水滴彈性摘取效果jQuery
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- CSS3 loadding載入動畫效果CSSS3動畫
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- CSS3圖片上下動畫浮動效果CSSS3動畫
- css3實現的簡單動畫效果CSSS3動畫
- CSS3滑鼠懸停圖片動畫 多種文字動畫效果CSSS3動畫
- css3和js實現的大白動畫效果CSSS3JS動畫
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- CSS3圓形旋轉變大動畫效果CSSS3動畫
- 如何在Swiper內製作CSS3動畫效果CSSS3動畫
- CSS製作水滴波浪效果案例CSS
- Android 水滴下落效果ViewAndroidView
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- CSS3 background-position定位背景圖片動畫效果CSSS3動畫
- css3實現的loadding載入動畫效果CSSS3動畫
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- 純CSS3畫出小黃人並實現動畫效果CSSS3動畫
- 美妙的 CSS3 動畫!夢幻般的按鈕效果CSSS3動畫
- CSS3中用background-image實現粒子動畫效果CSSS3動畫
- CSS3動畫實現3D倒數計時效果CSSS3動畫3D
- css3常用動畫+動畫庫CSSS3動畫
- CSS3動畫CSSS3動畫
- 使用 HTML5 Canvas 繪製的水滴效果HTMLCanvas
- CSS3 元素水平運動和背景色切換動畫效果CSSS3動畫
- 使用 CSS3 的褪色和動畫效果構建訊息提醒框CSSS3動畫
- CSS3動畫之逐幀動畫CSSS3動畫
- CSS3 動畫解析CSSS3動畫
- CSS3 animation 動畫CSSS3動畫
- css3動畫整理CSSS3動畫
- jQuery 效果 – 動畫jQuery動畫