css漣漪光圈擴散 CSS動畫例項 圓的漣漪擴散

css

動畫例項：圓的漣漪擴散

設頁面中有

class="circle

，定義.circle

的樣式規則繪製乙個半徑為

75px

邊框厚度為

4px的圓，再定義關鍵幀，使得圓從不可見到可見，再到放大後又不可見。

編寫的html

檔案如下。

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%{ transform: scale(0);

opacity: 0;

50% { opacity: 1;

100% { transform: scale(1);

opacity: 0;

class="container">

css漣漪光圈擴散 CSS動畫例項 圓的漣漪擴散

設頁面中有 編寫的html檔案如下。圓的放大 container margin 0 auto width 300px height 300px position relative display flex justify content center align items center backg...

css 波紋擴散 css水波紋動畫

好久沒有寫 css 動畫了，久到我都忘了了，想當初在大學的時候，寫起 css3 的動畫，那可是6得很。今天要實現個水波紋動畫，暫且記錄一下思路吧 剛開始拿到的時候還是有點傻眼，第一種方案，我的想法是，用乙個 div 就夠了，然後可以用 css3 radial gradient 的徑向漸變，但是我們的...

CSS3漣漪效果

不多bb 直接上思路 比如我們想給這個加乙個漣漪效果 漣漪要有滴 這個漣漪隨便用個標籤表示 我就用span了,於是我們得到了以下 live 小小的span要站在img後 而且不能擋住img 怎麼解決 定位嘛 live live img live span 準備工作完成 思路清晰起來了 採用css3的...