前回、月の大きさの写真が見つからなかったので、非常に熱心なファンが月を呼吸光の効果として作ることができるかどうか尋ねたので、代わりに星を使用しました。
今日、このブロガーは純粋なcssとフラッターアニメーションを使用してそれを実現しています。ああ
効果を収集して学ぶことを忘れないでください：私
はテストしたいです、元の写真は記事の終わりにあります
実現原理：
2枚の写真を用意し、2枚の写真を交互に表示させます。
最初の純粋な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>
2つ目はフラッターで実装され、コードは次のとおりです。
还在想
