CSS实现流动边框

梦起丶

已于 2022-02-11 23:34:27 修改

阅读量8.5k

点赞数 12

分类专栏： CSS 文章标签： css3 css动画 css流动边框

于 2020-10-11 14:13:15 首次发布

本文链接：https://blog.csdn.net/u011283226/article/details/109009853

版权

CSS 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

【写在前面】

咳咳，首先讲个题外话，原本我是做 C++/Qt 的，然而因为工作 ( 部分原因 ) 学起了前端。

当然，这也并不意味着我会丢掉 C++/Qt/Qml 这些 ( 会接着更新 )，只是额外增加一些前端相关的文章而已。

再者，也想着自己搭个网站 ( 或是博客 )，所以学学前端也是必然的。

【正文开始】

目前学到了 CSS动画这部分，按照我的习惯，肯定是要实现些好玩的东西。

回想起王者里面很炫酷的头像框，大概这样：

当然，王者这种用的是粒子特效，而我们只需仿一个效果即可。

那么，如何用 CSS 实现一个简易版呢。

开始，很容易想到的是四个 <div> 模拟四个方向的边框：

想法很容易，结果实现起来相当复杂，直接 pass 掉。

然后搜了下相关的实现，结果都不是很满意 ( 都很复杂 )。

最终我还是找到一个类似的效果，思路很巧妙：

沿着这个思路，联想到 CSS 中的标准盒模型，最后我实现的效果如下：

其中头像图片如下( 上传到CSDN了 )：

全部代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 100px auto;
            overflow: hidden;
            border-radius: 4px;
        }
        @keyframes rotate {
            to {
                transform: rotate(1turn);
            }
        }
        .under {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid yellow;
            border-right: 200px solid green;
            border-bottom: 200px solid red;
            border-left: 200px solid blueviolet;
            left: -125px;
            top: -125px;
            animation: rotate 2s linear infinite;
        }
        .box > span {
            position: absolute;
            top: 0px;
            margin: 8px;
            width: 134px;
            height: 134px;
            border-radius: 4px;
            background-size: cover;
            background-image: url(https://img-blog.csdnimg.cn/20201011132854978.jpg);
            background-color: white;
        }
        @keyframes rotate2 {
            to {
                transform: rotate(-1turn);
            }
        }
        .box .under2 {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid rgb(0, 255, 13);
            border-right: 200px solid rgb(45, 218, 203);
            border-bottom: 200px solid rgb(255, 106, 156);
            border-left: 200px solid rgb(251, 255, 26);
            left: -125px;
            top: -125px;
            animation: rotate2 2s linear infinite;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="under"></div>
        <span></span>
    </div>
    <div class="box">
        <div class="under2"></div>
        <span></span>
    </div>
</body>

</html>

代码简单易懂，不需要过多的解释，简单的动画，配上一些小技巧，我对最终的效果相当满意。

【结语】

随着深入学习，越来越觉得前端是有相当有趣的( 也相当有难度 )，谁说前端简单啊喂！

梦起丶

关注

12
点赞
踩
52

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS实现流动边框

【写在前面】咳咳，首先讲个题外话，原本我是做 C++/Qt 的，然而因为工作 ( 部分原因) 学起了前端。当然，这也并不意味着我会丢掉 C++/Qt/Qml 这些 ( 会接着更新 )，只是额外增加一些前端相关的文章而已。再者，也想着自己搭个网站 ( 或是博客 )，所以学学前端也是必然的。【正文开始】目前学到了 CSS动画这部分，按照我的习惯，肯定是要实现些好玩的东西。回想起王者里面很炫酷的头像框，大概这样：当然，王者这种用的是粒子特效，而我们只需仿一个效果即可。那么，..
复制链接

扫一扫