css3 圆圈怎么加载数据从1%-100%

Posted 2023-04-04

html代码

HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：

<div class="wrapper">
 <div class="load-bar">
   <div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
 </div>
 <h1>Loading</h1>
 <p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>

CSS样式表

接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：

.load-bar-inner
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10s linear infinite;

运行效果：

参考技术A <style type="text/css">
.content
width:100px;
height:100px;
border-radius:100px;
border:1px solid #f00;

</style>

<div class="content"></div>
</body>

使用 CSS3 动画扩展圆圈

【中文标题】使用 CSS3 动画扩展圆圈

【英文标题】：Expanding circles with CSS3 animations

【发布时间】：2012-03-08 09:42:44

【问题描述】：

我正在尝试使它在页面加载时出现圆圈，这很好，但我需要它们向外增长，从中心而不是从左上角从小到大：

你可以在这里看到我目前拥有的：http://thomasbritton.co.uk/projects/ebrd/

理想情况下，希望在 CSS 中完成，但如果它更容易/更稳定，则可以使用 JS。

有什么想法吗？

这也是我的动画部分的 css：

.circle a 
  border-radius: 150px;
  color: #fff;
  height: 0;
  position: absolute;
  text-decoration: none;
  width: 0;


.circle a.grow 
  -webkit-animation-name: grow;
  -webkit-animation-duration: 2.2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: grow;
  -moz-animation-duration: 2.2s;
  -moz-animation-timing-function: ease;
  -moz-animation-iteration-count: 1;    
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;

  animation-name: grow;
  animation-duration: 2.2s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: running;
  animation-fill-mode: forwards;


@-webkit-keyframes grow 
  0%  -moz-transform: scale(0); 
  100%  -moz-transform: scale(1); 


@-moz-keyframes grow 
  0%  -moz-transform: scale(0); 
  100%  -moz-transform: scale(1); height: 168px; width: 168px; 


@keyframes grow 
  0%  -moz-transform: scale(0); 
  100%  -moz-transform: scale(1); 

【问题讨论】：

我可以看到他们在成长，但他们没有 fixzd 中心。

@sinsedrix 如何应用固定中心？

您需要制作圆圈position: relative 并为其top 和left 属性以及宽度和高度设置动画。另外，给非 Firefox 用户的注意事项：使用 Firefox 来查看完整效果。

在 chrome 17.0.963.56 中不起作用

我的链接是404。

【参考方案1】：

您不必为您的案例使用 Jquery 或 Javascript，您可以使用纯 CSS 来实现。

不要在动画 div 上使用 position 属性。这会导致你的动画滞后。而是对高性能动画使用转换。

<div class="circle__wrapper">
  <a class="circle" href="#"></a>
</div>

/* circle__wrapper will help you to position the div in the center of the page */
.circle__wrapper  
  position: fixed; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 


.circle__wrapper a.circle  
  display:block; 
  height: 168px; 
  width: 168px; 
  background-color: #fea733; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  -webkit-animation: growUp 2s 1.5s; /* You can remove 1.5s if you don't want delay */
  -moz-animation: growUp 2s 1.5s; 
  -ms-animation: growUp 2s 1.5s; 
  -o-animation: growUp 2s 1.5s; 
  animation: growUp 2s 1.5s; 



@-webkit-keyframes growUp    
  0%   -webkit-transform: scale(0); 
  100%  -webkit-transform: scale(1); 


@-moz-keyframes growUp 
  0%   -moz-transform: scale(0); 
  100%  -moz-transform: scale(1); 


@-o-keyframes growUp 
  0%   -o-transform: scale(0); 
  100%  -o-transform: scale(1); 


@-ms-keyframes growUp 
  0%   -ms-transform: scale(0); 
  100%  -ms-transform: scale(1); 


@keyframes growUp 
  0%   transform: scale(0); 
  100%  transform: scale(1); 

希望这会有所帮助。

【参考方案2】：

以防万一有人正在寻找有效的 jQuery 解决方案，这里是...

HTML

<div class=circle1></div>

CSS

.circle1 
    position:absolute; top:50px; left:50px;
    width: 0px; height: 0px;
    border:1px solid red;
    padding:20px;
    border-radius:50%;

JS

$(".circle1").mouseover(function() 
      $(this).animate(top:"0", left:"0", width:"100px", height:"100px", opacity: 0, 200);  
).mouseout(function() 
      $(this).animate(top:"50px", left:"50px", width:"0", height:"0", opacity: 1, 200);
);

这里是演示 - http://jsbin.com/esiLULEb/1/

【参考方案3】：

这是您需要做的一个粗略示例：jsfiddle.net/UxtJV/。它使用一点 JS 来添加一个类来为圆圈设置动画。它的width、height、top 和left 属性是动画的，并被赋予position: relative。

div.circle 
    position: relative;

    width: 0px;
    height: 0px;
    top: 50px;
    left: 50px;

    -webkit-transition-duration: 2s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-in-out;

    text-align: center;
    background: red;
    color: white;
    border-radius: 100%;
    padding: 20px;
    overflow: hidden;


div.circle.open 
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
​

【参考方案4】：

您可以尝试将动画与翻译属性结合起来。

这可能是另一种选择：

transform-origin: top right; /* 50% 50% or whatever*/

如发布的here...

【讨论】：

这看起来应该可以工作，但似乎没有做任何事情。尝试在选择器中放入动画帧和标准选项

【参考方案5】：

为此，您的动画应涉及：

增加宽度和高度。 增加顶部和左侧。

这是一项工作，但它会完全按照您的要求进行。