zoukankan      html  css  js  c++  java
  • 【css3】旋转倒计时

    很多答题的H5界面上有旋转倒计时的效果,一个不断旋转减少的动画,类似于下图的这样。

    今天研究了下,可以通过border旋转得到。一般我们可以通过border得到一个四段圆。

    See the Pen circle by stoneniqiu (@stoneniqiu) on CodePen.

     接下来接可以通过旋转的方式形成一个倒计时的效果:

    See the Pen circle-rotate by stoneniqiu (@stoneniqiu) on CodePen.

     一开始旋转45度是为了让半圆刚好立起来。然后旋转一百八十度。

      .rightcircle{
                    border-top: .4rem solid #8731fd;
                    border-right: .4rem solid #8731fd;
                    right: 0;
                    transform: rotate(45deg)
                }
     .right_cartoon {
                    -webkit-animation: circleProgressLoad_right 10s linear infinite forwards;
                    animation: circleProgressLoad_right 10s linear infinite forwards;
                }
     @keyframes circleProgressLoad_right {
                    0% {
                        -webkit-transform: rotate(46deg);
                        transform: rotate(46deg)
                    }
                    50%,to {
                        -webkit-transform: rotate(-136deg);
                        transform: rotate(-136deg)
                    }
                }

    毕竟不是真正的减少,要出现一种颜色占大多数就可以通过两个半圆来拼凑。

    See the Pen circle-timer by stoneniqiu (@stoneniqiu) on CodePen.

     @keyframes circleProgressLoad_left {
                    0%,50% {
                        -webkit-transform: rotate(46deg);
                        transform: rotate(46deg)
                    }
                
                    to {
                        -webkit-transform: rotate(-136deg);
                        transform: rotate(-136deg)
                    }
                }

    注意到是右边线转5秒,然后左边再等五秒,这里css动画的效果略有不同,右边是0%开始,50%,to。左边是0%,50%,然后to,这样实现的5秒等待。这就是旋转倒计时的效果,最后还可以通过修改左半环border-left的颜色,来凸显最后几秒钟的紧急情况。

  • 相关阅读:
    JAVA规范
    JMS开发指南
    JMS异步消息机制
    大型系统中使用JMS优化技巧–Sun OpenMQ
    02.MyBatis配置文件详解
    elasticsearch.yml配置文件
    04.ActiveMQ与Spring JMS整合
    01.MyBatis入门
    03.JMS深入
    02.JMS基础
  • 原文地址:https://www.cnblogs.com/stoneniqiu/p/8463684.html
Copyright © 2011-2022 走看看