看不上日全食了,学习CSS3,实现一个日全食的动画特效

看新闻说,今年全球唯一一次日全食将于北京时间4月9日凌晨在北美洲地区上演。看来那边我是去不成了,日全食也看不见了,不过我可以用CSS3实现一个日全食的动画特效。一起来看一下吧。

目录

[1. 实现思路](#1. 实现思路)

[2. 天空的生成已经渐变](#2. 天空的生成已经渐变)

[3 太阳的生成以及渐变](#3 太阳的生成以及渐变)

[4 月亮的生成以及渐变](#4 月亮的生成以及渐变)

[5 完整源代码](#5 完整源代码)

[6 结尾](#6 结尾)


1. 实现思路

日全食涉及到太阳的遮挡,所以天空要有明暗的变化;

火红的太阳,在被遮挡的过程中,要有明亮,混白,一直到被月亮遮住,直到漏出一圈的白边;

月亮是移动的,因为到了中间,太阳因为过于的发白,月亮就会变黑;

一直到月亮离开,天空和太阳恢复正常。

2. 天空的生成已经渐变

天空我们首先设置DIV的背景色为 skyblue,然后通过animation动画,从天蓝色往黑色渐变,因为要在网页主题内显示日全食过程的大小,不可能整个网页都做成日全食,所以设定一个宽高即可。代码如下:

css 复制代码
<!-- HTML部分 -->
<body>

<div class="sky">
	
</div>

</body>

// css3部分
body{
	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;
}

3 太阳的生成以及渐变

太阳在日全食过程中,主要的变化就是由背景色gold这个金黄色向白色的转变,同时采用keyframes和animation的配合,改变其光晕效果,代码如下:

css 复制代码
<!-- 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;
}

效果改变如下图:

4 月亮的生成以及渐变

在整个动画中,月亮的出现、移动、以及渐变最关重要。这里采用transform与属性值translateX的配合,使月亮有一个移动的过程。同时,月亮的渐变要从月光白到黑色的渐变,因为在日全食的最中央,月亮应该是一个黑色的,他被太阳光遮盖了。代码如下:

css 复制代码
<!-- 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 完整源代码

css 复制代码
<!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 结尾

最近很多朋友说面试忧愁,焦虑万分,要么简历投不出去,要么面试官瞎问,要么自己感觉答的还行,但没有结果,所以我为大家准备了优化简历的礼物,请看:打造优秀的开发求职简历,还准备了最新前端面试题大全,又全又卷啊,有解析,有答案,有举一反三,有刷题思考,请看:WEB前端最新面试题 - 又全又卷,希望对你有帮助。

相关推荐
爱吃的强哥几秒前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安9 分钟前
CSRF请求伪造
前端·网络安全·csrf
帅云毅13 分钟前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆13 分钟前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
TT模板15 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩16 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真21 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
nenchoumi311935 分钟前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln
凉、介41 分钟前
PCI 总线学习笔记(五)
android·linux·笔记·学习·pcie·pci
SuperSwaggySUP1 小时前
4/25 研0学习日志
学习