設頁面中有
編寫的html檔案如下。
圓的放大
.container
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
.circle
width:150px;
height:150px;
border: 4px solid #000;
border-radius: 50%;
animation: anim 1s ease-out infinite;
@keyframes anim
0%
50%
100%
在瀏覽器中開啟包含這段html**的html檔案，可以呈現出如圖1所示的動畫效果。
圖1 圓的放大(一)
若將上面檔案中的「border: 4px solid #000;」改寫為「background: #000;」，則呈現出如圖2所示的動畫效果。
圖2 圓的放大(二)
在圖1的基礎上再增加乙個圓，並且新增加的圓延遲0.5s執行動畫過程。編寫如下的html檔案。
圓的放大
.container
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
.circle
position: relative;
width:150px;
height:150px;
border: 0 solid transparent;
border-radius: 50%;
.circle:before, .circle:after
content: '';
border: 10px solid #000;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: anim 1s linear infinite;
opacity: 0;
.circle:after
animation-delay: .5s;
@keyframes anim
0%
50%
100%
在瀏覽器中開啟包含這段html**的html檔案，可以呈現出如圖3所示的動畫效果。
圖3 兩個圓的放大(一)
同樣，若將上面檔案中的「border: 10px solid #000;」改寫為「background: #000;」，則呈現出如圖4所示的動畫效果。
圖4 兩個圓的放大(二)
增加到4個圓，其中乙個圓保持不變，另外三個圓按給定延遲執行放大動畫過程，形成圓的漣漪擴散效果。編寫的html檔案內容如下。
圓的漣漪擴散
.container
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
.circle
position:absolute;
width:60px;
height:60px;
border-radius:50%;
background-color:#666;
.circle:nth-child(1)
animation:anim 3s linear infinite;
.circle:nth-child(2)
animation:anim 3s linear 0.8s infinite;
.circle:nth-child(3)
animation:anim 3s linear 1.6s infinite;
@keyframes anim
from
to
在瀏覽器中開啟包含這段html**的html檔案，可以呈現出如圖5所示的動畫效果。
圖5 圓的漣漪擴散
css漣漪光圈擴散 CSS動畫例項 圓的漣漪擴散
css 動畫例項 圓的漣漪擴散 設頁面中有 class circle 定義.circle 的樣式規則繪製乙個半徑為 75px 邊框厚度為 4px的圓，再定義關鍵幀，使得圓從不可見到可見，再到放大後又不可見。編寫的html 檔案如下。html 圓的放大 container margin 0 auto ...
css 波紋擴散 css水波紋動畫
好久沒有寫 css 動畫了，久到我都忘了了，想當初在大學的時候，寫起 css3 的動畫，那可是6得很。今天要實現個水波紋動畫，暫且記錄一下思路吧 剛開始拿到的時候還是有點傻眼，第一種方案，我的想法是，用乙個 div 就夠了，然後可以用 css3 radial gradient 的徑向漸變，但是我們的...
CSS3漣漪效果
不多bb 直接上思路 比如我們想給這個加乙個漣漪效果 漣漪要有滴 這個漣漪隨便用個標籤表示 我就用span了,於是我們得到了以下 live 小小的span要站在img後 而且不能擋住img 怎麼解決 定位嘛 live live img live span 準備工作完成 思路清晰起來了 採用css3的...