程序员经验分享-hwhale

仅 CSS 动画绘制具有边框半径和透明背景的圆

2023-12-02

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

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/


这是我的解决方案。

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

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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

Animation

jsFiddle

仅 CSS 动画绘制具有边框半径和透明背景的圆 的相关文章

  • 可以将position:absolute元素设为粘性吗？

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st

  • 如何从右向左缩放按钮，android动画

    要将从左到右的缩放应用于按钮 我使用了以下代码 我的按钮位于布局的右侧 我希望按钮应该从右侧 X 位置开始并缩放到左侧 X 位置 如何实现这一点 view startAnimation new ScaleAnimation 0 0f 1 0

  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地

  • 在 Android 上禁用标注（上下文菜单）

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在

  • 如何使自定义 Web 组件可聚焦？

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信

  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b

  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga

  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass

  • 将 XSL-FO 转换为 HTML

    我有一组用于 PDF 生成的 XSL FO 文档 我还需要将相同的输出数据 PDF 格式 导出为 HTML 文件 此外 我需要 HTML 具有与 PDF 类似的样式 有没有办法使用 C 将 XSL FO 转换为 XHTML NOTE 我知道

  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50

  • 导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包

  • 如何使用 Scrapy 从网站获取所有纯文本？

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext

  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent

  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使

  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象？

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

  • 禁用允许文本选择的？

    残疾人可以吗

随机推荐

  • 如何处理在分离头中进行的提交

    使用 git 我做了这样的东西 git clone git checkout a rev number tree rev before here I started to be in a detached head state hackin

  • WebSQL：SQLResultSetRowList 中返回的行是否不可变？

    我一直在从 WebSQL 数据库中获取行 并且返回的行似乎是只读的 db readTransaction function t1 t1 executeSql SELECT FROM Foo WHERE id 1 function t2 re

  • React useEffect 抛出错误：无法对已卸载的组件执行 React 状态更新

    我正在为我的 Spotify API 应用程序使用 React Native 当我想从我的服务器获取数据时axios in useEffect因为我想在组件加载时渲染返回的项目 它会抛出错误 Can t perform a React st

  • 嵌入式redis无法启动-ERR不支持的CONFIG参数：notify-keyspace-events

    我使用的是embedded redis 0 6版本和spring session data redis 1 0 1 RELEASE 使用 mvn spring boot run 命令执行 spring boot 之后 tomcat 服务器启

  • AJAX + jQuery 变量不会传递给 PHP

    我正在尝试做一些非常简单的事情 将 2 个文本变量传递给 php 脚本并将它们插入到 MySQL 数据库中 然而 由于某种原因 我无法让变量传递 所以我只是在数据库中得到空记录 function ajaxCall ajax type GET

  • 循环遍历具有冒号分隔字符串的文件

    我有一个如下所示的文件 work week day england work1 week day sweden work2 week day 每次我循环遍历列表时 我都想将每个字符串作为我可以使用的变量 例如 如果我想知道我在哪个位置工作

  • C++ 指针算术怪异

    我发现了我的错误 几个小时后 并将其隔离在以下程序中 问题在于使用指向结构的指针时计算 pst2 变量值的方式 当使用指向 char 的指针时 一切正常 为什么是这样 使用gcc g 版本 Debian 4 4 5 8 4 4 5 对于那些

  • clang-format 使用指示符删除数组定义中的新行

    如果可能的话 我喜欢用指示符定义数组值 enum Mode NONE SPLIT FILES SINGLE FILE INVALID const std string ModeName NONE NONE SPLIT FILES SPLIT

  • 确定 HTML5 数据库内存使用情况

    我正在向我的 Google Chrome 扩展添加 sqlite 支持 以存储历史数据 创建数据库时 需要设置最大大小 我使用了5MB 正如许多示例中建议的那样 我想知道我实际使用了多少内存 例如添加 1000 条记录后 以了解何时达到 5

  • ASP.NET MVC 控制器生命周期

    据我了解 在每个 Web 请求期间不会调用控制器的构造函数 假设这是真的 那么控制器的生命周期是多少 是在应用程序启动时 构造 的 然后通过每个 Web 请求注入的请求上下文进行缓存和调用吗 需要明确的是 我并不是在问如何模拟构造函数行为

  • 使用 Symbolserver 调试 ASP.NET MVC4 的夜间构建

    我使用此描述为我的项目获取 ASP NET MVC 的夜间构建 http blogs msdn com b henrikn archive 2012 06 01 using nightly asp net web stack nuget p

  • Angular2：进度/加载覆盖指令

    我正在尝试在 Angular2 中创建一个加载指示器 覆盖层 我可以将其添加到任何容器 div 中 当动态布尔属性如isLoading更改时 它应该使 div 变灰并显示旋转指示器 并在属性更改回来后再次消失 我得到了一个可行的解决方案 C

  • python requests.get() 返回一个空字符串

    当我运行下面的代码时 它返回一个空字符串 url http www allflicks net wp content themes responsive processing processing us php draw 5 columns

  • 使用 pandoc 将 markdown 转换为 pdf 时如何强制将图像转换为文本

    我制造了一个GitHub 维基百科 软件包手册 我想将其转换为精美的 pdf 手册 然而 我在处理图表时遇到了一些麻烦 其中许多图表都放在接下来的一页中 远远落后于文本中应有的位置 这使得文档非常难以阅读 为此 我基本上遵循了建议here

  • 检查输入是否为整数

    为了学习 C 我正在翻译我用 Python 编写的程序 我写了这个 n 0 while n lt 2 try n int raw input Please insert an integer bigger than 1 except Val

  • Java：计算三角形的面积

    import java lang Math import java awt public class Triangle implements Shape java awt Point a java awt Point b java awt

  • 如何在邮件服务器上的 HTML 电子邮件中嵌入图像？

    如何在 HTML 中嵌入图像 以便图像与 html 文件内容一起传递 而不需要单独访问服务器来检索图像 我们需要它在签名离开邮件服务器之前将公司徽标嵌入到签名中 我们不想使用雷鸟或 Outlook 等客户端解决方案来添加签名 thanks

  • Google 身份服务 - 保持登录状态

    我正在从 Google 登录平台库迁移到新的 Google 身份服务使用一键登录 但当用户刷新或转到其他页面时 网站会自动注销用户 这是加载一键登录的每个页面上都存在的代码 div div 删除它只会让用户退出 无法重新登录 有一个cook

  • Google App Engine - 如何扩展 db.IntegerProperty

    当我在整数和字符串之间交换很多时 我希望扩展 db IntegerProperty 以下是一些代码片段和我在应用程序启动器日志中收到的错误消息 有什么指点吗 谢谢 大卫 class FSIdProperty db IntegerProper

  • 仅 CSS 动画绘制具有边框半径和透明背景的圆

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

热门标签