用纯CSS制作带动画的天气图标方法教程

程序员文章站 2022-05-02 08:39:27

...

静态的天气图标看久了显得呆板，那么下面就分享一个很有才创意的用CSS实现天气带动画的天气图标，代码都分享出来，以这个例子作为参考希望你能得到启发。enjoy!本文我们主要和大家分享用纯CSS制作带动画的天气图标方法教程，希望能帮助大家。

　　下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。

　　STEP1: 整体HTML架构
　　STEP2: 用CSS绘制云朵图标
　　CSS代码如下
　　body {
　　max-width: 42em;
　　padding: 2em;
　　margin: 0 auto;
　　color: #161616;
　　font-family: 'Roboto', sans-serif;
　　text-align: center;
　　background-color: currentColor;
　　}
　　.icon {
　　position: relative;
　　display: inline-block;
　　width: 12em;
　　height: 10em;
　　font-size: 1em; /* control icon size here */
　　}
　　.cloud {
　　position: absolute;
　　z-index: 1;
　　top: 50%;
　　left: 50%;
　　width: 3.6875em;
　　height: 3.6875em;
　　margin: -1.84375em;
　　background: currentColor;
　　border-radius: 50%;
　　box-shadow:
　　-2.1875em 0.6875em 0 -0.6875em,
　　2.0625em 0.9375em 0 -0.9375em,
　　0 0 0 0.375em #fff,
　　-2.1875em 0.6875em 0 -0.3125em #fff,
　　2.0625em 0.9375em 0 -0.5625em #fff;
　　}
　　.cloud:after {
　　content: ''
　　position: absolute;
　　bottom: 0;
　　left: -0.5em;
　　display: block;
　　width: 4.5625em;
　　height: 1em;
　　background: currentColor;
　　box-shadow: 0 0.4375em 0 -0.0625em #fff;
　　}
　　.cloud:nth-child(2) {
　　z-index: 0;
　　background: #fff;
　　box-shadow:
　　-2.1875em 0.6875em 0 -0.6875em #fff,
　　2.0625em 0.9375em 0 -0.9375em #fff,
　　0 0 0 0.375em #fff,
　　-2.1875em 0.6875em 0 -0.3125em #fff,
　　2.0625em 0.9375em 0 -0.5625em #fff;
　　opacity: 0.3;
　　transform: scale(0.5) translate(6em, -3em);
　　animation: cloud 4s linear infinite;
　　}
　　.cloud:nth-child(2):after { background: #fff; }
　　.rain{
　　position: absolute;
　　z-index: 2;
　　top: 50%;
　　left: 50%;
　　width: 3.75em;
　　height: 3.75em;
　　margin: 0.375em 0 0 -2em;
　　background: currentColor;
　　}
　　.rain:after {
　　content: ''
　　position: absolute;
　　z-index: 2;
　　top: 50%;
　　left: 50%;
　　width: 1.125em;
　　height: 1.125em;
　　margin: -1em 0 0 -0.25em;
　　background: #0cf;
　　border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
　　box-shadow:
　　0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
　　-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
　　-1.375em -0.125em 0 rgba(255,255,255,0.2);
　　transform: rotate(-28deg);
　　animation: rain 3s linear infinite; /*设置动画 rain */
　　}
　　STEP3: 下雨动画
　　/* 下雨动画 Animations */
　　@keyframes rain {
　　0% {
　　background: #0cf;
　　box-shadow:
　　0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
　　-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
　　-1.375em -0.125em 0 #0cf;
　　}
　　25% {
　　box-shadow:
　　0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
　　-0.875em 1.125em 0 -0.125em #0cf,
　　-1.375em -0.125em 0 rgba(255,255,255,0.2);
　　}
　　50% {
　　background: rgba(255,255,255,0.3);
　　box-shadow:
　　0.625em 0.875em 0 -0.125em #0cf,
　　-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
　　-1.375em -0.125em 0 rgba(255,255,255,0.2);
　　}
　　100% {
　　box-shadow:
　　0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
　　-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
　　-1.375em -0.125em 0 #0cf;
　　}
　　}