<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>呼吸燈</title>
<style type="text/css">
/* css代碼 */
.breath_light {
/*width: 300px; */ /* 寬度 */
/*height: 300px; */ /* 高度 */
/*border:#666 1px solid;*/
/*border-radius:50%;*/
opacity: 0.1; /* 不透明度 */
overflow: hidden; /* 溢出隱藏 */
background:#FF3; /* 背景色 */
/* margin: 25% auto; */ /* 外邊距 */
/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
animation-name: breath; /* 動畫名稱 */
animation-duration: 700ms; /* 動畫時長3秒 */
animation-timing-function: ease-in-out; /* 動畫速度曲線：以低速開始和結束 */
animation-iteration-count: infinite; /* 播放次數：無限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 動畫名稱 */
-webkit-animation-duration: 700ms; /* 動畫時長3秒 */
-webkit-animation-timing-function: ease-in-out; /* 動畫速度曲線：以低速開始和結束 */
-webkit-animation-iteration-count: infinite; /* 播放次數：無限 */
}
@keyframes breath {
from { opacity: 0.1; } /* 動畫開始時的不透明度 */
50% { opacity: 1; } /* 動畫50% 時的不透明度 */
to { opacity: 0.1; } /* 動畫結束時的不透明度 */
}
@-webkit-keyframes breath {
from { opacity: 0.1; } /* 動畫開始時的不透明度 */
50% { opacity: 1; } /* 動畫50% 時的不透明度 */
to { opacity: 0.1; } /* 動畫結束時的不透明度 */
}
</style>
</head>
<body>
<div title="呼吸燈">
<img class="breath_light" src="../img/guihui.jpg" style="height: 60px;width: 60px;" />
</div>
</body>
</html>
css-圖片閃爍效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie
幾個簡單的css動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi