登录

CSS3特效（1）——loading效果

FAILED
白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:4220

css3特效
sjxi.cn
效果一：\n<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\UTF-8\>\n <title>Title</title>\n <style>\n .loading{\n width: 80px;\n ...

效果一：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Title</title>
  6.    <style>
  7.       .loading{
  8.          width: 80px;
  9.          height: 40px;
  10.          margin: 0 auto;
  11.          margin-top:100px;
  12.       }
  13.       .loading span{
  14.          display: inline-block;
  15.          width: 8px;
  16.          height: 100%;
  17.          border-radius: 4px;
  18.          background: lightgreen;
  19.          -webkit-animation: load 1s ease infinite;
  20.       }
  21.       @-webkit-keyframes load{
  22.          0%,100%{
  23.             height: 40px;
  24.             background: lightgreen;
  25.          }
  26.          50%{
  27.             height: 70px;
  28.             margin: -15px 0;
  29.             background: lightblue;
  30.          }
  31.       }
  32.       .loading span:nth-child(2){
  33.          -webkit-animation-delay:0.2s;
  34.       }
  35.       .loading span:nth-child(3){
  36.          -webkit-animation-delay:0.4s;
  37.       }
  38.       .loading span:nth-child(4){
  39.          -webkit-animation-delay:0.6s;
  40.       }
  41.       .loading span:nth-child(5){
  42.          -webkit-animation-delay:0.8s;
  43.       }
  44.    </style>
  45. </head>
  46. <body>
  47. <div class="loading">
  53. </div>
  54. </body>
  55. </html>

效果二：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Title</title>
  6.    <style>
  7.       .loadEffect{
  8.          width: 100px;
  9.          height: 100px;
  10.          position: relative;
  11.          margin: 0 auto;
  12.          margin-top:100px;
  13.       }
  14.       .loadEffect span{
  15.          display: inline-block;
  16.          width: 20px;
  17.          height: 20px;
  18.          border-radius: 50%;
  19.          background: lightgreen;
  20.          position: absolute;
  21.          -webkit-animation: load 1.04s ease infinite;
  22.       }
  23.       @-webkit-keyframes load{
  24.          0%{
  25.             -webkit-transform: scale(1.2);
  26.             opacity: 1;
  27.          }
  28.          100%{
  29.             -webkit-transform: scale(.3);
  30.             opacity: 0.5;
  31.          }
  32.       }
  33.       .loadEffect span:nth-child(1){
  34.          left: 0;
  35.          top: 50%;
  36.          margin-top:-10px;
  37.          -webkit-animation-delay:0.13s;
  38.       }
  39.       .loadEffect span:nth-child(2){
  40.          left: 14px;
  41.          top: 14px;
  42.          -webkit-animation-delay:0.26s;
  43.       }
  44.       .loadEffect span:nth-child(3){
  45.          left: 50%;
  46.          top: 0;
  47.          margin-left: -10px;
  48.          -webkit-animation-delay:0.39s;
  49.       }
  50.       .loadEffect span:nth-child(4){
  51.          top: 14px;
  52.          right:14px;
  53.          -webkit-animation-delay:0.52s;
  54.       }
  55.       .loadEffect span:nth-child(5){
  56.          right: 0;
  57.          top: 50%;
  58.          margin-top:-10px;
  59.          -webkit-animation-delay:0.65s;
  60.       }
  61.       .loadEffect span:nth-child(6){
  62.          right: 14px;
  63.          bottom:14px;
  64.          -webkit-animation-delay:0.78s;
  65.       }
  66.       .loadEffect span:nth-child(7){
  67.          bottom: 0;
  68.          left: 50%;
  69.          margin-left: -10px;
  70.          -webkit-animation-delay:0.91s;
  71.       }
  72.       .loadEffect span:nth-child(8){
  73.          bottom: 14px;
  74.          left: 14px;
  75.          -webkit-animation-delay:1.04s;
  76.       }
  77.    </style>
  78. </head>
  79. <body>
  80. <div class="loadEffect">
  89. </div>
  90. </body>
  91. </html>

转载于:https://www.cnblogs.com/janas-luo/p/9605544.html

原文地址：https://blog.csdn.net/weixin_34320159/article/details/94490937?ops_request_misc=&request_id=a05761a87d824a90b16140c604312fda&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-14-94490937-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:sjxi.cn/detil/9603e264a013459aae8061c667322646

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

最新评论
当前未登陆哦
登陆后才可评论哦

    湘ICP备2021009447号

    ×

    (穷逼博主)在线接单

    QQ: 1164453243

    邮箱: abcdsjx@126.com

    前端项目代做
    前后端分离
    Python 爬虫脚本
    Java 后台开发
    各种脚本编写
    服务器搭建
    个人博客搭建
    Web 应用开发
    Chrome 插件编写
    Bug 修复