分享一段CSS样式代码

七夏 · 昨天 21:27

代码来自discuz X5.0 模板中

/*自行行替换 portal-container 使用*/
.portal-container::before {
content:'';
position:absolute;
top:0;
left:0;
z-index: 9999999;
right:0;
height:20px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='waveGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%231E90FF'/%3E%3Cstop offset='50%25' style='stop-color:%2300CED1'/%3E%3Cstop offset='100%25' style='stop-color:%231E90FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,50 C200,20 400,80 600,50 C800,20 1000,80 1200,50 C1400,20 1600,80 1800,50 C2000,20 2200,80 2400,50 L2400,0 L0,0 Z' fill='url(%23waveGrad)'/%3E%3C/svg%3E") repeat-x;
background-size:600px 20px;
animation:wave-flow 10s linear infinite;
}
@keyframes wave-flow {
0% {
background-position-x:0;
}
100% {
background-position-x:600px;
}
}

复制代码

SYS宇晖 · 昨天 21:29

这代码看着像是给论坛附件样式写的吧？能具体说下是用来美化什么效果的吗？我正好在找类似的样式参考。
[这只是一个小尾巴]

正序 倒序
全部评论1