前端入门(加载特效,css)

前端入门(加载特效,css)_第1张图片前端入门(加载特效,css)_第2张图片
哈哈效果你们就这么看看吧,实在不会截取 gif ,将就将就,或者复制粘贴代码去看看吧(最好还是去看看效果)

这个效果简单说就是有一个带有一半黑边框的圆用 ease-out (最后以慢速度结尾)进行旋转,还有一个半白边框的圆用 ease-in-out (以慢速度开头与结尾)进行旋转(用来覆盖黑边框),完成该效果,最终效果就是,黑边框先快速“摆脱”白边框(加载条变长),然后最后再变慢,最后在一个位置结尾(加载条变短)

这个效果是由 3 个部分完成
#loading_item 用一个比较慢的速度进行旋转,于是每次旋转的起始位置不同(当然也可以设置让它别转了,这样每次起始位置就相同)
#loading_item::before 充当半个黑边框的圆
#loading_item::after 充当半个白边框的圆
(注意哈,这个before和after不能交换位置,否则白边框到了黑边框下面,就什么作用都没了)

还有一些小细节:

  1. 比如这个白边框一定要比黑边框粗,并且一定要调节位置,把这个黑边框给覆盖好,不然效果很丑很丑
  2. 这个虽然是设置一半的边框颜色,但另一半的边框也要设置宽度,不然边框会变得一边宽一边细,那真的视觉灾难

( yysy , 还是蛮简单的,推荐试一下)

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            #loading_item{
                position: absolute;
                left: 50vw;
                top: 50vh;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                transform: translate(-100px,-100px);
                background-color: white;
                animation-name: rotating_1;
                animation-duration: 10s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
            #loading_item::after{
                content: "";
                position: absolute;
                left: -2px;
                top: -2px;
                width: 195px;
                height: 195px;
                border-radius: 50%;
                border-style: solid;
                border-width: 7px;
                border-left-color: white;
                border-bottom-color: white;
                border-right-color: transparent;
                border-top-color: transparent;
                background-color: transparent;
                animation-name: rotating_2;
                animation-duration: 5s;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }
            #loading_item::before{
                content: "";
                position: absolute;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                border-style: solid;
                border-width: 3px;
                border-left-color: black;
                border-bottom-color: black;
                border-right-color: transparent;
                border-top-color: transparent;
                background-color: transparent;
                animation-name: rotating_2;
                animation-duration: 5s;
                animation-iteration-count: infinite;
                animation-timing-function: ease-out;
            }
            @keyframes rotating_1 {
                to {transform: translate(-100px,-100px) rotate(360deg)}
            }
            @keyframes rotating_2 {
                to {transform: rotate(360deg)}
            }
        </style>
    </head>
    <body>
        <div id = 'loading_item'></div>
    </body>
</html>

你可能感兴趣的:(css,前端,javascript,css,html,html特效)