上一次有一位非常好學的粉絲兒問可不可以把月亮做一個呼吸燈效果，因為沒有找到月亮大小的圖，就用星星代替
今天，本博主用純css和flutter影片分別實作它，記得收藏學習哦
效果：
想要測驗的，原圖在文章末尾
實作原理：
準備兩張圖，讓兩張圖交替出現，
第一種，純css實作，代碼如下：
<!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>
第二種，用flutter實作，代碼如下：
還在想
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262937.html
標籤：其他
上一篇：方塊和圓形跳動正在加載中