上一次有一位非常好學的粉絲兒問可不可以把月亮做一個呼吸燈效果，因為沒有找到月亮大小的圖，就用星星代替
今天，本博主用純css和flutter動畫分別實現(xiàn)它，記得收藏學習哦
效果：
想要測試的，原圖在文章末尾
實現(xiàn)原理：
準備兩張圖，讓兩張圖交替出現(xiàn)。
純css實現(xiàn)，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.img1,
.img2{
margin-top: 100px;
width: 100px;
position: absolute;
}
.img2{
-webkit-animation: breath 3s infinite ease-in-out alternate;
animation: breath 3s infinite ease-in-out alternate;
}
@-webkit-keyframes breath {
0% {opacity: .2;}60% {opacity: 1;}to {opacity: .2;}
}
@keyframes breath {
0% {opacity: .2;}60% {opacity: 1;}to {opacity: .2;}
}
</style>
</head>
<body>
<div class="wrap">
<img src="images/star1.jpg" alt="底圖" class="img1">
<img src="images/star2.jpg" alt="上圖" class="img2">
</div>
</body>
</html>
到此這篇關于純css和flutter分別實現(xiàn)呼吸燈效果(實例代碼)的文章就介紹到這了,更多相關css實現(xiàn)呼吸燈內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
標簽：赤峰 延邊 大同 萍鄉(xiāng) 林芝 泰州 平涼 保定
巨人網絡通訊聲明：本文標題《純css和flutter分別實現(xiàn)呼吸燈效果(實例代碼)》，本文關鍵詞 ；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。
上一篇：簡單的css文字動畫效果
下一篇：CSS復合選擇器的具體使用方法
| ? |
|
|
|
|||||||||||||||
| 全國咨詢熱線 | |||||||||||||||||
| 400-1100-266 | |||||||||||||||||
| 在線客服( QQ：340506921 ) | |||||||||||||||||
 |
|||||||||||||||||
