CSS ONLY 动画绘制圆与边框半径和透明背景

Posted 2023-03-05

【中文标题】CSS ONLY 动画绘制圆与边框半径和透明背景

【英文标题】：CSS ONLY Animate Draw Circle with border-radius and transparent background

【发布时间】：2015-01-04 14:53:39

【问题描述】：

我正在尝试用边界半径绘制一个圆，并为其设置动画。我可以这样做，但我不能做的是覆盖元素并将圆圈背景设置为透明，而不隐藏蒙版。我无法使其在元素上透明，因为需要应用蒙版来隐藏圆圈的左半部分，因为它旋转以模仿绘制效果。

html

<div class="background">
    <div class="wrapper">
        <div class="pie spinner"></div>
        <div class="pie filler"></div>
        <div class="mask"></div>
    </div>
</div>

CSS

.background
    background:green;
    z-index: 1000;

.wrapper 
  width: 250px;
  height: 250px;
  position: relative;
  margin: 40px auto;
  background: rgba(0,0,255,1);



.wrapper, .wrapper * 
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

.wrapper .pie 
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: transparent;
  border: 5px solid rgba(0,0,0,0.9);


.wrapper .spinner 
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 0;
  border-right: none;
  -webkit-animation: rota 5s linear infinite;


.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask 
  animation-play-state: running;


.wrapper .filler 
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  left: 50%;
  opacity: 0;
  -webkit-animation: opa 5s steps(1, end) infinite reverse;
  border-left: none;


.wrapper .mask 
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  -webkit-animation: opa 5s steps(1, end) infinite;


@-webkit-keyframes rota 
  0% transform: rotate(0deg);border-color:red;
  100% transform: rotate(360deg);z-index:0;

@-webkit-keyframes opa 
  0% opacity: 1;
  50%, 100% opacity: 0;

http://jsfiddle.net/BuzzSmarter/gmvban4p/

在我的示例中，我需要将蓝色背景更改为透明，在开始旋转之前不取消隐藏边框半径。

对不起，这些颜色不是我将要使用的，但提供了一种更清晰的方法来解决这个问题。

这是我的临时产品，我必须移除抽签以实现透明度。 http://jsfiddle.net/BuzzSmarter/gmvban4p/

【问题讨论】：

相关***.com/questions/23385924/…

感谢@NikosM 的建议。但相关问题并没有试图解决我的问题。我需要圆圈的内部是透明的。相关问题未提及背景透明度。

好吧，我认为您可以像该问题中的解决方案一样使用 sth，并在动画圆圈内部添加任何其他内容（因此它覆盖了光盘的背景，仅覆盖了周边可见）

我认为仅使用当前的 css 是不可能的。否则，您可以在 CSS 中使用矢量图形，如 SVG，并在 svg 中为弧线设置动画

【参考方案1】：

这是我的解决方案。

我在 body 上设置了背景以显示它是透明的

body 
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;


html 
  height: 100%;


#container 
  position: absolute;
  width: 400px;
  height: 400px;
   border: solid red 1px;
   animation: colors 4s infinite;


#halfclip 
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
   overflow: hidden;
   transform-origin: left center;
   animation: cliprotate 16s steps(2) infinite;
   -webkit-animation: cliprotate 16s steps(2) infinite;


.halfcircle 
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
   border-top-color: blue;
   border-left-color: blue;
   border-radius: 50%;

#clipped 
  width: 200%;
   animation: rotate 8s linear infinite;
   -webkit-animation: rotate 8s linear infinite;

#fixed 
  width: 100%;
    transform: rotate(135deg);  
   animation: showfixed 16s steps(2) infinite;
   -webkit-animation: showfixed 16s linear infinite;


@-webkit-keyframes cliprotate 
  0% transform: rotate(0deg);
  100% transform: rotate(360deg);


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



@-webkit-keyframes rotate 
  0% transform: rotate(-45deg);
  100% transform: rotate(135deg);


@keyframes rotate 
  0% transform: rotate(-45deg);
  100% transform: rotate(135deg);


@-webkit-keyframes showfixed 
  0% opacity: 0;
  49.9% opacity: 0;
  50% opacity: 1;
 100% opacity: 1;

<div id="container">
    <div id="halfclip">
        <div class="halfcircle" id="clipped">
        </div>
    </div>
    <div class="halfcircle" id="fixed">
    </div>
</div>

这是解决方案的一种变体，使其仅在悬停时运行一次

body 
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;


html 
  height: 100%;


#container 
  position: absolute;
  width: 300px;
  height: 300px;
   border: solid red 1px;


#halfclip 
    width: 50%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;


#container:hover #halfclip 
    animation: cliprotate 6s 1;
    transform: rotate(180deg);
 

@keyframes cliprotate 
  0% transform: rotate(0deg);
  50% transform: rotate(0deg);
  50.01% transform: rotate(180deg);
  100% transform: rotate(180deg);


.halfcircle 
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
   border-top-color: blue;
   border-left-color: blue;
   border-radius: 50%;


#clipped 
    width: 200%;
    transform: rotate(-45deg);

#container:hover #clipped 
    transform: rotate(135deg);
    animation: rotate 3s linear 2;



@keyframes rotate 
  0% transform: rotate(-45deg);
  100% transform: rotate(135deg);



#fixed 
  width: 100%;
    transform: rotate(135deg);  
    opacity: 0;


#container:hover #fixed 
    opacity: 1;
    animation: showfixed 6s 1;




@keyframes showfixed 
  0% opacity: 0;
  49.99% opacity: 0;
  50% opacity: 1;
 100% opacity: 1;

<div id="container">
    <div id="halfclip">
        <div class="halfcircle" id="clipped">
        </div>
    </div>
    <div class="halfcircle" id="fixed">
    </div>
</div>

【讨论】：

正是我想要的。很好奇为什么它没有被标记为答案。

哇，这太棒了，正是我想要的。您将如何只进行一次此运行，并在完成后保持完整的循环？我尝试开发一种使用 javascript 事件侦听器来侦听动画何时完成并相应地旋转半圆以获得完整圆的方法，但我遇到的问题是当事件发生和运行转换的 javascript.... 动画将完成，然后 css 将给出它的初始值，然后一两秒后 javascript 将运行并且圆圈看起来完整

@nyduss 我添加了另一个示例，基于更改容器悬停时的属性，并且只运行一次动画

所以我采取了这一切进一步添加了一些很酷的新功能。我添加了一个轨道和一些按钮来控制使用 jquery 的动画播放状态。这是我正在“摆弄”jsfiddle.net/3hwoxxpp 的所有新内容的链接，抱歉，如果动画不适用于您的浏览器...我只添加了 webkit 动画，因为我有点懒>。

这很棒（我在 codepen 上玩这个，试图了解这里发生了什么）；