CSS3特效（1）——loading效果

白色玫瑰 程序猿

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

css3特效
{}
效果一：\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 ...

效果一：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .loading{
         width: 80px;
         height: 40px;
         margin: 0 auto;
         margin-top:100px;
      }
      .loading 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;
         }
      }
      .loading span:nth-child(2){
         -webkit-animation-delay:0.2s;
      }
      .loading span:nth-child(3){
         -webkit-animation-delay:0.4s;
      }
      .loading span:nth-child(4){
         -webkit-animation-delay:0.6s;
      }
      .loading span:nth-child(5){
         -webkit-animation-delay:0.8s;
      }
   </style>
</head>
<body>
<div class="loading">
   
   
   
   
   
</div>
</body>
</html>

效果二：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .loadEffect{
         width: 100px;
         height: 100px;
         position: relative;
         margin: 0 auto;
         margin-top:100px;
      }
      .loadEffect span{
         display: inline-block;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: lightgreen;
         position: absolute;
         -webkit-animation: load 1.04s ease infinite;
      }
      @-webkit-keyframes load{
         0%{
            -webkit-transform: scale(1.2);
            opacity: 1;
         }
         100%{
            -webkit-transform: scale(.3);
            opacity: 0.5;
         }
      }
      .loadEffect span:nth-child(1){
         left: 0;
         top: 50%;
         margin-top:-10px;
         -webkit-animation-delay:0.13s;
      }
      .loadEffect span:nth-child(2){
         left: 14px;
         top: 14px;
         -webkit-animation-delay:0.26s;
      }
      .loadEffect span:nth-child(3){
         left: 50%;
         top: 0;
         margin-left: -10px;
         -webkit-animation-delay:0.39s;
      }
      .loadEffect span:nth-child(4){
         top: 14px;
         right:14px;
         -webkit-animation-delay:0.52s;
      }
      .loadEffect span:nth-child(5){
         right: 0;
         top: 50%;
         margin-top:-10px;
         -webkit-animation-delay:0.65s;
      }
      .loadEffect span:nth-child(6){
         right: 14px;
         bottom:14px;
         -webkit-animation-delay:0.78s;
      }
      .loadEffect span:nth-child(7){
         bottom: 0;
         left: 50%;
         margin-left: -10px;
         -webkit-animation-delay:0.91s;
      }
      .loadEffect span:nth-child(8){
         bottom: 14px;
         left: 14px;
         -webkit-animation-delay:1.04s;
      }
   </style>
</head>
<body>
<div class="loadEffect">
   
   
   
   
   
   
   
   
</div>
</body>
</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

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

最新评论

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

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

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