前端入门（加载特效，css）

gronkie

已于 2022-01-18 23:04:53 修改

阅读量633

点赞数 6

分类专栏： css 文章标签：前端 javascript css html html特效

于 2022-01-16 22:14:36 首次发布

本文链接：https://blog.csdn.net/m0_52212261/article/details/122528149

版权

css 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

在这里插入图片描述
哈哈效果你们就这么看看吧，实在不会截取 gif ，将就将就，或者复制粘贴代码去看看吧（最好还是去看看效果）

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

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

还有一些小细节：

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

（ 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>

gronkie

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端入门（加载特效，css）

哈哈效果你们就这么看看吧，实在不会截取 gif ，将就将就，或者复制粘贴代码去看看吧（最好还是去看看效果）这个效果简单说就是有一个带有一半黑边框的圆用 ease-out （最后以慢速度结尾）进行旋转，还有一个半白边框的圆用 ease-in-out （以慢速度开头与结尾）进行旋转（用来覆盖黑边框），完成该效果，最终效果就是，黑边框先快速“摆脱”白边框（加载条变长），然后最后再变慢，最后在一个位置结尾（加载条变短）这个效果是由 3 个部分完成#loading_item 用一个比较慢的速度进行旋转，于是.
复制链接

扫一扫