<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>地球軌跡練習</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
html, body{
height: 100%;
}
/*
*{
height: 100% 表示網頁中所有元素高度都設為100%
}
*/
#universe{
background:radial-gradient(#555,#000);
}
#stars{
background-image: url(Image/stars.png);
/*需設定圖片高度，否則顯示不出來*/
height: 100%;
/*為body父層的100%，所以需要再body也設定高度為100%*/
background-size: cover;
/*圖片會依照視窗地小做縮放*/
animation:starFlash;
animation-duration: 3s;
/*動畫持續時間*/
animation-iteration-count: infinite;
/*動畫重覆次數: infinit無限循環*/
animation-direction: alternate;
/*動畫方向: 交替*/
也可以寫成=> animation: starFlash 3s infinite alternate;
}
@keyframes starFlash{
from{opacity: 1;}
to{opacity: 0.3;}
/*opacity透明度 1完全不透明 0完全透明*/
}
</style>
</head>
<body id="universe">
<div id="stars"></div>
</body>
</html>
留言列表
Impression (1)
