CSS实现渐变流动边框线

html部分

  <div class="box"><div class="div"></div></div>

css部分

 .box::after {content: '';width: 200%;height: 200%;background: linear-gradient(to bottom, #ff0059, #1e00ff, #00ff2f, #fff);animation: rotate linear 8s infinite;position: absolute;z-index: -11;transform: rotate(0deg);margin-left: -15px;left: -50%;top: -50%;}.box {width: 200px;height: 200px;margin-left: 200px;position: relative;margin-top: 100px;overflow: hidden;}.div {position: absolute;top: 2px;left: 2px;bottom: 2px;right: 2px;background-color: #fff;z-index: 999999;}@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(359deg);}}

CSS实现渐变流动边框线相关推荐

css给盒子添加边框线
上边框线 .border-top::before{content: "";position: absolute;height: 0.02rem;width: 100%;border ...
CSS实现渐变圆角边框
渐变边框可以使用border-image,但带有圆角的渐变边框单靠border-image却无法实现,那有哪些方法可以实现圆角渐变边框呢? css实用小知识,你肯定用得上方案一:使用border-i ...
css border渐变_css边框渐变
在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 border渐变进入平台注意问题:border-image的使用是不能实现圆角 ...
CSS 实现 0.5px 边框线
原有元素要添加 position: relative; ::before伪元素一点要加z-index属性保证原有元素处于后加元素上层,否则会导致原有元素上点击等事件触发不了 <div class ...
css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）
首先放几张图片 <div id="slideshow"><img src="@/assets/banner-one.png" alt=&qu ...
html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
HTML表格竖边框线,Table表格横竖线实现Css
.tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999 ...
html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画
渐变虚线边框如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色. 以下是 ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

CSS实现渐变流动边框线

CSS实现渐变流动边框线相关推荐

最新文章

热门文章