svg配合css3动画_CSS和SVG的动画昼夜循环

最新推荐文章于 2023-09-02 00:26:23 发布

cungui5726

最新推荐文章于 2023-09-02 00:26:23 发布

阅读量663

点赞数

文章标签： css java svg css3 js ViewUI

原文链接：https://thenewcode.com/883/Animated-Day-Night-Cycle-With-CSS-and-SVG

版权

svg配合css3动画

Astronomy has been a constant interest of mine, so I try to integrate it into as many pieces of work as I can. In this case, I wanted to represent a basic animated day-night cycle for the background of a web page.

天文学一直是我的不变兴趣，因此我尝试将其整合到尽可能多的作品中。在这种情况下，我想代表网页背景的基本动画昼夜循环。

SVG对于白天的天空 (SVG For the Daylight Sky)

SVG gradients are very similar to CSS gradients: indeed, their syntax heavily influenced theWebkit team’s first interpretation of the spec. The SVG version retains one significant advantage: it can be animated.

SVG渐变与CSS渐变非常相似：确实，它们的语法在很大程度上影响了Webkit团队对该规范的首次解释。 SVG版本保留了一项重大优势：可以进行动画处理。

Most examples of SVG gradients that you will find use hexadecimal colors. They can actually use any CSS color system, just like their CSS equivalent. In this case, alpha color values will be particular useful, as I want the sky gradient to be partially or wholly transparent at “night”, revealing a starscape.

您会发现大多数SVG渐变示例都使用十六进制颜色。他们实际上可以使用任何CSS颜色系统，就像它们CSS等效系统一样。在这种情况下，alpha颜色值将特别有用，因为我希望在“夜晚”时天空渐变部分或完全透明，从而露出星空。

I started with the following, representing “midnight”:

我从以下开始，代表“午夜”：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop stop-color="rgb(0,0,12)" offset="0%" id="zenith"></stop>
		<stop stop-color="rgb(0,0,12)" offset="100%" id="horizon"></stop>
		</linearGradient>
<rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
</svg>

The linear gradient is displayed vertically, with the zenith at the top, and both points starting with the same color. The resulting gradient is applied to the sky rectangle, which occupies the entire space.

线性渐变垂直显示，最高点在顶部，并且两个点都以相同的颜色开始。生成的渐变将应用到占据整个空间的天空矩形。

Both stop points are animated over 24 seconds, representing the hours in a day. Both components are color animated; the first stop-point’s position on the vertical gradient line is also transitioned, which changes the color range distribution in the gradient:

两个停止点的动画时间都超过24秒，代表一天中的小时数。这两个组件都是彩色动画；第一个停止点在垂直渐变线上的位置也将发生过渡，这将更改渐变中的颜色范围分布：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
	<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
			<animate attributeName="stop-color" dur="24s"    values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)" repeatCount="indefinite" />
			<animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0"repeatCount="indefinite" />
		</stop>
		<stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
			<animate attributeName="stop-color" dur="24s"    values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)" repeatCount="indefinite" />
		</stop>
</linearGradient>
<rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
</svg>

While it uses a slightly different syntax from CSS animations, the <animate>element is fairly straightforward: it defines the property that is being changed, a duration, and a list of values to be animated between.

尽管它使用的语法与CSS动画略有不同，但<animate>元素非常简单：它定义了要更改的属性，持续时间以及要在其中进行动画处理的值列表。

一夜的形象 (An Image For The Night)

The <body> element has a starfield image covering it: this will be hidden during the “day” by the opaque colors of the sky.

<body>元素具有覆盖它的星空图像：在“白天”，天空的不透明颜色将隐藏该图像。

body { 
	margin: 0;
	position: relative;
	background-color: #000;
	background-image: url(starfield_stock_1.jpg);
	background-size:cover;
}

The night sky will revealed when the opacity of the colors in the gradient are lowered, allowing the image to show through.

降低渐变中颜色的不透明度时，夜空将显现出来，从而使图像得以透彻显示。

太阳作为CSS渐变 (The Sun As a CSS Gradient)

The “sun” is a simple <div> element, made circular with border-radius and provided with a glow using a combination of radial-gradient and box-shadow:

“ sun”是一个简单的<div>元素，具有border-radius为圆形，并结合了radial-gradient和box-shadow ，具有发光效果：

.sun {
	width: 15vw;
	height: 15vw;
	background: #ff0;
	background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
	border-radius: 100%;
}

vw units are used for the width and height of the element to keep the sun both perfectly circular and responsive.

vw单位用于元素的width和height ，以保持太阳完美的圆形和响应。

We want the sun to rise from below the edge on the “east” (the bottom right of the page) ascend through the sky, and descend towards the left. The body is already position: relative, so I can use position: absolute on the sun to locate it on the horizon:

我们希望太阳从“东方”(页面右下)的边缘下方升起，通过天空上升，然后向左下降。身体已经在position: relative ，所以我可以在太阳上使用position: absolute ，将其定位在地平线上：

.sun {
	position: absolute;
	bottom: -7vw;
	right: 7vw;
	transform-origin: -28vw 7vw;
}

At the same time, I want to rotate the sun around a fixed point in the center of the page; to do this, I move its transform-origin to the left, placing it at the center of the page.

同时，我想围绕页面中心的固定点旋转太阳。为此，我将其transform-origin移到左侧，将其放在页面的中心。

As the SVG animation starts at midnight, the sun needs to start below the page; in other words, underneath the world we see.

由于SVG动画从午夜开始，所以太阳需要从页面下方开始；换句话说，在我们所看到的世界之下。

@keyframes suntrack {
	from { transform: rotate(.15turn); }
	to { transform: rotate(-.85turn); }
}

This animation rotates the sun in a complete circle, per my earlier article. I also wanted the sun’s rays to “pulse” subtly as it moves:

根据我之前的文章，该动画使太阳旋转一个完整的圆圈。我还希望太阳的光线在移动时会微妙地“脉动”：

@keyframes sunpulse { 
	from { box-shadow: 0 0 100px #ff0, 0 0 100px #ff0; }
	to { box-shadow: 0 0 50px #ff0, 0 0 75px #ff0; }
}

Both animations then need to be called:

然后需要调用两个动画：

.sun {
	position: absolute;
	bottom: -7vw; right: 7vw;
	transform-origin: -28vw 7vw;
	animation: suntrack 24s infinite forwards linear,
		sunpulse 2s alternate infinite;
}

The movement of the sun is linear (i.e. it doesn’t speed up or slow down as it moves across the sky), but the pulse has a “pingpong” effect, combined with default in-out easing.

太阳的运动是线性的(即，它在天空中移动时不会加速或减速)，但是脉冲具有“乒乓”效果，并结合了默认的进出缓动。

结论 (Conclusion)

I have not added a moon to the animation, although it would certainly be possible: in this case, the simplest method would be to add it opposite to the sun, like children at the opposite ends of a see-saw.

我没有在动画中添加月亮，尽管这肯定是可能的：在这种情况下，最简单的方法是将其添加到太阳对面，就像跷跷板两端的孩子一样。

Obviously, this animation does not reflect the current time in your location, nor the correct declination of the sun for the season or weather conditions. It’s my intention to recreate all of those features in future articles.

显然，此动画不能反映您所在位置的当前时间，也不能反映季节或天气条件下太阳的正确偏角。我打算在以后的文章中重新创建所有这些功能。

翻译自: https://thenewcode.com/883/Animated-Day-Night-Cycle-With-CSS-and-SVG

svg配合css3动画

cungui5726

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
svg配合css3动画_CSS和SVG的动画昼夜循环

svg配合css3动画Astronomy has been a constant interest of mine, so I try to integrate it into as many pieces of work as I can. In this case, I wanted to represent a basic animated day-night cycle for the b...
复制链接

扫一扫