css3繪製跳動的紅心詳解
分享一段程式碼例項,它利用css3繪製了跳動的紅心效果。
下面給出程式碼,並且對程式碼的實現過程給出詳細的分析,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box{ width: 200px; height: 200px; margin: 100px auto; position: relative; } .left,.right,.bottom{ width: 200px; height: 200px; position: absolute; background: red; } .left{ right: 100px; border-radius: 100px 100px 0 0; animation: move 1s infinite linear; } .right{ left: 100px; border-radius: 100px 100px 0 0; transform: rotate(45deg); animation: move1 1s infinite linear; } .bottom{ top: 100px; transform: rotate(45deg); animation: move1 1s infinite linear; } @keyframes show1{ 0%{ width: 0px; } 100%{ width: 345px; } } @keyframes move{ 0%{ transform: scale(1.0) rotate(-45deg); } 50%{ transform: scale(1.2) rotate(-45deg); } 100%{ transform: scale(1.0) rotate(-45deg); } } @keyframes move1{ 0%{ transform: scale(1.0) rotate(45deg); } 50%{ transform: scale(1.2) rotate(45deg); } 100%{ transform: scale(1.0) rotate(45deg); } } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div> </body> </html>
上面的程式碼繪製了能夠持續跳動的紅心效果,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼.box{ width: 200px; height: 200px; margin: 100px auto; position: relative; }
設定容器元素的寬度和高度,水平居中顯示,設定相對定位,這是為了讓它後代定位物件以它為參考。
[CSS] 純文字檢視 複製程式碼<div class="left"></div> <div class="right"></div> <div class="bottom"></div>
這三個div構成了心形圖案,如果將三個div和box元素各自設定背景色,那麼將會得到如下圖形:
縮放是採用的transform:scale()進行縮放變換的效果。
二.相關閱讀:
(1).border-radius可以參閱CSS3 border-radius一章節。
(2).animation可以參閱CSS3 animation一章節。
(3).@keyframes可以參閱CSS3 @keyframes一章節。
相關文章
- CSS3跳動的紅心效果CSSS3
- css3繪製心形圖案程式碼例項CSSS3
- CSS3繪製太極圖程式碼例項詳解CSSS3
- canvas 繪製文字詳解Canvas
- jQuery和CSS3繪製動態笑臉jQueryCSSS3
- View的繪製-measure流程詳解View
- 如何使用 css 繪製心形CSS
- css3 繪製畫圓、扇形CSSS3
- CSS3繪製騰訊QQ企鵝CSSS3
- View 繪製體系知識梳理(4) 繪製過程之 Layout 詳解View
- View 繪製體系知識梳理(5) 繪製過程之 Draw 詳解View
- css3繪製燃燒的蠟燭效果CSSS3
- 用CSS3繪製iPhone手機CSSS3iPhone
- View 繪製體系知識梳理(3) 繪製流程之 Measure 詳解View
- css3實現的紅心跳動效果CSSS3
- CSS3繪製圖形圖案效果CSSS3
- CSS3繪製菱形程式碼例項CSSS3
- CSS3動態月食效果詳解CSSS3
- View 繪製體系知識梳理(6) 繪製過程之 requestLayout 和 invalidate 詳解View
- css3繪製百度度熊CSSS3
- css3繪製月牙效果程式碼例項CSSS3
- CSS3繪製安卓系統機器人CSSS3安卓機器人
- javascript繪製心形圖案程式碼例項JavaScript
- canvas繪製實心圓形程式碼例項Canvas
- 紅黑樹詳解
- 紅外模組詳解
- css3繪製谷歌圖示程式碼例項CSSS3谷歌
- 讓你心動的 HTML5 & CSS3 效果HTMLCSSS3
- Flutter完整開發實戰詳解(九、 深入繪製原理)Flutter
- C++ Qt開發:Charts折線圖繪製詳解C++QT
- View的繪製二:View的繪製流程View
- 深入瞭解canvas在移動端繪製模糊的問題Canvas
- 「CSS3 」動畫詳解CSSS3動畫
- CSS3繪製平行四邊形程式碼例項CSSS3
- css3繪製QQ企鵝圖示程式碼例項CSSS3
- C++ Qt開發:Charts繪製各類圖表詳解C++QT
- css3繪製柳樹葉形狀程式碼例項CSSS3
- 【javascript】Canvas繪圖詳解JavaScriptCanvas繪圖