CSS3 变色背景动态边框

ゞ浴缸里的玫瑰 2022-01-31 09:15 290阅读 0赞

动态边框样式参考： [https://juejin.im/post/5cdbc938f265da034d2a38c1\#heading-2][https_juejin.im_post_5cdbc938f265da034d2a38c1_heading-2]

![20190516110833284.gif][]

// css
    
    body {
        width: 100wh;
        height: 90vh;
        color: #fff;
        background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
        background-size: 400% 400%;
        animation: Gradient 15s ease infinite;
    }
    
    @keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    
    .brick{
    	margin: 20px auto;
    	width: 200px;
    	height: 200px;
    	background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
    	    	linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
    	    	linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
    	    	linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    	background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    	background-position: left top, right top, right bottom, left bottom;
    	transition: ease-in 0.5s;
    }
    .brick:hover {
    	background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    }
    
    // html 
    <body>
    	<div class="brick"></div>
    </body>

[https_juejin.im_post_5cdbc938f265da034d2a38c1_heading-2]: https://juejin.im/post/5cdbc938f265da034d2a38c1#heading-2
[20190516110833284.gif]: /images/20220131/3b26ed8a8a5a437fbaea5713d2276bd0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3 背景渐变色实现过渡效果

前言：对于设了渐变颜色的background，css会当做背景图片处理，这时直接设过渡transition会没有效果；整理了两种用过的，给渐变背景加过渡的方法：方法

浅浅的花香味﹌/ 2023年03月01日 09:40/ 0 赞/ 20 阅读

相关 CSS3新增属性----背景和边框

一些最重要CSS3模块如下：选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面 CSS3 边

亦凉/ 2022年12月01日 14:14/ 0 赞/ 283 阅读

相关 CSS3 新增属性（边框，背景，文字，颜色属性）

CSS3 新增属性边框属性背景属性文字属性颜色属性 > 1. 边框属性 <table> <thead> <tr>

秒速五厘米/ 2022年10月13日 01:46/ 0 赞/ 275 阅读

相关 CSS3——新增背景属性和边框样式

新增背景属性 background-clip background-origin

红太狼/ 2022年09月25日 11:20/ 0 赞/ 262 阅读

相关 CSS3 背景和边框

CSS3完全向后兼容，因此不必改变现有的设计。 css3中的模块：选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面 1. 边框

叁歲伎倆/ 2022年09月21日 05:36/ 0 赞/ 221 阅读

相关 HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转

边框背景图片 1、 background-origin：设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显

野性酷女/ 2022年08月22日 15:13/ 0 赞/ 251 阅读

相关 css3_边框与背景

Css3只能在ie8以上的版本才能用。 1. 边框圆角 <div class="radius">边框圆角</div> .radius\{width:200px;heigh

Myth丶恋晨/ 2022年05月25日 05:11/ 0 赞/ 248 阅读

相关【CSS3】边框

CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： ![

桃扇骨/ 2022年03月21日 14:46/ 0 赞/ 285 阅读

相关 CSS3 变色背景动态边框

动态边框样式参考： [https://juejin.im/post/5cdbc938f265da034d2a38c1\heading-2][https_juejin.im_po

ゞ浴缸里的玫瑰/ 2022年01月31日 09:15/ 0 赞/ 291 阅读

相关 CSS——设置边框渐变色

前言最近在写一个typecho的主题，刚好遇到这样一个问题就记录下吧步骤这是一个CSS的过度效果，效果如下。 ![1334215-201908021424

小灰灰/ 2021年11月01日 09:28/ 0 赞/ 538 阅读