18种各式各样的loading，纯html5+css3无图片

最新推荐文章于 2024-08-03 22:01:17 发布
最新推荐文章于 2024-08-03 22:01:17 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： html 文章标签： html5 css3
原文链接：https://blog.csdn.net/qingfeidie/article/details/79976151
版权

网友总结的18种各式各样的loading，纯html5+css3无图片，我再次整理下

<!DOCTYPE html>
<html lang='zh_CN'>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="full-screen" content="yes">
	<meta name="x5-fullscreen" content="true">
	<title>APP下载</title>
</head>

<body>

昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：



loading1
代码如下：
<style>
.loading1{
  width: 80px;
  height: 40px;
  margin: 0 auto;
  margin-top:100px;
}
.loading1 span{
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
  0%,100%{
      height: 40px;
      background: lightgreen;
  }
  50%{
      height: 70px;
      margin: -15px 0;
      background: lightblue;
  }
}
.loading1 span:nth-child(2){
  -webkit-animation-delay:0.2s;
}
.loading1 span:nth-child(3){
  -webkit-animation-delay:0.4s;
}
.loading1 span:nth-child(4){
  -webkit-animation-delay:0.6s;
}
.loading1 span:nth-child(5){
  -webkit-animation-delay:0.8s;
}

</style>
<div class="loading1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
第2种效果：

loading2
代码如下：
<style>
.loading2{
  width: 150px;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto;
  margin-top:100px;
  position: relative;
  background: lightgreen;
  -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading2 span{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: lightgreen;
  position: absolute;
  margin-top: -7px;
  margin-left:-8px;
  -webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
  0%{
      background: lightgreen;
  }
  100%{
      background: lightblue;
  }
}
@-webkit-keyframes changePosition{
  0%{
      background: lightgreen;
  }
  100%{
      margin-left: 142px;
      background: lightblue;
  }
}

</style>
<div class="loading2">
        <span></span>
</div>
第3-5种效果：



loading3
<style>
.loading3{
  width: 150px;
  height: 15px;
  margin: 0 auto;
  margin-top:100px;
}
.loading3 span{
  display: inline-block;
  width: 15px;
  height: 100%;
  margin-right: 5px;
  border-radius: 50%;
  background: lightgreen;
  -webkit-animation: load3 1.04s ease infinite;
}
.loading3 span:last-child{
  margin-right: 0px; 
}
@-webkit-keyframes load3{
  0%{
      opacity: 1;
  }
  100%{
      opacity: 0;
  }
}
.loading3 span:nth-child(1){
  -webkit-animation-delay:0.13s;
}
.loading3 span:nth-child(2){
  -webkit-animation-delay:0.26s;
}
.loading3 span:nth-child(3){
  -webkit-animation-delay:0.39s;
}
.loading3 span:nth-child(4){
  -webkit-animation-delay:0.52s;
}
.loading3 span:nth-child(5){
  -webkit-animation-delay:0.65s;
}

</style>
<div class="loading3">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
loading4
<style>
.loading4{
  width: 150px;
  height: 15px;
  margin: 0 auto;
  margin-top:100px;
}
.loading4 span{
  display: inline-block;
  width: 15px;
  height: 100%;
  margin-right: 5px;
  border-radius: 50%;
  background: lightgreen;
  -webkit-animation: load4 1.04s ease infinite;
}
.loading4 span:last-child{
  margin-right: 0px; 
}
@-webkit-keyframes load4{
  0%{
      opacity: 1;
      -webkit-transform: scale(1.3);
  }
  100%{
      opacity: 0.2;
      -webkit-transform: scale(.3);
  }
}
.loading4 span:nth-child(1){
  -webkit-animation-delay:0.13s;
}
.loading4 span:nth-child(2){
  -webkit-animation-delay:0.26s;
}
.loading4 span:nth-child(3){
  -webkit-animation-delay:0.39s;
}
.loading4 span:nth-child(4){
  -webkit-animation-delay:0.52s;
}
.loading4 span:nth-child(5){
  -webkit-animation-delay:0.65s;
}

</style>
<div class="loading4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div> 
loading5
代码如下：
<style>
.loading5{
  width: 150px;
  height: 15px;
  margin: 0 auto;
  position: relative;
  margin-top:100px;
}
.loading5 span{
  position: absolute;
  width: 15px;
  height: 100%;
  border-radius: 50%;
  background: lightgreen;
  -webkit-animation: load5 1.04s ease-in infinite alternate;
}
@-webkit-keyframes load5{
  0%{
      opacity: 1;
      -webkit-transform: translate(0px);
  }
  100%{
      opacity: 0.2;
      -webkit-transform: translate(150px);
  }
}
.loading5 span:nth-child(1){
  -webkit-animation-delay:0.13s;
}
.loading5 span:nth-child(2){
  -webkit-animation-delay:0.26s;
}
.loading5 span:nth-child(3){
  -webkit-animation-delay:0.39s;
}
.loading5 span:nth-child(4){
  -webkit-animation-delay:0.52s;
}
.loading5 span:nth-child(5){
  -webkit-animation-delay:0.65s;
}

</style>
<div class="loading5">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
第3-5种效果的css样式分别为：

第6-8种效果：



loading6
<style>
.loading6{
  width: 150px;
  height: 15px;
  margin: 0 auto;
  margin-top:100px;
  text-align: center;
}
.loading6 span{
  display: inline-block;
  width: 15px;
  height: 100%;
  margin-right: 5px;
  background: lightgreen;
  -webkit-animation: load6 1.04s ease infinite;
}
.loading6 span:last-child{
  margin-right: 0px; 
}
@-webkit-keyframes load6{
  0%{
      opacity: 1;
  }
  100%{
      opacity: 0;
  }
}
.loading6 span:nth-child(1){
  -webkit-animation-delay:0.13s;
}
.loading6 span:nth-child(2){
  -webkit-animation-delay:0.26s;
}
.loading6 span:nth-child(3){
  -webkit-animation-delay:0.39s;
}
.loading6 span:nth-child(4){
  -webkit-animation-delay:0.52s;
}
.loading6 span:nth-child(5){
  -webkit-animation-delay:0.65s;
}

</style>
<div class="loading6">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div> 
loading7
<style>
.loading7{
  width: 150px;
  height: 15px;
  margin: 0 auto;
  margin-top:100px;
}
.loading7 span{
  display: inline-block;
  width: 15px;
  height: 100%;
  margin-right: 5px;
  background: lightgreen;
  -webkit-transform-origin: right bottom;
  -webkit-animation: load7 1s ease infinite;
}
.loading7 span:last-child{
  margin-right: 0px; 
}
@-webkit-keyframes load7{
  0%{
      opacity: 1;
  }
  100%{
      opacity: 0;
      -webkit-transform: rotate(90deg);
  }
}
.loading7 span:nth-child(1){
  -webkit-animation-delay:0.13s;
}
.loading7 span:nth-child(2){
  -webkit-animation-delay:0.26s;
}
.loading7 span:nth-child(3){
  -webkit-animation-delay:0.39s;
}
.loading7 span:nth-child(4){
  -webkit-animation-delay:0.52s;
}
.loading7 span:nth-child(5){
  -webkit-animation-delay:0.65s;
}

</style>
<div class="loading7">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div> 
loading8
代码如下：
<style>
.loading8{
  width: 150px;
  height: 15px;
  margin: 0 auto;
  margin-top:100px;
}
.loading8 span{
  display: inline-block;
  width: 15px;
  height: 100%;
  margin-right: 5px;
  background: lightgreen;
  -webkit-transform-origin: right bottom;
  -webkit-animation: load8 1s ease infinite;
}
.loading8 span:last-child{
  margin-right: 0px; 
}
@-webkit-keyframes load8{
  0%{
      opacity: 1;
      -webkit-transform: scale(1);
  }
  100%{
      opacity: 0;
      -webkit-transform: rotate(90deg) scale(.3);
  }
}
.loading8 span:nth-child(1){
  -webkit-animation-delay:0.13s;
}
.loading8 span:nth-child(2){
  -webkit-animation-delay:0.26s;
}
.loading8 span:nth-child(3){
  -webkit-animation-delay:0.39s;
}
.loading8 span:nth-child(4){
  -webkit-animation-delay:0.52s;
}
.loading8 span:nth-child(5){
  -webkit-animation-delay:0.65s;
}

</style>
<div class="loading8">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
第6-8种效果的css样式分别为：

第9-10种效果：



loading9
<style>
.loading9{
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
  margin-top:100px;
}
.loading9 span{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: lightgreen;
  position: absolute;
  -webkit-animation: load9 1.04s ease infinite;
}
@-webkit-keyframes load9{
  0%{
      opacity: 1;
  }
  100%{
      opacity: 0.2;
  }
}
.loading9 span:nth-child(1){
  left: 0;
  top: 50%;
  margin-top:-8px;
  -webkit-animation-delay:0.13s;
}
.loading9 span:nth-child(2){
  left: 14px;
  top: 14px;
  -webkit-animation-delay:0.26s;
}
.loading9 span:nth-child(3){
  left: 50%;
  top: 0;
  margin-left: -8px;
  -webkit-animation-delay:0.39s;
}
.loading9 span:nth-child(4){
  top: 14px;
  right:14px;
  -webkit-animation-delay:0.52s;
}
.loading9 span:nth-child(5){
  right: 0;
  top: 50%;
  margin-top:-8px;
  -webkit-animation-delay:0.65s;
}
.loading9 span:nth-child(6){
  right: 14px;
  bottom:14px;
  -webkit-animation-delay:0.78s;
}
.loading9 span:nth-child(7){
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  -webkit-animation-delay:0.91s;
}
.loading9 span:nth-child(8){
  bottom: 14px;
  left: 14px;
  -webkit-animation-delay:1.04s;
}
</style>
 <div class="loading9">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
loading10
代码如下：
<style>
.loading10{
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
  margin-top:100px;
}
.loading10 span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: lightgreen;
  position: absolute;
  -webkit-animation: load10 1.04s ease infinite;
}
@-webkit-keyframes load10{
  0%{
      -webkit-transform: scale(1.2);
      opacity: 1;
  }
  100%{
      -webkit-transform: scale(.3);
      opacity: 0.5;
  }
}
.loading10 span:nth-child(1){
  left: 0;
  top: 50%;
  margin-top:-10px;
  -webkit-animation-delay:0.13s;
}
.loading10 span:nth-child(2){
  left: 14px;
  top: 14px;
  -webkit-animation-delay:0.26s;
}
.loading10 span:nth-child(3){
  left: 50%;
  top: 0;
  margin-left: -10px;
  -webkit-animation-delay:0.39s;
}
.loading10 span:nth-child(4){
  top: 14px;
  right:14px;
  -webkit-animation-delay:0.52s;
}
.loading10 span:nth-child(5){
  right: 0;
  top: 50%;
  margin-top:-10px;
  -webkit-animation-delay:0.65s;
}
.loading10 span:nth-child(6){
  right: 14px;
  bottom:14px;
  -webkit-animation-delay:0.78s;
}
.loading10 span:nth-child(7){
  bottom: 0;
  left: 50%;
  margin-left: -10px;
  -webkit-animation-delay:0.91s;
}
.loading10 span:nth-child(8){
  bottom: 14px;
  left: 14px;
  -webkit-animation-delay:1.04s;
}

</style>
<div class="loading10">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
CSS样式分别为：

第11种效果：



loading11
代码如下：
<style>
.loading11{
  width: 80px;
  height: 40px;
  margin: 0 auto;
  margin-top:100px;
}
.loading11 span{
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load11 1.04s ease infinite;
}
@-webkit-keyframes load11{
  0%,100%{
      height: 40px;
      background: lightgreen;
  }
  50%{
      height: 60px;
      margin-top: -20px;
      background: lightblue;
  }
}
.loading11 span:nth-child(2){
  -webkit-animation-delay:0.13s;
}
.loading11 span:nth-child(3){
  -webkit-animation-delay:0.26s;
}
.loading11 span:nth-child(4){
  -webkit-animation-delay:0.39s;
}
.loading11 span:nth-child(5){
  -webkit-animation-delay:0.52s;
}

</style>
<div class="loading11">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
第12种效果：



loading12
代码如下：
<style>
.loading12{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    border:5px solid lightgreen;
    -webkit-animation: turn 2s linear infinite;
}
.loading12 span{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation: changeBgColor12 2s linear infinite;
}
@-webkit-keyframes changeBgColor12{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes turn{
    0%{
        -webkit-transform: rotate(0deg);
        border-color: lightgreen;
    }
    100%{
        -webkit-transform: rotate(360deg);
        border-color: lightblue;
    }
}
</style>
<div class="loading12">
        <span></span>
</div>
第13种效果：



loading13
代码如下：
<style>
.loading13{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
    text-align: center;
}
.loading13 span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-animation: load13 1.04s ease infinite;
}
.loading13 span:last-child{
    margin-right: 0px; 
}
@-webkit-keyframes load13{
    0%{
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100%{
        opacity: .2;
        -webkit-transform: scale(.2);
    }
}
.loading13 span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loading13 span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loading13 span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loading13 span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loading13 span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

</style>
<div class="loading13">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
第四14种效果：



loading14
代码如下：
<style>
.loading14{
    width: 150px;
    height: 8px;
    border-radius: 4px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightblue;
    overflow: hidden;
}
.loading14 span{
    display:block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: lightgreen;
    -webkit-animation: changePosition14 4s linear infinite;
}
@-webkit-keyframes changePosition14{
    0%{
        -webkit-transform: translate(-150px);
    }
    50%{
        -webkit-transform: translate(0);
    }
    100%{
        -webkit-transform: translate(150px);
    }
}

</style>
<div class="loading14">
        <span></span>
</div>
第15种效果：



loading15
代码如下：
<style>
.loading15{
    width: 200px;
    height: 60px;
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
}
.loading15 span{
    width: 50px;
    height: 30px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    overflow: hidden;
    -webkit-animation: changePosition15 2.08s linear infinite;
}
@-webkit-keyframes changePosition15{
  0%,100%{
      -webkit-transform: translate(70px);
  }
  20%{
      width: 50px;
      height: 30px;
      margin-top:-15px;
      -webkit-transform: translate(0px);
  }
  30%{
      width: 20px;
      height: 60px;
      margin-top:-30px;
      -webkit-transform: translate(0px);
  }
  35%{
      width: 50px;
      height: 30px;
      margin-top:-15px;
      -webkit-transform: translate(5px);
      background: lightblue;
  }
  70%{
      width: 50px;
      height: 30px;
      margin-top:-15px;
      -webkit-transform: translate(160px);
  }
  80%{
      width: 20px;
      height: 60px;
      margin-top:-30px;
      -webkit-transform: translate(160px);
  }
  85%{
      width: 50px;
      height: 30px;
      margin-top:-15px;
      -webkit-transform: translate(155px);
      background: lightgreen;
  }

}

</style>
<div class="loading15">
        <span></span>
</div>
第16种效果：



loading16
代码如下：
<style>
.loading16{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
}
.loading16 span{
    display: inline-block;
    width: 30px;
    height: 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load16 1.04s ease infinite;
}
@-webkit-keyframes load16{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.loading16 span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-5px;
    -webkit-animation-delay:0.13s;
}
.loading16 span:nth-child(2){
    left: 10px;
    top: 20px;
    -webkit-transform: rotate(45deg);
    -webkit-animation-delay:0.26s;
}
.loading16 span:nth-child(3){
    left: 50%;
    top: 10px;
    margin-left: -15px;
    -webkit-transform: rotate(90deg);
    -webkit-animation-delay:0.39s;
}
.loading16 span:nth-child(4){
    top: 20px;
    right:10px;
    -webkit-transform: rotate(135deg);
    -webkit-animation-delay:0.52s;
}
.loading16 span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-5px;
    -webkit-transform: rotate(180deg);
    -webkit-animation-delay:0.65s;
}
.loading16 span:nth-child(6){
    right: 10px;
    bottom:20px;
    -webkit-transform: rotate(225deg);
    -webkit-animation-delay:0.78s;
}
.loading16 span:nth-child(7){
    bottom: 10px;
    left: 50%;
    margin-left: -15px;
    -webkit-transform: rotate(270deg);
    -webkit-animation-delay:0.91s;
}
.loading16 span:nth-child(8){
    bottom: 20px;
    left: 10px;
    -webkit-transform: rotate(315deg);
    -webkit-animation-delay:1.04s;
}

</style>
<div class="loading16"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
第17种效果：



loading17
代码如下：
<style>
.loading17 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top:100px;
  position: relative;
}
.loading17 div{
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-animation: load17 2.08s linear infinite;
}
.loading17 div span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: lightgreen;
  position: absolute;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}
@-webkit-keyframes load17{
  0%{
      -webkit-transform: rotate(0deg);
  }
  10%{
      -webkit-transform: rotate(45deg);
  }
  50%{
      opacity: 1;
      -webkit-transform: rotate(160deg);
  }
  62%{
      opacity: 0;
  }
  65%{
      opacity: 0;
      -webkit-transform: rotate(200deg);
  }
  90%{
      -webkit-transform: rotate(340deg);
  }
  100%{
      -webkit-transform: rotate(360deg);
  }

}
.loading17 div:nth-child(1){
  -webkit-animation-delay:0.2s;
}
.loading17 div:nth-child(2){
  -webkit-animation-delay:0.4s;
}
.loading17 div:nth-child(3){
  -webkit-animation-delay:0.6s;
}
.loading17 div:nth-child(4){
  -webkit-animation-delay:0.8s;
}
</style>
<div class="loading17">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
</div>
第18种效果：



loading18
代码如下：
<style>
.loading18{
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    -webkit-animation: load18 3s linear infinite;
}
.loading18 div{
    width: 100%;
    height: 100%;
    position: absolute;
}
.loading18 span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #99CC66;
    position: absolute;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    -webkit-animation: changeBgColor18 3s ease infinite;
}
@-webkit-keyframes load18{
    0%{
        -webkit-transform: rotate(0deg);
    }
    33.3%{
        -webkit-transform: rotate(120deg);
    }
    66.6%{
        -webkit-transform: rotate(240deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes changeBgColor18{
    0%,100%{
        background: #99CC66;
    }
    33.3%{
        background: #FFFF66;
    }
    66.6%{
        background: #FF6666;
    }
}
.loading18 div:nth-child(2){
    -webkit-transform: rotate(120deg);
}
.loading18 div:nth-child(3){
    -webkit-transform: rotate(240deg);
}
.loading18 div:nth-child(2) span{
    -webkit-animation-delay: 1s;
}
.loading18 div:nth-child(3) span{
    -webkit-animation-delay: 2s;
}
</style>
<div class="loading18">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
</div>
PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

 

mrtuzi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
loading加载
yzyblog的博客
06-27 1万+
页面加载时需要加载，请求接口也需要loading。在前端loading的需求无处不在，就是为了让用户体验更好。做loading的方式也有很多：下面我处理loading的用一张小的png图，yong            .wgui-message{     position: fixed;     top: 50%;     left: 50%;     z-index: 11010; ...
HTML5 Canvas发光Loading动画特效源码
爱酷码的博客
05-09 555
之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。
CSS content换行技术实现字符animation loading效果
cs729298的博客
08-10 333
一、之前我的字符loading实现 关于字符打点动画实现，我之前使用过box-shadow模拟，还有border+background模拟，还有使用text-shadow实现，以及今年自认为是最好的实现的利用CSS3 ch单位的实现，在“等宽字体在web布局中应用以及CSS3 ch单位”这篇文章有介绍，demo在这里，效果类似下面（偷懒，非真实截图，以前做的图）： 然后，我
css3实战汇总（附源码）
在线学习web前端开发教程
01-13 151
css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。 我们将学到 box-shadow的高级应用 制作自适应的椭圆 纯css3实现饼图进度动画 用border来实现一个对话框样式 css3 filter的简单应用 css3伪...
vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
lvyuanxiang的博客
09-23 4845
vue教程 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么 一套用于构建用户界面的渐进式JavaScript框架 渐进式：Vue可以自底向上逐层的应用 简单应用：只需一个轻量小巧的核心库 复杂应用：可以引入各式各样的Vue插件 1.1.2 谁开发的 1.1.3 Vue的特点 采用组件化模式，提高代码复用率、且让代码更好维护。 声明式编码,让编码人员无需直接操作DOM,提高开发效率。 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点 1.2 Vue快速体验
【工具】动图展示 60+ 个前端常用插件库合集
pingan8787
07-06 564
作者：寒青https://segmentfault.com/a/1190000019151460DataTables官网：https://www.datatables.net/DataTa...
html5作品展示的动效,HTML5 动效的常见制作方法
weixin_35797963的博客
05-31 945
智唯网络为你推出众所周知，HTML5 动效的常见制作方法。一个元素，动往往比静更吸引眼球;一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一...
60+ 个前端常用插件库合集
松岛川树
09-13 1044
60+ 个前端常用插件库合集 目录60+ 个前端常用插件库合集DataTablesLazyLoadlightSlideralertify.jspickadate.js-日期/时间选择器chosentypeahead.jstextillate.jsChart.jshighlight.jsjquery-loadingjquery-validationMoment.jsAnimate.cssAcePD...
动图展示 60+ 个前端常用插件库合集
祈澈菇凉
06-29 568
作者：寒青https://segmentfault.com/a/1190000019151460DataTables官网：https://www.datatables.net/DataTa...
动图展示 60+ 个常用的前端插件库
前端达人
07-02 424
作者：寒青https://segmentfault.com/a/1190000019151460DataTables官网：https://www.datatables.net/DataTa...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 2020
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
CSS3中动画的制作案例
业精于勤荒于嬉，行成于思毁于随
08-03 200
动画主要属性：动画名称，持续时间，记时函数，延迟，迭代次数，方向
4个自定义倒计时
lulei5153的博客
08-03 162
【代码】4个自定义倒计时。
CSS3中的3D变换
业精于勤荒于嬉，行成于思毁于随
08-03 89
总结起来，CSS3的3D变换使得我们可以在网页中创建各种炫酷的3D效果，通过平移、旋转、缩放和倾斜来改变元素的位置和形状。默认值为flat，表示子元素在平面中呈现，设置为preserve-3d可以将子元素在3D空间中呈现。CSS3中的3D变换（3D Transformations）允许我们在网页中创建3D效果的元素。它提供了一系列的属性和方法，可以将元素沿x、y和z轴进行移动、旋转、缩放和倾斜。通过设置一个正值来创建观察者和3D元素之间的距离。- scale3d(x, y, z)：沿x、y和z轴进行缩放。
css3的继承性
最新发布
jht_520的博客
08-03 290
继承性的使用需要注意一些细节。首先，只有在没有明确指定样式的情况下才会发生继承。其次，继承性只会发生在父元素和其子元素之间，对于兄弟元素之间的样式继承是不会发生的。这意味着如果一个元素没有指定某个样式属性的值，它将会继承父元素的该样式属性的值。继承性可以减少代码量，提高代码的可维护性。然而，并非所有的样式属性都具有继承性。CSS3文档中明确规定了哪些属性具有继承性。有些属性默认是不具有继承性的，但可以通过设置特定的值来使其具有继承性。关键字来将非继承性属性设置为继承性。关键字来取消继承，使元素使用默认值。
Kettle、Spoon数据同步工具
08-03
Kettle、Spoon数据同步工具7.0版本 SQL Server、MySQL数据库jar包等
delphi教程案例项目资源
08-03
delphi教程案例项目资源
探索MATLAB替代品的API宝典：解锁编程新境界
08-03
Matlab是由MathWorks公司开发的一款高性能的数值计算和可视化软件环境。它被广泛应用于工程计算、算法开发、数据分析、可视化、仿真以及其他数学和科学领域。Matlab的核心特点是其强大的矩阵操作能力，这使得它在矩阵计算和线性代数方面非常高效。 ### Matlab的主要特点包括： 1. **矩阵操作**：Matlab的语法是基于矩阵的，这使得进行复杂的矩阵运算变得简单直观。 2. **编程语言**：Matlab拥有自己的编程语言，支持变量、控制结构（如循环和条件语句）、函数和数据结构。 3. **数值计算**：提供广泛的数值分析功能，包括傅里叶分析、数值积分、微分方程求解等。 4. **符号计算**：Matlab的Symbolic Math Toolbox支持符号运算，可以进行符号微分、积分和方程求解等。 5. **数据可视化**：Matlab提供了丰富的图形和可视化工具，可以创建二维和三维图形、图表和动画。 6. **算法开发**：用户可以利用Matlab开发和测试算法，然后将其嵌入到其他应用程序中。 7. **模型仿真**：Matlab的Simulink提供了一个交互式
java html生成图片
05-11
而HTML则需要结合一些其他技术来实现图片的生成，在HTML中可以使用canvas来实现自己的图片，通过JavaScript可以让用户输入各种参数从而生成各式各样的图片。可以说，Java在生成图片方面拥有更丰富的功能和更大的自由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值