其他代码

炫酷CSS3预加载loading样式

也想出现在这里?联系我们
创客主机


这是两款炫酷的 css3 loading 预加载样式。该 css3 loading 预加载样式通过简单的布局和 CSS 代码,来制作效果非常炫酷的 loading 预加载特效。

使用方法

在页面中引入 bootstrap 文件。

  1. <link rel="stylesheet" href="bootstrap.min.css">

HTML 结构

第一个 loading 效果的基本 HTML 结构如下。

  1. <div class="container">
  2.  <div class="row">
  3.  <div class="col-md-12">
  4.  <div class="preloader">
  5.  <div class="loader loader-inner-1">
  6.  <div class="loader loader-inner-2">
  7.  <div class="loader loader-inner-3">
  8.  </div>
  9.  </div>
  10.  </div>
  11.  </div>
  12.  </div>
  13.  </div>
  14. </div>

第二个 loading 效果的基本 HTML 结构如下。

  1. <div class="container">
  2.  <div class="row">
  3.  <div class="col-md-12">
  4.  <div class="preloader">
  5.  <div class="loader"></div>
  6.  </div>
  7.  </div>
  8.  </div>
  9. </div>

CSS 样式

第一个 loading 效果的 CSS 样式如下。

  1. .preloader{
  2.  height: 100%;
  3.  width: 100%;
  4.  padding: 20px 0 20px;
  5.  display: flex;
  6.  flex-flow: column wrap;
  7.  justify-content: center;
  8.  align-content: center;
  9.  align-items: center;
  10.  perspective: 700;
  11. }
  12. .loader{
  13.  text-align: center;
  14.  margin: 5px;
  15.  border-radius: 50%;
  16.  border: 4px solid #fff;
  17.  display: flex;
  18.  flex-flow: column wrap;
  19.  justify-content: center;
  20.  align-content: center;
  21.  align-items: center;
  22.  transform-style: preserve-3d;
  23.  position: relative;
  24. }
  25. .loader-inner-1{
  26.  animation-delay: 0.2s;
  27.  animation: change_first_circle 2s ease-in-out infinite;
  28. }
  29. .loader-inner-2{
  30.  animation-delay: 0.2s;
  31.  animation: change_second_circle 2s ease-in-out infinite;
  32. }
  33. .loader-inner-3{
  34.  animation-delay: 0.2s;
  35.  width: 100px;
  36.  height: 100px;
  37.  animation: change_last_circle 3s linear infinite;
  38. }
  39. @keyframes change_first_circle {
  40.  50%{ transform: rotateX(360deg) scale(0.8); }
  41. }
  42. @keyframes change_second_circle {
  43.  50%{ transform: rotateY(360deg) scale(0.8); }
  44. }
  45. @keyframes change_last_circle {
  46.  50%{ transform: rotateX(360deg) scale(0.8); }
  47. }

第二个 loading 效果的 CSS 样式如下。

  1. .preloader{
  2.  height: 100px;
  3.  width: 100px;
  4.  margin: 30px auto 0;
  5.  position: relative;
  6. }
  7. .loader{
  8.  background-color: #fff;
  9.  width: 5px;
  10.  height: 5px;
  11.  border-radius: 50px;
  12.  position: relative;
  13.  top: calc(50% - 2.5px);
  14.  left: calc(50% - 2.5px);
  15. }
  16. .loader:before,
  17. .loader:after{
  18.  content: "";
  19.  background: linear-gradient(45deg,transparent,rgba(255, 255, 255, .3),rgba(255, 255, 255, .3),transparent);
  20.  width: 50px;
  21.  height: 50px;
  22.  border-top: 3px solid #fff;
  23.  border-right: 3px solid #fff;
  24.  border-radius: 0 50px 0px 0;
  25.  transform-origin: 0% 100%;
  26.  position: absolute;
  27.  top: -47px;
  28.  animation: loader 1s linear infinite;
  29. }
  30. .loader:after{
  31.  border-top: none;
  32.  border-right: none;
  33.  border-bottom: 3px solid #fff;
  34.  border-left: 3px solid #fff;
  35.  border-radius: 0 0px 0px 50px;
  36.  transform-origin: 100% 0%;
  37.  top: 2px;
  38.  right: 2px;
  39. }
  40. @keyframes loader{
  41.  0%{ transform:rotate(0deg); }
  42.  100%{ transform:rotate(360deg); }
  43. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!