編碼的世界 / 優質文選 / 生涯
css動畫animation:@keyframes關鍵幀，infinite循環
2022年6月23日
-
css動畫的實驗
oeasy007，制作簡單的css動畫
在這裏插入代碼片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@keyframes myfirst {
from {opacity: 0.5}
to {opacity: 1}
}
img{
animation: myfirst 5s infinite;
}
</style>
</head>
<body>
<img src ="imgs/redstars.jpg" width="400px" height="300px"/>
<h1>七裏香</h1>
<p>窗外的麻雀，在電線杆上多嘴</p>
<p>你說這一句，很有夏天的感覺</p>
<p>手中的鉛筆，在紙上來來回回</p >
<p > </p >
</body >
</html>
效果是漸顯動畫。 查看網址：https://liujiajiahahaha.github.io/mynewshare/001basic/index.html myfirst是自己定義的動畫關鍵幀名字， img{ animation: myfirst 5s infinite; } 在此處的myfirst表示使用這個動畫，5s是過渡時間，infinite循環
熱門文章
