CSS动态性渐变色色边框紧紧围绕內容地区转动的

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

实际效果图

  在网络上查阅有关材料后,发现现阶段的动态性渐变色色边框的完成方法绝大多数为应用伪元素比內容地区大1圈随后横向挪动渐变色色情况的方法完成,而沒有渐变色色边框紧紧围绕內容地区开展转动的实际效果,因而我做了1个这样的demo供大伙儿参照。

完成基本原理

  最先将內容地区嵌套循环进1个DIV盒子中并设定overflow:hidden;。这个盒子的尺寸是內容地区的尺寸再加你期待完成的渐变色边框的宽度,随后将內容地区垂直居中,这样內容地区和父元素之间就有1个看似是边框的空白地区。
  如今在这个空白地区加1个比父元素更大,情况为渐变色色的盒子,将等级设定为最低z-index: ⑴;。再将这个渐变色色情况的盒子添加转动动漫就进行了。
  看起来甚为繁琐,具体构造却十分简易,要是脑海中可以有大约的立体式感就可以马上搞清楚这在其中的基本原理。

HTML构造

<body>
    <!-- 最外层仅起到限定渐变色地区尺寸的功效 -->
    <div class="wrap">
        <!-- 渐变色显示信息地区 -->
        <div class="bgc"></div>
        <!-- 內容 -->
        <div class="content"></div>
    </div>
</body>

CSS

<style>
        /* 延展性盒子使demo垂直居中 */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 最外层的功效是让正中间的.bgc外溢一部分掩藏 
        尺寸依据內容地区与边框尺寸随意调剂 */
        .wrap {
            width: 300px;
            height: 300px;
            overflow: hidden;
            position: relative;
            border-radius: 20px;
            /* 延展性盒子使content地区垂直居中显示信息 */
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        /* 最后动态性渐变色边框具体內容 比.wrap大 可是由于外溢一部分被掩藏 
        而正中间一部分又由于等级关联被.content盖住 
        最终仅有.wrap和.content之间的间隙显示信息这个转动的渐变色色情况 */
        .bgc {
            width: 500px;
            height: 500px;
            background: linear-gradient(#fff,#448de0);
            animation: bgc 1.5s infinite linear;
            border-radius: 50%;
            position: absolute; 
            z-index: ⑴;
        }
        /* 內容地区 依据本身状况调剂尺寸 */
        .content {
            width: 250px;
            height: 250px;
            background-color: #fff;
            border-radius: 20px;
        }
 /* 渐变色色情况转动动漫 */
        @keyframes bgc {
            0% {
                transform: rotateZ(0);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>

 

以便让大伙儿能更清楚地搞清楚等级关联,我做了个1个三d实际效果的关联图,箭头越挨近指向的方位等级越高。最少实心方块是內容地区,最大的蓝色圆形是开展转动的渐变色色情况,可是超过正中间盒子尺寸的一部分被掩藏掉了。
 

总结

以上所述是网编给大伙儿详细介绍的CSS动态性渐变色色边框紧紧围绕內容地区转动的实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!