css文字填充在圆形边框内,CSS动画圆圈边框填充颜色

﹏ヽ暗。殇╰゛Y 2022-09-02 14:54 192阅读 0赞

SW4..

15

有一个非常容易理解和详细的教程,关于Anders Ingemann如何实现这个(以及更多),可以在这里找到.

它是一个相当复杂的操作 - 所以我只是简单地从教程中提取最后一个阶段

HTML

CSS/LESS

.radial-progress \{

@circle-size: 120px;

@circle-background: \#d6dadc;

@circle-color: \#97a71d;

@inset-size: 90px;

@inset-color: \#fbfbfb;

@transition-length: 1s;

@shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);

margin: 50px;

width: @circle-size;

height: @circle-size;

background-color: @circle-background;

border-radius: 50%;

.circle \{

.mask, .fill, .shadow \{

width: @circle-size;

height: @circle-size;

position: absolute;

border-radius: 50%;

\}

.shadow \{

box-shadow: @shadow inset;

\}

.mask, .fill \{

\-webkit-backface-visibility: hidden;

transition: -webkit-transform @transition-length;

transition: -ms-transform @transition-length;

transition: transform @transition-length;

\}

.mask \{

clip: rect(0px, @circle-size, @circle-size, @circle-size/2);

.fill \{

clip: rect(0px, @circle-size/2, @circle-size, 0px);

background-color: @circle-color;

\}

\}

\}

.inset \{

width: @inset-size;

height: @inset-size;

position: absolute;

margin-left: (@circle-size - @inset-size)/2;

margin-top: (@circle-size - @inset-size)/2;

background-color: @inset-color;

border-radius: 50%;

box-shadow: @shadow;

\}

\}

示例jQuery(可以用CSS代替)

$('head style\[type="text/css"\]').attr('type', 'text/less');

less.refreshStyles();

var transform\_styles = \['-webkit-transform', '-ms-transform', 'transform'\];

window.randomize = function () \{

var rotation = Math.floor(Math.random() \* 180);

var fill\_rotation = rotation;

var fix\_rotation = rotation \* 2;

for (i in transform\_styles) \{

$('.circle .fill, .circle .mask.full').css(transform\_styles\[i\], 'rotate(' + fill\_rotation + 'deg)');

$('.circle .fill.fix').css(transform\_styles\[i\], 'rotate(' + fix\_rotation + 'deg)');

\}

\}

setTimeout(window.randomize, 200);

$('.radial-progress').click(window.randomize);

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 css边框颜色渐变

css边框颜色渐变今儿遇到了一个小小的问题—— 怎么使边框颜色渐变。天秃噜，又是一个知识盲点，不碍事，遇山开山，遇海填海。解决问题就完了。百度可真是个好东

本是古典何须时尚/ 2023年02月10日 05:30/ 0 赞/ 222 阅读

相关 CSS 边框颜色

CSS 边框颜色 <!DOCTYPE html> <html> <head> <style> p.one { border-style:

梦里梦外;/ 2022年11月13日 04:27/ 0 赞/ 248 阅读

相关 CSS 边框

CSS 边框 ![在这里插入图片描述][20210325175954268.gif] > CSS 边框样式 > border-style 属性指定要显示的边框类型。

灰太狼/ 2022年11月13日 04:26/ 0 赞/ 206 阅读

相关 CSS3 新增属性（边框，背景，文字，颜色属性）

CSS3 新增属性边框属性背景属性文字属性颜色属性 > 1. 边框属性 <table> <thead> <tr>

秒速五厘米/ 2022年10月13日 01:46/ 0 赞/ 252 阅读

相关 css3边框颜色渐变

前言边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：

秒速五厘米/ 2022年09月11日 00:27/ 0 赞/ 258 阅读

相关内边框外边框 css,CSS之外边框与内边框hover伪类效果

嗯，这是一个高大上的标题。对于一个前端人员特别是我这种侧重物业重构的来说，hover肯定不会陌生，通俗一点而言就是鼠标放上去之后有那么一丁点小效果(修改CSS样式)，至于是

小鱼儿/ 2022年09月02日 14:56/ 0 赞/ 286 阅读

相关 css文字填充在圆形边框内,CSS动画圆圈边框填充颜色

SW4.. 15 有一个非常容易理解和详细的教程,关于Anders Ingemann如何实现这个(以及更多),可以在这里找到. 它是一个相当复杂的操作 - 所以我只是简单

﹏ヽ暗。殇╰゛Y/ 2022年09月02日 14:54/ 0 赞/ 193 阅读

相关【CSS】边框

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

淩亂°似流年/ 2022年04月01日 02:51/ 0 赞/ 359 阅读

相关 css边框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2021年12月11日 02:23/ 0 赞/ 417 阅读

相关 CSS边框

边框每个边框有 3 个方面：宽度、样式，以及颜色。 ![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc

雨点打透心脏的1/2处/ 2021年10月19日 10:18/ 0 赞/ 470 阅读