V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Livid
V2EX  ›  CSS

像这样的圆环进度图形,如果纯用 CSS 来实现,大家有什么好思路么?

  •  
  •   Livid · 2012-07-04 17:18:00 +08:00 · 9426 次点击
    这是一个创建于 4523 天前的主题,其中的信息可能已经有所发展或是发生改变。
    27 条回复    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
       2012-07-04 17:38:22 +08:00
    这个。必须有个canvas.. 不然真没办法做出个扇形...
    cutehalo
        2
    cutehalo  
       2012-07-04 17:41:27 +08:00   ❤️ 1
    cutehalo
        3
    cutehalo  
       2012-07-04 17:46:36 +08:00
    benzhe
        4
    benzhe  
       2012-07-04 17:50:34 +08:00
    http://nipponcolors.com 打开右侧的 On 后,左侧的颜色环在切换颜色的时候会有 CSS 动画
    Mak
        5
    Mak  
       2012-07-04 17:57:48 +08:00
    用 transform: matrix(......); 可以畫一個一角指向圓心的菱形,然後圓外面到部分用遮罩蓋起來就可以了。

    麻煩的是遮罩層的邊框必須用圖片才能實現最外面哪個上黑下白漸變的「圓邊框」。
    zythum
        6
    zythum  
       2012-07-04 18:01:49 +08:00
    @benzhe 我懂了。用蒙板加旋转,还要做成左右两边的。等下有空做个demo
    zythum
        7
    zythum  
       2012-07-04 18:05:25 +08:00
    突然一想,貌似不用蒙板也能做。 吃完饭做个demo
    zythum
        8
    zythum  
       2012-07-04 18:07:57 +08:00
    @Mak 这个办法不好。只能做凸多边型,如果大于180度就不行了。
    benzhe
        9
    benzhe  
       2012-07-04 18:18:58 +08:00
    @Mak 可以用 radial-gradient
    yqrm
        10
    yqrm  
       2012-07-04 18:27:53 +08:00
    @cutehalo http://tutorialzine.com/ 这个站很不错,收藏了,感谢
    zythum
        11
    zythum  
       2012-07-04 18:30:16 +08:00
    radial-gradient 是做圆心向外这么个方向的渐变是做不错扇形的。
    bitsmix
        12
    bitsmix  
       2012-07-04 18:47:51 +08:00   ❤️ 1
    911
        13
    911  
       2012-07-04 19:00:42 +08:00   ❤️ 1
    houkanshan
        14
    houkanshan  
       2012-07-04 19:23:51 +08:00
    zythum
        15
    zythum  
       2012-07-04 19:43:50 +08:00
    @houkanshan 和我实现实现的方式类似。但是用两个拼的话css transition怎么做过度呢。只能用js setTimeout或者祯动画做过度了
    houkanshan
        16
    houkanshan  
       2012-07-04 19:49:25 +08:00
    @zythum 嗯,原作者就是setTimeout过度的,实际上他的rotate都是setInterval控制的。。。
    如果能用帧动画就更好了
    benzhe
        17
    benzhe  
       2012-07-04 19:54:53 +08:00
    @zythum 抱歉误解了 @Mak 的意思,不过 border 的问题可以用 line-gradient 的 background 和 border-radius 解决。
    我也尝试在做 DEMO, 不过卡住了,因为发现进度条首尾也有小渐变,看来不用图片不行了?
    endintro
        18
    endintro  
       2012-07-04 20:02:48 +08:00
    http://css-tricks.com/examples/ShapesOfCSS/ 里的Pac-Man + css3 transform rotate?
    zythum
        19
    zythum  
       2012-07-04 20:08:04 +08:00   ❤️ 2
    http://zythum.free.bg/circlerange/

    纯css实现了,没图片,没用canvas。但是没做过度动画。等下整理下做个以后可以扩展的
    zythum
        20
    zythum  
       2012-07-04 20:17:29 +08:00
    @benzhe 可以不通图片的。你看下我写的demo就可以了。
    @houkanshan 看看能不能做个大小可以自适应的样式
    benzhe
        21
    benzhe  
       2012-07-05 00:52:22 +08:00
    @zythum 洗完澡我也做了一个 http://jsfiddle.net/DcYAb/
    benzhe
        22
    benzhe  
       2012-07-05 00:56:51 +08:00   ❤️ 1
    上一个没保存....

    http://jsfiddle.net/ben304/JZnD2/
    zythum
        23
    zythum  
       2012-07-05 01:11:13 +08:00
    good job
    benzhe
        24
    benzhe  
       2012-07-05 01:18:08 +08:00
    @zythum 做了这么个东西深切体会到什么是山寨:样子有点像,可就是没有任何美感,动画也不顺畅...
    zythum
        25
    zythum  
       2012-07-05 01:58:59 +08:00
    这个只是个实现过程。不能说是山寨... 样子什么的是设计。 动画流畅么.那就要动脑子了...
    benzhe
        26
    benzhe  
       2012-07-05 02:18:56 +08:00
    @zythum 呃,我在说我做的那个...我说话才不会这么不客气...
    zythum
        27
    zythum  
       2012-07-05 03:40:40 +08:00
    @benzhe ...话说我那个样子还不如你那个呢... ^ ^
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5295 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 01:25 · PVG 09:25 · LAX 17:25 · JFK 20:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.