CSS3 光弧擴散效果
分享一段程式碼例項,它實現了光弧擴散的效果,下面就詳細介紹一下它的實現過程。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; list-style: none; } .box { margin: 100px; } li { float: left; width: 50px; height: 50px; margin-right: 100px; } .box span { width: 100px; height: 100px; margin: 12px; display: block; border-radius: 50%; background: linear-gradient(red, blue); transition: 1s all ease; } a:before { border: 12px solid #A8E957; content: ''; position: absolute; width: 100px; height: 100px; border-radius: 62px; opacity: 0; } li:hover span { transform: rotateZ(360deg); } li:hover a:before { animation: warn 1s ease; } @keyframes warn { 0% { transform: scale(1); opacity: 0.8; } 20% { transform: scale(1); opacity: 0.6; } 40% { transform: scale(1.2); opacity: 0.4; } 60% { transform: scale(1.4); opacity: 0.2; } 80% { transform: scale(1.6); opacity: 0.1; } 100% { transform: scale(1.8); opacity: 0.0; } } </style> </head> <body> <div class="box"> <ul> <li><a href="#"><span></span></a></li> <li><a href="#"><span></span></a></li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼* { margin: 0; padding: 0; list-style: none; }
進行簡單的初始化操作,比較粗暴;在網路上有很多比較好的初始化程式碼。
[CSS] 純文字檢視 複製程式碼.box { margin: 100px; }
設定box元素的外邊距。
[CSS] 純文字檢視 複製程式碼li { float: left; width: 50px; height: 50px; margin-right: 100px; }
設定li元素的一些相關樣式屬性。
[CSS] 純文字檢視 複製程式碼.box span { width: 100px; height: 100px; margin: 12px; display: block; border-radius: 50%; background: linear-gradient(red, blue); transition: 1s all ease; }
設定span元素的寬度和高度都為100px;內聯元素是不能夠設定尺寸,所以後面使用了display: block將其轉換為塊級元素;內聯塊級元素也是可以設定尺寸的;同時為其應用了線性漸變,這就是我們看到的紅色和藍色的過度效果。transition: 1s all ease的應用可以使其任何動畫屬性發生變化都會產生動畫效果。
[CSS] 純文字檢視 複製程式碼a:before { border: 12px solid #A8E957; content: ''; position: absolute; width: 100px; height: 100px; border-radius: 62px; opacity: 0; }
新增一個偽元素,設定它的邊框為12px。
設定它為定位的目的是為了讓其變成塊級元素,偽元素必須設定為內聯塊級或者塊級,否則無法為其設定其尺寸。
border-radius值為62,這恰好寬度一半+邊框尺寸值,實現了內外都是圓弧的效果,具體可以參閱相關閱讀。
[CSS] 純文字檢視 複製程式碼li:hover span { transform: rotateZ(360deg); }
滑鼠懸浮li元素,讓span元素旋轉起來。
[CSS] 純文字檢視 複製程式碼li:hover a:before { animation: warn 1s ease; }
滑鼠懸浮li元素,偽元素會產生動畫效果。
後面的動畫效果也就不多介紹,就是透明度等屬性的動畫設定。
二.相關閱讀:
(1).線性漸變參閱CSS3 linear-gradient一章節。
(2).transition參閱CSS3 transition一章節。
(3).border-radius參閱CSS3 border-radius一章節。
(4).opacity參閱CSS opacity屬性一章節。
(5).@keyframes參閱CSS3 @keyframes一章節。
相關文章
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- iOS動畫-擴散波紋效果iOS動畫
- 滑鼠滑過圖片出現光弧效果程式碼例項
- CSS3發光字型幾種效果CSSS3
- CSS3實現的文字框陰影發光效果CSSS3
- css3帶有光暈的流星效果程式碼例項CSSS3
- css3實現滑鼠劃過圖片具有閃光效果CSSS3
- Flutter | 如何實現一個水波紋擴散效果的 WidgetFlutter
- 光學成像基礎-像散
- POJ 1418 圓的基本操作以及 圓弧離散化
- CSS3象棋效果CSSS3
- 「Premiere中文新手教程」水墨散開效果REM
- 圖片滑過亮光光弧效果程式碼例項
- CSS3 文字效果CSSS3
- CSS3空心圓效果CSSS3
- CSS3呼吸燈效果CSSS3
- CSS3 矩形切角效果CSSS3
- CSS3哭臉效果CSSS3
- CSS3翻轉效果CSSS3
- 屬性動畫-波紋擴散WaveView動畫View
- 什麼是AI穩定擴散?AI
- CSS3滑鼠懸浮橫條從中間向兩邊擴充套件效果CSSS3套件
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- Android 點選波紋擴散動畫Android動畫
- 一文詳解擴散模型:DDPM模型
- CSS3圓環效果程式碼CSSS3
- CSS3箭靶效果程式碼CSSS3
- CSS3花屏文字效果CSSS3
- CSS3時間軸效果CSSS3
- CSS3白鶴展翅效果CSSS3
- CSS3 checkbox美化效果CSSS3
- CSS3動畫按鈕效果CSSS3動畫
- CSS3 旋轉魔方效果CSSS3
- css3實現翻牌效果CSSS3
- CSS3圓角表格效果CSSS3
- css3的半透明效果CSSS3
- CSS3 Loading效果CSSS3
- CSS3發光背景程式碼例項CSSS3