Livid
288.98D
531.47D
V2EX  ›  CSS

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

  •  
  •   Livid ·
    PRO
    · Jul 4, 2012 · 10093 views
    This topic created in 5093 days ago, the information mentioned may be changed or developed.
    27 replies    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
       Jul 4, 2012
    这个。必须有个canvas.. 不然真没办法做出个扇形...
    cutehalo
        2
    cutehalo  
       Jul 4, 2012   ❤️ 1
    cutehalo
        3
    cutehalo  
       Jul 4, 2012
    benzhe
        4
    benzhe  
       Jul 4, 2012
    http://nipponcolors.com 打开右侧的 On 后,左侧的颜色环在切换颜色的时候会有 CSS 动画
    Mak
        5
    Mak  
       Jul 4, 2012
    用 transform: matrix(......); 可以畫一個一角指向圓心的菱形,然後圓外面到部分用遮罩蓋起來就可以了。

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

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

    http://jsfiddle.net/ben304/JZnD2/
    zythum
        23
    zythum  
       Jul 5, 2012
    good job
    benzhe
        24
    benzhe  
       Jul 5, 2012
    @zythum 做了这么个东西深切体会到什么是山寨:样子有点像,可就是没有任何美感,动画也不顺畅...
    zythum
        25
    zythum  
       Jul 5, 2012
    这个只是个实现过程。不能说是山寨... 样子什么的是设计。 动画流畅么.那就要动脑子了...
    benzhe
        26
    benzhe  
       Jul 5, 2012
    @zythum 呃,我在说我做的那个...我说话才不会这么不客气...
    zythum
        27
    zythum  
       Jul 5, 2012
    @benzhe ...话说我那个样子还不如你那个呢... ^ ^
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1376 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 16:49 · PVG 00:49 · LAX 09:49 · JFK 12:49
    ♥ Do have faith in what you're doing.