您现在的位置是：网站首页> 编程资料编程资料

实例教程 纯CSS3打造非常炫的加载动画效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-24 312人已围观

简介 这篇文章主要为大家介绍了一款非常炫的加载图，代码非常简单。没有用任何javascript代码。纯css3实现。用在需要一定时间加载的地方非常合适，感兴趣的可以来复制代码学习哦

　　纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图：

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="content">  
  2.        <div style="width: 970px; margin: auto">  
  3.        div>  
  4.        <div class="rotate">  
  5.            <span class="triangle base">span><span class="triangle no1">span><span class="triangle no2">  
  6.            span><span class="triangle no3">span>  
  7.        div>  
  8.    div>  

　　CSS代码：

CSS Code复制内容到剪贴板
  1. body {   
  2.     padding:0;   
  3.     margin:0;      
  4.     background-color: #2a4e66;   
  5.   overflow: hidden;   
  6. }   
  7.   
  8. .content {   
  9.     width:100%;   
  10.     height:100%;   
  11.     top:0;   
  12.     rightright:0;   
  13.     bottombottom:0;   
  14.     left:0;   
  15.     position:absolute;   
  16. }   
  17.   
  18. .rotate {   
  19.     position: absolute;   
  20.     top: 50%;   
  21.     left: 50%;   
  22.     margin: -93px 0 0 -93px;   
  23.     background: transparent;   
  24.     width: 186px;   
  25.     height: 186px;   
  26.     border-radius: 50%;   
  27.     z-index: 20;   
  28. }   
  29.   
  30. .rotate:after {   
  31.     content: '';       
  32.     position: absolute;   
  33.     box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;   
  34.     width: 186px;   
  35.     height: 186px;   
  36.     border-radius: 50%;   
  37.     z-index: 10;   
  38. }   
  39.   
  40. span.triangle.base {   
  41.     position: absolute;   
  42.     width: 0;    
  43.     height: 0;   
  44.     margin: 46px 0 0 13px;   
  45.     border-left: 80px solid transparent;   
  46.     border-right: 80px 

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网