CSS ONLY Animate Draw Circle with border-radius and透明背景 [英] CSS ONLY Animate Draw Circle with border-radius and transparent background

查看：42
本文介绍了CSS ONLY Animate Draw Circle with border-radius and透明背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML

<div class="wrapper"><div class="pie spinner"></div><div class="馅饼填料"></div><div class="mask"></div>

CSS

.background{背景:绿色；z-索引:1000；}.包装{宽度:250px；高度:250px；位置:相对；边距:40px 自动；背景:RGBA(0,0,255,1)；}.wrapper, .wrapper * {-moz-box-sizing: 边框框；-webkit-box-sizing: 边框框；box-sizing: 边框框；}.wrapper .pie {宽度:50%；高度:100%；变换原点:100% 50%；位置:绝对；背景:透明；边框:5px 实心 rgba(0,0,0,0.9)；}.wrapper .spinner {边界半径:100% 0 0 100%/50% 0 0 50%；z-索引:0；边界右:无；-webkit-animation:旋转 5s 线性无限；}.wrapper: 悬停 .spinner,.wrapper: 悬停 .filler,.wrapper:hover .mask {动画播放状态:运行；}.wrapper .filler {边界半径:0 100% 100% 0/0 50% 50% 0；左:50%；不透明度:0；-webkit-animation: opa 5s steps(1, end) 无限反转；左边界:无；}.wrapper .mask {宽度:50%；高度:100%；位置:绝对；背景:继承；不透明度:1；-webkit-animation: opa 5s steps(1, end) 无限；}@-webkit-keyframes 旋转 {0% {变换:旋转(0度)；边框颜色:红色；}100% {变换:旋转(360度)；z-index:0；}}@-webkit-keyframes opa {0% {不透明度:1;}50%, 100% {不透明度:0;}}

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

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

请原谅颜色，这些不是我将要处理的，但提供了一个更清晰的方法来解决这个问题.

这是我的临时产品，我必须去除绘图才能实现透明度.http://jsfiddle.net/BuzzSmarter/gmvban4p/

解决方案

这是我的解决方案.

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

body {背景:重复线性渐变(45 度，白色 0 像素，浅蓝色 100 像素)；高度:500px；背景尺寸:500px 500px；背景重复:不重复；}html {高度:100%；}#容器 {位置:绝对；宽度:400px；高度:400px；边框:纯红色1px；动画:颜色 4s 无限；}#halfclip {宽度:50%；高度:100%；右:0px；位置:绝对；溢出:隐藏；变换原点:左中心；动画:cliprotate 16s steps(2) 无限；-webkit-animation:cliprotate 16s steps(2) 无限；}.半圆{box-sizing: 边框框；高度:100%；右:0px；位置:绝对；边框:实心25px透明；边框顶部颜色:蓝色；边框左颜色:蓝色；边界半径:50%；}#剪辑{宽度:200%；动画:旋转8s线性无限；-webkit-animation: 旋转 8s 线性无限；}#固定的 {宽度:100%；变换:旋转(135度)；动画:showfixed 16s step(2)无限；-webkit-animation:显示固定的 16 秒线性无限；}@-webkit-keyframes 剪辑{0% {变换:旋转(0度)；}100% {变换:旋转(360度)；}}@keyframes 剪辑{0% {变换:旋转(0度)；}100% {变换:旋转(360度)；}}@-webkit-keyframes 旋转 {0% {变换:旋转(-45度)；}100% {变换:旋转(135度)；}}@关键帧旋转{0% {变换:旋转(-45度)；}100% {变换:旋转(135度)；}}@-webkit-keyframes showfixed {0% {不透明度:0;}49.9% {不透明度:0;}50% {不透明度:1;}100% {不透明度:1;}}

<div id="halfclip"><div class="halfcircle" id="clipped">

<div class="halfcircle" id="fixed">

这是解决方案的一个变体，让它在悬停时只运行一次

body {背景:重复线性渐变(45 度，白色 0 像素，浅蓝色 100 像素)；高度:500px；背景尺寸:500px 500px；背景重复:不重复；}html {高度:100%；}#容器 {位置:绝对；宽度:300px；高度:300px；边框:纯红色1px；}#halfclip {宽度:50%；高度:100%；右:0px；位置:绝对；溢出:隐藏；变换原点:左中心；}#container:hover #halfclip {动画:cliprotate 6s 1；变换:旋转(180度)；}@keyframes 剪辑{0% {变换:旋转(0度)；}50% {变换:旋转(0度)；}50.01% {变换:旋转(180度)；}100% {变换:旋转(180度)；}}.半圆{box-sizing: 边框框；高度:100%；右:0px；位置:绝对；边框:实心25px透明；边框顶部颜色:蓝色；边框左颜色:蓝色；边界半径:50%；}#剪辑{宽度:200%；变换:旋转(-45度)；}#container:hover #clipped {变换:旋转(135度)；动画:旋转 3s 线性 2；}@关键帧旋转{0% {变换:旋转(-45度)；}100% {变换:旋转(135度)；}}#固定的 {宽度:100%；变换:旋转(135度)；不透明度:0；}#container:hover #fixed {不透明度:1；动画:showfixed 6s 1；}@keyframes 显示固定 {0% {不透明度:0;}49.99% {不透明度:0;}50% {不透明度:1;}100% {不透明度:1;}}

<div id="halfclip"><div class="halfcircle" id="clipped">

<div class="halfcircle" id="fixed">

I am trying to draw a circle with border-radius, and animate it. I can do this, but what i can't do is overlay elements and set the circles background to transparent, without unhiding the mask. I am not able to make it transparent over elements because the mask needs to be applied to hide the left half of the circle as it rotates to mimic the draw effect.

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/

In my example, I need to change the blue background to transparent, without unhiding the border-radius before it starts rotating.

Excuse the colors, these are not what I will be working with, but provide a clearer approach to the issue.

This is my temporary product where I have to remove the draw to accomplish the transparency. http://jsfiddle.net/BuzzSmarter/gmvban4p/

解决方案

This is my solution.

I set a background on body to show it is transparent

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>

And this is a variation on the solution, to make it run only once on hover

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>

这篇关于CSS ONLY Animate Draw Circle with border-radius and透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆