源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5源码 > 资讯报道 > 网页制作 > 纯css写出爱心版加载效果的示例代码

纯css写出爱心版加载效果的示例代码

作者:zy来源:未知浏览:时间:2018-02-08 11:31我要评论
本文介绍了纯css写出爱心版加载效果的示例代码,分享给大家,具体如下: 爱心等待效果如下: 现在互联网时代网站何其多,各有各得风格,但是什么样的风格能留住用户的停留观看呢?

本文介绍了纯css写出爱心版加载效果的示例代码,分享给大家,具体如下:

爱心等待效果如下:

现在互联网时代网站何其多,各有各得风格,但是什么样的风格能留住用户的停留观看呢?就从加载来说,很多加载效果都是同一种风格可能用户经常逛网站早已经习惯,要是你的加载时间比其他网站时间长,效果还是一样的,可能就会关掉你的网站去其他网站观看,但是如果你的加载效果别具一格,有特点,可能用户看你加载效果的时候你的网站就打开了,这样用户也就不会立刻关掉你的网站。

今天的这个爱心版加载效果是用纯css代码写出来的,只需要花点心思,少量的代码就能留住你的用户,那么为什么不去做呢。

html代码:

<div class="flex-container">

<div class="unit">

<div class="heart">

<div class="heart-piece-0">

</div>

<div class="heart-piece-1">

</div>

<div class="heart-piece-2">

</div>

<div class="heart-piece-3">

</div>

<div class="heart-piece-4">

</div>

<div class="heart-piece-5">

</div>

<div class="heart-piece-6">

</div>

<div class="heart-piece-7">

</div>

<div class="heart-piece-8">

</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: -5px;

width: 10px;

height: 10px;

border-radius: 5px;

}

.heart-piece-4 {

-webkit-animation:

piece-4 3.2s infinite;

animation: piece-4 3.2s infinite;

}

.heart-piece-3, .heart-piece-5 {

-webkit-animation: piece-3 3.2s infinite;

animation: piece-3 3.2s infinite;

}

.heart-piece-2, .heart-piece-6 {

-webkit-animation: piece-2 3.2s infinite;

animation: piece-2 3.2s infinite;

}

.heart-piece-1, .heart-piece-7 {

-webkit-animation: piece-1 3.2s infinite;

animation: piece-1 3.2s infinite;

}

.heart-piece-0, .heart-piece-8 {

-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-1 {

left: 16px;

-webkit-animation-delay: 0.15s;

animation-delay: 0.15s;

background-color: #eb5324;

}

.heart-piece-2 {

left: 32px;

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

background-color: #fdc800;

}

.heart-piece-3 {

left: 48px;

-webkit-animation-delay: 0.45s;

animation-delay: 0.45s;

background-color: #47b264;

}

.heart-piece-4 {

left: 64px;

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

background-color: #1470bd;

}

.heart-piece-5 {

left: 80px;

-webkit-animation-delay: 0.75s;

animation-delay: 0.75s;

background-color: #76469a;

}

.heart-piece-6 {

left: 96px;

-webkit-animation-delay: 0.9s;

animation-delay: 0.9s;

background-color: #ec2d73;

}

.heart-piece-7 {

left: 112px;

-webkit-animation-delay: 1.05s;

animation-delay: 1.05s;

background-color: #eb5324;

}

.heart-piece-8 {

left: 128px;

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

background-color: #fdc800;

}

@-webkit-keyframes piece-4 {

0%, 10%, 90%, 100% {

height: 10px; top: -5px;

}

45%, 55% {

height: 94px;

top: -23px;

}

}

@keyframes piece-4 {

0%, 10%, 90%, 100% {

height: 10px; top: -5px;

}

45%, 55% {

height: 94px; top: -23px;

}

}

@-webkit-keyframes piece-3

{ 0%, 10%, 90%, 100%

{ height: 10px; top: -5px;

}

45%, 55% {

height: 90px; top: -31px;

}

}

@keyframes piece-3 {

0%, 10%, 90%, 100% {

height: 10px;

top: -5px;

}

45%, 55% {

height: 90px;

top: -31px;

}

}

@-webkit-keyframes piece-2 {

0%, 10%, 90%, 100% {

height: 10px; top: -5px;

}

45%, 55% {

height: 80px;

top: -37px;

}

}

@keyframes piece-2 {

0%, 10%, 90%, 100% {

height: 10px;

top: -5px;

}

45%, 55% {

height: 80px;

top: -37px;

}

}

@-webkit-keyframes piece-1 {

0%, 10%, 90%, 100% {

height: 10px; top: -5px;

}

45%, 55% {

height: 60px; top: -31px;

}

}

@keyframes piece-1 {

0%, 10%, 90%, 100%

{

height: 10px;

top: -5px;

}

45%, 55% {

height: 60px;

top: -31px;

}

}

@-webkit-keyframes piece-0 {

0%, 10%, 90%, 100% {

height: 10px; top: -5px;

}

45%, 55% {

height: 30px; top: -15px;

}

}

@keyframes piece-0 {

0%, 10%, 90%, 100% {

height: 10px; top: -5px;

}

45%, 55% {

height: 30px; top: -15px;

}

}

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章
网友对“纯css写出爱心版加载效果的示例代码”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话