CSS3一个酷炫的加载效果

简介: 上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的。 CSS代码: .loader{ position: absolute; width: 2.

上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的。

CSS代码:

<style type="text/css">
      .loader{
        position: absolute;
        width: 2.5em;
        height: 2.5em;
        //border: 1px solid rgba(100,156,136,0.15);
        border-radius: 50%;
        //box-shadow: 0 0 0.5em rgba(100,156,136,0.75);
        transform: rotate(165deg);
        animation:rotate 2s infinite;
      }

      @keyframes rotate {
         0%{
             transform: rotate(0deg);
         }
         100%{
             transform: rotate(360deg);
         }
      }

      .loader::before,.loader::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.25em;
        transform: translate(-50%,-50%);
      }

      .loader::before{
        animation: before 2s infinite;
      }

      @keyframes before {
        0%{
          width: 0.5em;
          box-shadow:
          1em -0.5em 0.5em rgba(100,156,136,0.75),
          -1em 0.5em 0.5em rgba(150,120,20,0.75);
        }
        55% {
          width: 2.5em;
          box-shadow:
            0 -0.5em rgba(100,156,136,0.75),
            0 0.5em rgba(150,120,20,0.75);
       }
       70% {
         width: 0.5em;
         box-shadow:
          -1em -0.5em rgba(100,156,136,0.75),
           1em 0.5em rgba(150,120,20,0.75);
       }
       100% {
         box-shadow:
          1em -0.5em rgba(100,156,136,0.75),
          -1em 0.5em rgba(150,120,20,0.75);
       }
      }

      .loader::after{
        animation: after 2s infinite;

      }


    @keyframes after{
      0%{
        height: 0.5em;
        box-shadow:
        -0.5em -1em 0.5em rgba(200,56,36,0.75),
        0.5em 1em 0.5em rgba(50,60,80,0.75);
      }
      55% {
        height: 2.5em;
        box-shadow:
         -0.5em 0 rgba(200,56,36,0.75),
         0.5em 0 rgba(50,60,80,0.75);
     }
     70% {
       height: 0.5em;
       box-shadow:
       -0.5em 1em rgba(200,56,36,0.75),
       0.5em -1em rgba(50,60,80,0.75);
     }
     100% {
       box-shadow:
       -0.5em -1em rgba(200,56,36,0.75),
       0.5em 1em rgba(50,60,80,0.75);
     }
    }
    }
    </style>

HTML:

  <body>
    <div class="loader">

    </div>
  </body>

  

 

目录
打赏
0
0
0
0
2
分享
相关文章
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
53 5
|
4月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
42 2
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总,一共包含126种加载动画效果,不同样式不同图案,简单实用,一览包含所有,会让你在等待的过程中,体验视觉盛宴,给用户不一般的加载体验,欢迎下载试试!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
82 2
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
【CSS】纯css3螺旋状loading加载特效
【CSS】纯css3螺旋状loading加载特效
46 4
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
8月前
|
css特效动画——转圈的加载动画
css特效动画——转圈的加载动画
142 0
|
8月前
|
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
45 0
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
88 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等