純css和flutter分別實(shí)現(xiàn)呼吸燈效果(實(shí)例代碼)
發(fā)布時間：2021-02-23 15:04:42 作者：我的大小姐 
我要評論
我要評論這篇文章主要介紹了純css和flutter分別實(shí)現(xiàn)呼吸燈效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
上一次有一位非常好學(xué)的粉絲兒問可不可以把月亮做一個呼吸燈效果，因?yàn)闆]有找到月亮大小的圖，就用星星代替
今天，本博主用純css和flutter動畫分別實(shí)現(xiàn)它，記得收藏學(xué)習(xí)哦
效果：
想要測試的，原圖在文章末尾
實(shí)現(xiàn)原理：
準(zhǔn)備兩張圖，讓兩張圖交替出現(xiàn)。
純css實(shí)現(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>
到此這篇關(guān)于純css和flutter分別實(shí)現(xiàn)呼吸燈效果(實(shí)例代碼)的文章就介紹到這了,更多相關(guān)css實(shí)現(xiàn)呼吸燈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
通過css3動畫和opacity透明度實(shí)現(xiàn)呼吸燈效果
這篇文章主要介紹了通過css3動畫和opacity透明度實(shí)現(xiàn)呼吸燈效果,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2019-08-09