CSS画边框线带有渐变线和流光边框实例

yqj2342024-07-24 18:02

|------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---|
| 流光边框 | css流光边框动画效果_哔哩哔哩_bilibili | |
| 流光边框 | css流光边框动画效果_哔哩哔哩_bilibili纯CSS写一个动态流水灯边框的效果～_哔哩哔哩_bilibili | |
| 荧光边框 | CSS 动画发光渐变边框特效_哔哩哔哩_bilibili | |

[data-v-25d37a3a] .flow-dialog-custom {
    background-color: transparent
}

[data-v-25d37a3a] .el-dialog.is-align-center {
    margin: auto!important
}

[data-v-25d37a3a] .el-dialog {
    background-color: #01113fe6;
    background-size: 100% 100%;
    border: .14286rem solid #246190;
    position: relative
}

[data-v-25d37a3a] .el-dialog:before {
    content: "";
    position: absolute;
    left: -.28571rem;
    top: -.07143rem;
    width: 5rem;
    height: 3.92857rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAA3CAYAAACxUDzgAAAAAXNSR0IArs4c6QAAA5pJREFUaEPt2ltP1EAUAOAz5bIYgShKNGoE/gL+D+/xkqiJMSAIEgIS8IKiIkqQgCJBNuIlalCDJvg7wHffhAho8IKuxr32mDkz052WLvIspy/b3bbTmW/PnE6nFVV1cQS9CLMCAPJH+7u1acVtcj/7WK9wXZ7ZFvwMHmfOFyxL1smUaa8H2xDcx7QlV9308TFAGHccJyqq6uO4rCVhIgEpgQAYlLRqR9vld117IbIN8rUsTCRMzexnCwTVA/t459TlmTp7ddP1EwjTrgvRSDo2/v5heYx+JpiwxSa2t4f9TcHjg/us5phcDf5X2as9blkbRQwBx11worMjhdPLTlN5JhwmrFuFC6oiw0L8X2Gf6//wuoEuYKXzmnPblfBFqux6JmqpG4ppQBGNJH540RFaj8oGP8yH4aJcqSU0sP7XH0VFY9xLFVJ65h7DUBRWnPVHzMwQwxDMziY/zOxdhiGYHc1xdKzsOTvIMAqmRUeMTuUfByKcfCXM9tYEDcXM4GeunyOGImbbuQQKbygKMHebYRRMWyIbLgAw38ddScG0JxCt+6CFXoYhmK0dMsdk76QXbjEMeWw5L3OMXgTApx6GUTAXVcSY5fMNhiGY8s5Edj4GARa7GYZgNl+WXUlesJGmDhavMQzBbOqycgwAfOliGAVz1c4xAr5eKeRbAglTdt3AKI9vnQxDEbOxO6mvSmqU9/0SwxDMhp6kmRKliFm6wDAEU3oziY4AcAFAzsssdTAMwZT0qq5kMu7PdoZRMH1Juoc0OLE2hiGL4n6TfBXOr1aGIZj1A0l1S6CX3y0MQzDrBv0R86eZYQim6E5S3STpLBNvKuCRL8EMpbwBHgoBiUaGoYiJDKfsmU1INDAMwRSOmIhRnSlZzzAEU3DfhhGQqsvnHEMw0ZTvjapULUcMRUz+gxTar16laxiGYPLG/F0pc4q7koJ5pGHkg1qB4J7kiCEY57EVMQgMY4a6zhMNo69F7gmOGBUxT9O+aQf3OOcYghHP0r4nkXiMYRTM8zTSnKae28SjDKNgXgQi5gjDqNnMl5kpAbjLTDzgYYZRMBPpGkCIEozMNocYRsGMLZZAadkcAJbQhNVBhlEwcpnIjILAWlo/wDBZmNdYDeBO0zut+xkmCyPX3mSmQCZhhtGz3+ZyNIk1gG4U9ubxRJX1ZBbgFRZDgTsP+/JKjdVa/vRHx2R6FPbkn17LIKbtfpi3WA27xTuGAfgLmMlRAAL7jhIAAAAASUVORK5CYII=) left top no-repeat
}

[data-v-25d37a3a] .el-dialog:after {
    content: "";
    position: absolute;
    right: -.42857rem;
    bottom: -.14286rem;
    width: 6.14286rem;
    height: 5.71429rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAABQCAYAAACDD4LqAAAAAXNSR0IArs4c6QAABW9JREFUeF7tnDtvHFUUx//nzthOeKRAAtFQIPEBKFAkRGEsoEJyXl4UiQJRYIKMKGgTAVIIHwAnAgvy4CXesbFEHbuB7wAdFQU0pIizOzsX3ceZOTO7SI7vjQTs2SY78dzr2d/+53/OPfeMCfo6OIFtu4hl2p02AR18Vh2J7eoGlsslBZtbC9tjC5inp6lWFZsC24O1O9NUq2BTwTqCdlK1CjYVrB8/qVoFmwUsgOWiw1LBpoD9YWzBBBVsCsne2BC8AEdXwWYE6xTrXk61CjY3WBvBluqx2dBuOY+NVnBMg1c2rlAryMeyM1OjWADH1AryUd6qgsE6d1UryMcVTrEu3fJgVbH5yHrFxtdxBZsP7CZnBQAUbD6ucGC9FRBwXNOtfGQ3oxU4j1XF5uOK61VbhDmhHpuPrAPLtQIFm4+rV6wHS8AJ9dh8ZL8XVnBSreAugCXgpCr2LoAFoIrNxxXfsRUQcEoVm49sAxbAKfXYvGA53VKw+bh6K+DXiio2H9lvRbqlYPNxhQPLVqBgM4L9Rih2oFaQj6wECzqLQfEeT64tRimYO2B9zeAcVooL7A4pU8/2WAdWUvQtnfQWBsV5VWyCNOjrynqyjiKT9P/S2wo2BexXlbUTUANkBZsI1hH0cHuWoGAzgGWo0hYUbArYL2MeO0W1CjYHWDeHAXwki56rYFPBiqxArSABphxKX1TWKVWmWgxXFZsAmZzHyjVspMmOkDD1bA/1io3+2l0gaB6bpIwGbA+uy2vVChLQ0ueibOi8VgQyBZsC9rM2j+1bgoLNAZaVKlSrYJPAjtpnEJhkhKtgE8CaT/+humU0eCVgBRxYX90SQYu9VhWbgHYCLAMWi7GE6Wd3qPlkZH1vrFRthKuKTdCFB+tBRrii4K1gU8Becx4bnpqx/PRMJKpgk8HyisvGLZqgXgWbALa4yulWLHIJS1CwCWDNVa4VxOdpw9a3V66CTQBbXHGKFVCdYkUtJmHq2R7aAeuNNT7+qXlsmjCKKyGP9aoNeVcDV60ggW1x2YHlhg1VbALK7lAPVtQJZEeMKjYBc/mxSLeaRUIgrWCTwEYrEMWX0CSnYBOwAuVHAWxThHHdMO44ZmBJk8/s4Mv2/rm6+ot9lds5PWnT/hmDmeVzoA++YedKqn4kwnNc5GYLYLmqxx6A7PxGdc2SfYkzglat7cpAwd4h2PkPR+ctcK5pj+9tzWjv1h0Cdacf+qB6pSa74WNTDFru/2X+Gt7Tuip2n4CL9/eeN2WxBULZLAo8w7DiaoJYQdfHvxUDBbsPsHPrwyeMMTcAe1/jp2IbRqRcP1U3f38Wbz5y638F9si7w6MlsGoJpwF7b9gyCQGl7t+6vMaPBGxUnj83KpFLgj554nxV5q1iThB+HQ3LJ/E6/SnWC/v42v6lpzzwjj1C9ehFW2AVxj7OFSYPyu1Exaq+u/w6dqlMeGK/N0B8EW061W5mTWQBRH8Yqp66vXroF8b0n1Xsw2eHR8dzWK0tToOcOoPfBRBh6RPeh4o+Ky6oMa6Weurj8+qm/BcDU2fe9i6Iv+OWpfKZ6gz9LLXnwT728s0H7UJ5sQaWUJu1YjTcaY7JrBV7w53x4fKitVgixON73DG90G+4lQ+U+Q8WVeJvxfihOorx54Qf9jtK+qua9jYVYDpRWWxDu4DSBJd2br4OKxrYpim45qAkA1S0BOGz4xr1YPzawmb/hqZHX729ArKXyGLXDBfWxvPDxanHRLtmb35teHi4aGAvAXioU8LpNS00F9uAJRjY4HUeRrsx1BSKe7evBC3ft3MI9TVfmrxlnTu2inXXNE2x4Xqkigk1L/ibhoy4zd1sdwO2MG+MzhTr01zyb0OA80KNWqpUAAAAAElFTkSuQmCC) right bottom no-repeat
}

[data-v-25d37a3a] .el-dialog .el-dialog__header {
    width: 100%;
    background: url(/assets/title-line.c6b576b1.png) left center no-repeat;
    background-size: contain;
    position: relative;
    padding: .85714rem 0 .85714rem 3.42857rem
}

[data-v-25d37a3a] .el-dialog .el-dialog__header:before {
    bottom: 0;
    content: "";
    height: .07143rem;
    width: 100%;
    left: 0;
    position: absolute;
	//渐变线
    background: linear-gradient(to right,transparent,#0154a1,#00d8ff,#0154a1,transparent);
}

[data-v-25d37a3a] .el-dialog .el-dialog__header .el-dialog__title {
    font-size: 1.14286rem;
    font-weight: 600;
    color: #fff;
    font-family: Source Han Sans CN;
    text-indent: 2.28571rem;
    margin-top: -.14286rem
}

[data-v-25d37a3a] .el-dialog .el-dialog__header .el-dialog__headerbtn {
    top: -.71429rem;
    right: -.71429rem;
    background: url(data:image/png;base64,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) no-repeat center center
}

.el-popover.float-pop {
    color: #fff;
    width: auto!important;
    border: .07143rem solid #004ea8;
    background: rgba(3,20,64,.8)
}

.el-popover.float-pop .el-popper__arrow {
    width: 0;
    height: 0;
    border: .42857rem solid transparent;
    border-bottom: .42857rem solid #004ea8;
    top: -.71429rem
}

.el-popover.float-pop .el-popper__arrow:before {
    content: none;
    background: transparent
}

.el-popover.float-pop .blue {
    color: #00d1ff
}

.el-popover.float-pop .cricle {
    display: inline-block;
    width: .71429rem;
    height: .71429rem;
    border-radius: 50%;
    background: #DCEEFA;
    margin-right: .21429rem
}

.el-popover.float-pop .cricle.blue {
    background: radial-gradient(circle,#2de4fa 0%,#6aebfa 100%)
}

.el-popover.float-pop .cricle.green {
    background: radial-gradient(circle,rgb(7,237,140) 0%,#75ffbd 100%)
}

.only-flow-container .wait-box[data-v-bfa332d9] {
    position: absolute;
    left: -5.35714rem;
    padding: 0 .85714rem;
    height: 2.14286rem;
    background-color: #04a8ec;
    box-shadow: 0 0 0 .07143rem #092767,inset 0 0 .71429rem #0a3b80;
    text-align: center;
    line-height: 2.14286rem;
    font-size: .85714rem;
    font-family: Source Han Sans CN;
    font-weight: 700;
    color: #fff;
    top: calc(50% - 1.07143rem);
    border-radius: 2.14286rem;
    z-index: 3
}

.only-flow-container .bg-wrap[data-v-bfa332d9] {
    border-radius: .28571rem;
    backdrop-filter: blur(.71429rem);
    position: relative;
    cursor: pointer;
    transition: all .3s ease-in
}

.only-flow-container .bg-wrap[data-v-bfa332d9]:hover {
    opacity: .9;
    transform: translateY(.14286rem)
}

.only-flow-container .bg-wrap:hover .float-box[data-v-bfa332d9] {
    display: block
}

.only-flow-container .bg-wrap.small[data-v-bfa332d9] {
    width: 6.42857rem;
    height: 2.85714rem;
    padding: .28571rem .57143rem .57143rem
}

.only-flow-container .bg-wrap.middle[data-v-bfa332d9] {
    width: 10.35714rem;
    height: 5.28571rem;
    padding: .28571rem .57143rem .57143rem
}

.only-flow-container .bg-wrap.red[data-v-bfa332d9] {
    background: linear-gradient(45deg,rgba(245,36,33,.8),rgba(245,36,33,.3));
    border: .21429rem solid rgba(245,36,33,.2)
}

.only-flow-container .bg-wrap.green[data-v-bfa332d9] {
    background: linear-gradient(45deg,rgba(36,213,245,.8),rgba(36,213,245,.3));
    border: .21429rem solid rgba(36,213,245,.2)
}

.only-flow-container .bg-wrap.grey[data-v-bfa332d9] {
    background: linear-gradient(45deg,rgba(125,150,180,.8),rgba(125,150,180,.3));
    border: .14286rem solid rgba(125,150,180,.2)
}

.only-flow-container .bg-wrap.yellow[data-v-bfa332d9] {
    background: linear-gradient(45deg,rgba(255,148,30,.8),rgba(255,148,30,.3));
    border: .21429rem solid rgba(255,148,30,.2)
}

.only-flow-container .bg-wrap span[data-v-bfa332d9] {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.71429rem
}

.only-flow-container .bg-wrap .f1[data-v-bfa332d9] {
    font-size: .85714rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffffc7
}

.only-flow-container .bg-wrap .f2[data-v-bfa332d9] {
    border-radius: 1.14286rem;
    line-height: 2rem;
    font-size: 1.14286rem;
    height: 2.14286rem;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #fff
}

.only-flow-container .bg-wrap .f3[data-v-bfa332d9] {
    font-size: .85714rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #dceefa;
    line-height: 2.28571rem
}

.only-flow-container .progress-bar[data-v-bfa332d9] {
    margin-top: .35714rem;
    position: relative;
    width: 10.35714rem;
    height: .71429rem;
    background: linear-gradient(90deg,rgba(44,143,255,.2) 0%,rgba(44,143,255,.1) 100%);
    border: .07143rem solid #4761b8;
    border-radius: .42857rem;
    z-index: 3
}

.only-flow-container .progress-bar.small[data-v-bfa332d9] {
    width: 6.42857rem;
    height: .57143rem
}

.only-flow-container .progress-bar.middle[data-v-bfa332d9] {
    width: 10.35714rem;
    height: .71429rem
}

.only-flow-container .progress-bar .txt[data-v-bfa332d9] {
    font-size: .71429rem;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #f9f9fb;
    position: absolute;
    z-index: 1;
    width: 100%;
    display: block;
    text-align: center;
    left: 0;
    bottom: -.85714rem;
    line-height: .71429rem
}

.only-flow-container .progress-bar.red .zebra[data-v-bfa332d9] {
    border-radius: .42857rem;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,#FE4F3D,#FE4F3D .57143rem,#FE8458 .57143rem,#FE8458 1.14286rem);
    background-size: 160% 100%;
    animation: progressAnimation-bfa332d9 1s linear,zebraAnimation-bfa332d9 2s linear infinite
}

.only-flow-container .progress-bar.green .zebra[data-v-bfa332d9] {
    border-radius: .42857rem;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,#24d5f5,#24d5f5 .57143rem,#21c1de .57143rem,#21c1de 1.14286rem);
    background-size: 160% 100%;
    animation: progressAnimation-bfa332d9 1s linear,zebraAnimation-bfa332d9 2s linear
}

.only-flow-container .progress-bar.green .txt[data-v-bfa332d9] {
    display: none
}

.only-flow-container .progress-bar.grey .txt[data-v-bfa332d9] {
    font-size: .71429rem;
    font-weight: 600;
    color: #dceefa
}

.only-flow-container .progress-bar.yellow .zebra[data-v-bfa332d9] {
    border-radius: .42857rem;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,#FF9C00,#FF9C00 .57143rem,#FFC663 .57143rem,#FFC663 1.14286rem);
    background-size: 160% 100%;
    animation: progressAnimation-bfa332d9 1s linear,zebraAnimation-bfa332d9 3s linear infinite
}

@keyframes zebraAnimation-bfa332d9 {
    to {
        background-position: 100% 0
    }
}

@keyframes progressAnimation-bfa332d9 {
    0% {
        width: 0%
    }

    to {
        width: 100%
    }
}

进度条

相关推荐
姚*鸿的博客4 分钟前
pinia在vue3中的使用
前端·javascript·vue.js
天下无贼！2 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr2 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
我码玄黄2 小时前
THREE.js：网页上的3D世界构建者
开发语言·javascript·3d
爱喝水的小鼠3 小时前
Vue3(一) Vite创建Vue3工程，选项式API与组合式API；setup的使用；Vue中的响应式ref，reactive
前端·javascript·vue.js
小晗同学3 小时前
Vue 实现高级穿梭框 Transfer 封装
javascript·vue.js·elementui
WeiShuai3 小时前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
forwardMyLife3 小时前
element-plus的面包屑组件el-breadcrumb
javascript·vue.js·ecmascript
计算机学姐3 小时前
基于python+django+vue的影视推荐系统
开发语言·vue.js·后端·python·mysql·django·intellij-idea
luoluoal4 小时前
java项目之基于Spring Boot智能无人仓库管理源码（springboot+vue）
java·vue.js·spring boot
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07软件工程从理论到实践客观题汇总(头歌第一章至第八章)08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文1051-2 万字长文，深度解读端到端自动驾驶的挑战和前沿