看新聞?wù)f，今年全球唯一一次日全食將于北京時間4月9日凌晨在北美洲地區(qū)上演?？磥砟沁呂沂侨ゲ怀闪?，日全食也看不見了，不過我可以用CSS3實現(xiàn)一個日全食的動畫特效。一起來看一下吧。
?文章來源：http://www.zghlxwxcb.cn/news/detail-845150.html
目錄
1. 實現(xiàn)思路
2. 天空的生成已經(jīng)漸變
3 太陽的生成以及漸變
4 月亮的生成以及漸變?
5 完整源代碼
6 結(jié)尾
1. 實現(xiàn)思路
日全食涉及到太陽的遮擋，所以天空要有明暗的變化；
火紅的太陽，在被遮擋的過程中，要有明亮，混白，一直到被月亮遮住，直到漏出一圈的白邊；
月亮是移動的，因為到了中間，太陽因為過于的發(fā)白，月亮就會變黑；
一直到月亮離開，天空和太陽恢復(fù)正常。
2. 天空的生成已經(jīng)漸變
天空我們首先設(shè)置DIV的背景色為?skyblue，然后通過animation動畫，從天藍(lán)色往黑色漸變，因為要在網(wǎng)頁主題內(nèi)顯示日全食過程的大小，不可能整個網(wǎng)頁都做成日全食，所以設(shè)定一個寬高即可。代碼如下：
<!-- HTML部分 -->
<body>
<div class="sky">
</div>
</body>
// css3部分
body{
animation:sky 5s linear infinite; /*循環(huán)，動畫執(zhí)行方法*/
background: skyblue;
}
@-webkit-keyframes sky{
from {
background: skyblue;
}
50%{
background: black;
}
to {
background: skyblue;
}
}
.sky{
position: relative;
margin: 50% auto;
width: 50vmin;
height: 50vmin;
}3 太陽的生成以及漸變
太陽在日全食過程中，主要的變化就是由背景色gold這個金黃色向白色的轉(zhuǎn)變，同時采用keyframes和animation的配合，改變其光暈效果，代碼如下：
<!-- HTML部分 -->
<div class="sun"></div>
// css部分
.sun,.moon{
position: absolute;
top: 0;
left: 0;
right: 0px;
bottom: 0px;
background: rgba(255,0,0,0.5);
border-radius: 50%;
}
.sun {
background: gold;
-webkit-animation:sun 5s linear infinite;
}效果改變?nèi)缦聢D：
?
4 月亮的生成以及漸變?
在整個動畫中，月亮的出現(xiàn)、移動、以及漸變最關(guān)重要。這里采用transform與屬性值translateX的配合，使月亮有一個移動的過程。同時，月亮的漸變要從月光白到黑色的漸變，因為在日全食的最中央，月亮應(yīng)該是一個黑色的，他被太陽光遮蓋了。代碼如下：
<!-- HTML部分 -->
<div class="moon"></div>
// CSS3部分
.moon{
-webkit-animation:moon 5s linear infinite;
}
@-webkit-keyframes moon{
from{
-webkit-transform:translateX(-110%);
-webkit-transform:translateX(-110%);
background: lightgray;
}
50%{
background: black;
}
to{
-webkit-transform:translateX(110%);
-webkit-transform:translateX(110%);
background: lightgray;
}
}?效果如下圖
?
5 完整源代碼
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3日全食動畫特效</title>
<style type="text/css">
body{
-webkit-animation:sky 5s linear infinite;
background: skyblue;
}
@-webkit-keyframes sky{
from{
background: skyblue;
}
50%{
background: black;
}
to{
background: skyblue;
}
}
.sky{
position: relative;
margin: 50% auto;
width: 50vmin;
height: 50vmin;
}
.sun,.moon{
position: absolute;
top: 0;
left: 0;
right: 0px;
bottom: 0px;
background: rgba(255,0,0,0.5);
border-radius: 50%;
}
.sun {
background: gold;
-webkit-animation:sun 5s linear infinite;
}
@-webkit-keyframes sun{
50%{
background: white;
box-shadow: 0 0 5em white, 0 0 5em white, 0 0 5em white, 0 0 5em white;
}
}
.moon{
-webkit-animation:moon 5s linear infinite;
}
@-webkit-keyframes moon{
from{
-webkit-transform:translateX(-110%);
-webkit-transform:translateX(-110%);
background: lightgray;
}
50%{
background: black;
}
to{
-webkit-transform:translateX(110%);
-webkit-transform:translateX(110%);
background: lightgray;
}
}
</style>
</head>
<body>
<div class="sky">
<div class="sun"></div>
<div class="moon"></div>
</div>
</body>
</html>6 結(jié)尾
最近很多朋友說面試憂愁，焦慮萬分，要么簡歷投不出去，要么面試官瞎問，要么自己感覺答的還行，但沒有結(jié)果，所以我為大家準(zhǔn)備了優(yōu)化簡歷的禮物，請看：打造優(yōu)秀的開發(fā)求職簡歷，還準(zhǔn)備了最新前端面試題大全，又全又卷啊，有解析，有答案，有舉一反三，有刷題思考，請看：WEB前端最新面試題 - 又全又卷，希望對你有幫助。文章來源地址http://www.zghlxwxcb.cn/news/detail-845150.html
到了這里，關(guān)于看不上日全食了，學(xué)習(xí)CSS3，實現(xiàn)一個日全食的動畫特效的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
