纯css写出爱心版载入实际效果的示例编码

日期:2020-10-16 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

本文详细介绍了纯css写出爱心版载入实际效果的示例编码,共享给大伙儿,实际以下:

爱心等候实际效果以下:

如今互联网技术时期网站何等多,都有各得设计风格,可是甚么样的设计风格能留住客户的滞留收看呢?就从载入来讲,许多载入实际效果全是同1种设计风格将会客户常常逛网站早就经习惯性,如果你的载入時间比别的网站時间长,实际效果還是1样的,将会就会关闭你的网站去别的网站收看,可是假如你的载入实际效果别具1格,有特性,将会客户看你载入实际效果的情况下你的网站就开启了,这样客户也就不容易马上关闭你的网站。

今日的这个爱心版载入实际效果是用纯css编码写出来的,只必须花点思绪,小量的编码就可以留住你的客户,那末为何不去做呢。

文章内容共享以前网编强烈推荐1下我的前端开发学习培训群:542827633,里边全是学习培训前端开发的,假如你想制做炫酷的殊效,想学习培训前端开发专业知识,网编欢迎你的添加。网编会在群中不确定期共享干货源代码,包含我用心梳理的1份前端开发实例教程。欢迎各位感兴趣爱好的的小伙子伴。

html编码:

<div class="flex-container">
  <div class="unit">
    <div class="heart">
      <div class="heart-piece-0"></div>
      <div class="heart-piece⑴"></div>
      <div class="heart-piece⑵"></div>
      <div class="heart-piece⑶"></div>
      <div class="heart-piece⑷"></div>
      <div class="heart-piece⑸"></div>
      <div class="heart-piece⑹"></div>
      <div class="heart-piece⑺"></div>
      <div class="heart-piece⑻"></div>
    </div>
    <p>equal love</p>
  </div>
</div>

css编码:

<style>
    @import url("https://fonts.googleapis.com/css?family=Lato:100");
html,
body {
  width: 100%;
  height: 100%;
}
.flex-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
body {
  background-color: #262e6f;
}
.unit {
  text-align: center;
}
.unit p {
  margin-top: 100px;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  color: #fff;
}
.heart {
  position: relative;
  font-size: 0;
  width: 138px;
}
[class*="heart-piece-"] {
  position: absolute;
  top: ⑸px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.heart-piece⑷ {
  -webkit-animation: piece⑷ 3.2s infinite;
          animation: piece⑷ 3.2s infinite;
}
.heart-piece⑶,
.heart-piece⑸ {
  -webkit-animation: piece⑶ 3.2s infinite;
          animation: piece⑶ 3.2s infinite;
}
.heart-piece⑵,
.heart-piece⑹ {
  -webkit-animation: piece⑵ 3.2s infinite;
          animation: piece⑵ 3.2s infinite;
}
.heart-piece⑴,
.heart-piece⑺ {
  -webkit-animation: piece⑴ 3.2s infinite;
          animation: piece⑴ 3.2s infinite;
}
.heart-piece-0,
.heart-piece⑻ {
  -webkit-animation: piece-0 3.2s infinite;
          animation: piece-0 3.2s infinite;
}
.heart-piece-0 {
  left: 0px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  background-color: #ec2d73;
}
.heart-piece⑴ {
  left: 16px;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  background-color: #eb5324;
}
.heart-piece⑵ {
  left: 32px;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  background-color: #fdc800;
}
.heart-piece⑶ {
  left: 48px;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  background-color: #47b264;
}
.heart-piece⑷ {
  left: 64px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  background-color: #1470bd;
}
.heart-piece⑸ {
  left: 80px;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  background-color: #76469a;
}
.heart-piece⑹ {
  left: 96px;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  background-color: #ec2d73;
}
.heart-piece⑺ {
  left: 112px;
  -webkit-animation-delay: 1.05s;
          animation-delay: 1.05s;
  background-color: #eb5324;
}
.heart-piece⑻ {
  left: 128px;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  background-color: #fdc800;
}
@-webkit-keyframes piece⑷ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 94px;
    top: ⑵3px;
  }
}
@keyframes piece⑷ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 94px;
    top: ⑵3px;
  }
}
@-webkit-keyframes piece⑶ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 90px;
    top: ⑶1px;
  }
}
@keyframes piece⑶ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 90px;
    top: ⑶1px;
  }
}
@-webkit-keyframes piece⑵ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 80px;
    top: ⑶7px;
  }
}
@keyframes piece⑵ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 80px;
    top: ⑶7px;
  }
}
@-webkit-keyframes piece⑴ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 60px;
    top: ⑶1px;
  }
}
@keyframes piece⑴ {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 60px;
    top: ⑶1px;
  }
}
@-webkit-keyframes piece-0 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 30px;
    top: ⑴5px;
  }
}
@keyframes piece-0 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: ⑸px;
  }
  45%, 55% {
    height: 30px;
    top: ⑴5px;
  }
}
  </style>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。