Last time, a very eager fan asked if the moon could be made as a breathing light effect, because the moon-sized picture was not found, so I used stars instead.
Today, this blogger uses pure css and flutter animations to achieve it, remember to collect and learn Oh
effect: I
want to test, the original picture is at the end of the article
Realization principle:
prepare two pictures and let the two pictures alternately appear.
The first, pure css implementation, the code is as follows:
<!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>
The second one is implemented with flutter, the code is as follows:
还在想
