<!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%;
}
#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;
/*動畫方向: 交替*/
}
@keyframes starFlash{
from{opacity: 1;}
to{opacity: 0.3;}
/*opacity透明度 1完全不透明 0完全透明*/
}
#sun{
width: 200px;
height: 200px;
background-color: orange;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background:radial-gradient(#f5c313,#ec7e08);
/*太陽漸層*/
box-shadow: 0 0 45px #f5c91a;
/*太陽光芒*/
animation-name: sunLight;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
/*太陽光芒動畫*/
}
@keyframes sunLight{
from{box-shadow: 0 0 45px #f5c91a;}
to{box-shadow: 0 0 100px #f5c91a;}
}
</style>
</head>
<body id="universe">
<div id="stars"></div>
<div id="sun"></div>
</body>
</html>
留言列表
Impression (1)
