其他代码

超酷 loading 加载动画CSS3特效

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

超酷 loading 加载动画CSS3特效-创客云
这是一款超酷 CSS3 loading 加载动画特效。该 loading 动画使用 CSS3CSS3 animation 动画来制作,它代码简单,效果非常的炫酷。

HTML 结构

使用一个<div>元素作为该 loading 动画的容器,里面有两个子元素。其中 div.loading-1 是 loading 进度条。div.loading-2 是 loading 文字。

  1. <div class="loader">
  2.     <div class="loading-1"></div>
  3.     <div class="loading-2">Loading...</div>
  4. </div>

CSS 样式

该 loading 动画中使用了 3 个 animation 动画,第一个 load 动画是用于进度条从 0 运动到 100%。第二个 turn 动画用于进度条在 Y 轴方向上旋转。第三个 bounce 动画用于文字的弹跳。

  1. .loader {
  2.     width: 150px;
  3.     margin: 50px auto 70px;
  4.     position: relative;
  5. }
  6. .loader .loading-1 {
  7.     position: relative;
  8.     width: 100%;
  9.     height: 10px;
  10.     border: 1px solid #69d2e7;
  11.     border-radius: 10px;
  12.     animation: turn 4s linear 1.75s infinite;
  13. }
  14. .loader .loading-1:before {
  15.     content: "";
  16.     display: block;
  17.     position: absolute;
  18.     width: 0%;
  19.     height: 100%;
  20.     background: #69d2e7;
  21.     box-shadow: 10px 0px 15px 0px #69d2e7;
  22.     animation: load 2s linear infinite;
  23. }
  24. .loader .loading-2 {
  25.     width: 100%;
  26.     position: absolute;
  27.     top: 10px;
  28.     color: #69d2e7;
  29.     font-size: 22px;
  30.     text-align: center;
  31.     animation: bounce 2s  linear infinite;
  32. }
  33. @keyframes load {
  34.     0% {
  35.         width: 0%;
  36.     }
  37.     87.5%, 100% {
  38.         width: 100%;
  39.     }
  40. }
  41. @keyframes turn {
  42.     0% {
  43.         transform: rotateY(0deg);
  44.     }
  45.     6.25%, 50% {
  46.         transform: rotateY(180deg);
  47.     }
  48.     56.25%, 100% {
  49.         transform: rotateY(360deg);
  50.     }
  51. }
  52. @keyframes bounce {
  53.     0%,100% {
  54.         top: 10px;
  55.     }
  56.     12.5% {
  57.         top: 30px;
  58.     }
  59. }
(0)

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

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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