Maison  >  Article  >  interface Web  >  Tutoriel sur la création d'icônes météo animées en utilisant du CSS pur

Tutoriel sur la création d'icônes météo animées en utilisant du CSS pur

小云云
小云云original
2017-12-14 13:15:201980parcourir

Les icônes météo statiques semblent ternes après les avoir regardées pendant une longue période, je vais donc partager ci-dessous une icône météo très créative et créative qui utilise CSS pour animer la bande météo. Le code est partagé comme. une référence. J'espère que vous pourrez l'inspirer. Profitez-en ! Dans cet article, nous partageons principalement avec vous le tutoriel sur la façon d'utiliser du CSS pur pour créer des icônes météo animées. Nous espérons que cela pourra vous aider.

Tutoriel sur la création dicônes météo animées en utilisant du CSS pur

Ensuite, nous ferons un exemple d'icône de temps pluvieux. Le processus est en fait très simple.

Tutoriel sur la création dicônes météo animées en utilisant du CSS pur
  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;
  }
  }

Recommandations associées :

Techniques et détails d'animation CSS

À propos de l'animation CSS Explication détaillée des attributs

Comparaison de l'animation CSS et de l'animation JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn