一、Css3 实现全圆进度条展示功能1

<style>
    .block {
        width: 200px;
        height: 200px;
        background: rgb(247, 49, 49);
        position: relative;
        border-radius: 50%;
    }

    .block>.block {
        position: absolute;
    }

    .block2 {
        clip: rect(0, 100px, auto, auto);
        background: #aaa;
    }

    .block3 {
        background: #aaa;
        clip: rect(0, auto, auto, 100px);
        transform: rotate(45deg);
    }
</style>

<div class="block block1">
    <div class="block block2"></div>
    <div class="block block3"></div>
</div>

<script>
    $(function () {
        var percent = 60;
        var baseColor = $('.block').css('background-color');
        if (percent <= 50) {
            $('.block3').css('transform', 'rotate(' + (percent * 3.6) + 'deg)');
        } else {
            $('.block3').css({
                'transform': 'rotate(0deg)',
                'background-color': baseColor
            });
            $('.block2').css('transform', 'rotate(' + ((percent - 50) * 3.6) + 'deg)');
        }
    })
</script>

二、Css3 实现全圆进度条展示功能2

<style>
    /*支持IE9及以上*/
    .circle-bar {
        font-size: 200px;
        width: 1em;
        height: 1em;
        position: relative;
        background-color: rgb(247, 47, 47);
    }

    .circle-bar-left,
    .circle-bar-right {
        width: 1em;
        height: 200px;
        background-color: #ddd;
    }

    /*
    这里采用clip剪切了圆,实现左右两个半圆,右半圆在后面,因此在更上一层,
    clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
    */
    .circle-bar-right {
        clip: rect(0, auto, auto, 0.5em);
    }

    .circle-bar-left {
        clip: rect(0, 0.5em, auto, 0);
    }

    .mask {
        width: 0.8em;
        height: 0.8em;
        background-color: #fff;
        text-align: center;
        line-height: 0.2em;
        color: rgba(0, 0, 0, 0.5);
    }

    .mask :first-child {
        font-size: 0.3em;
        height: 0.8em;
        line-height: 0.8em;
        display: block;
    }

    /*所有的后代都水平垂直居中,这样就是同心圆了*/
    .circle-bar * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    /*自身以及子元素都是圆*/
    .circle-bar,
    .circle-bar>* {
        border-radius: 50%;
    }
</style>
<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <!-- 遮罩层,显示百分比 -->
    <div class="mask">
        <span class="percent">30%</span>
    </div>
</div>

<script>
    $(function () {
        var percent = parseInt($('.mask :first-child').text());
        var baseColor = $('.circle-bar').css('background-color');
        if (percent <= 50) {
            $('.circle-bar-right').css('transform', 'rotate(' + (percent * 3.6) + 'deg)');
        } else {
            $('.circle-bar-right').css({
                'transform': 'rotate(0deg)',
                'background-color': baseColor
            });
            $('.circle-bar-left').css('transform', 'rotate(' + ((percent - 50) * 3.6) + 'deg)');
        }
    })
</script>

 

更多:

CSS3 圆环旋转效果

Css 实现半圆进度条展示功能 

Css3 实现循环留言滚动效果(一) 

 

转载请注明出处:http://www.yutianjidian.com/article/20230526/621416.html

随机推荐

  1. CSS3实现10种Loading效果

    用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记 第1种效果: 代码如下: XML/HTML Code复制内容到剪贴板 divclass=loading span/s...

  2. CSS3实现酷炫的3D旋转透视效果

    CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D...

  3. CSS3 实现的火焰动画

    实现效果 实现代码 html div class=container div class=red flame/div div class=orange flame/div div class=yellow flame/d...

  4. CSS3 实现的图片悬停的切换按钮

    实现效果: 实现代码 html ul class=slides input type=radio name=radio-btn id=img-1 checked / li class=slide-container ...

  5. CSS3 实现弹跳的小球动画

    平时喜欢逛各大网站的专题版面,或者产品发布页面,因为可以看到很多炫酷的页面效果。这个案例的素材来自于百度浏览器的发布页面,以及下一个案例变色龙动画都是来自于百度浏览器,虽然我是谷歌浏览器的忠实用户,但是不得不说国内互联网行业知名品牌网站的...

  6. CSS3实现银灰色动画效果的导航菜单代码

    本文实例讲述了CSS3实现银灰色动画效果的导航菜单代码。分享给大家供大家参考。具体如下: 这是一款使用CSS3技术实现的导航菜单,欢迎大家参考,使用了几张背景图片,使用时请按路径扒下来就可以了。 运行效果截图如下: 在线演示地址如下: ...

  7. css3实现input输入框颜色渐变发光效果代码

    给边框实现单击颜色渐变效果,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果。 在继续学习之前,你必须要有一些Css3的基础知识。做出这一切需要你了解CSS3的Shadow和RGBa、Tr...

  8. css3实现简单的白云飘动背景特效

    这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云,以不同的速度进行运动,形成白云飘动的效果。 HTML结构 该白云飘动特效的HTML结果非常简单,使用一个div来包裹一组作为...

  9. css3实现一个div设置多张背景图片及background-image属性实例演示

    引子 以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了一个div只能设置一个背景的问题,使一个di...

  10. CSS3 实现NES游戏机的示例代码

    实现效果 实现代码 html input type=radio name=nes-size id=size1 label for=size1 class=size1 /label input type=radio name=nes-...