有趣的CSScss-border特效（转动边框，彩虹边框，渐变边框）和css变量
平常业务⾥有许多的特效，⾃⼰虽然磨洋⼯能写出，但奈何⾃⼰菜，时间成本太⼤，哎~~所以我这⾥就偷摸的总结⼀波。管他兼容不兼容，花⾥胡哨就完事了！
本⽂全退指南
成果预览
全部代码已上传 ⾄压缩包(scdn资源包)。需要的可以 。
不建议⼤家下载，⽂中已给出了⽀持效果的代码。也建议去实操⼀下。
先介绍中⽂变量。
中⽂变量
意思就是利⽤中⽂作为变量在css 中使⽤。
主要是安利两个库
| 背景渐变
| 布局
渐变，代码就只需要⼀⾏
布局
ul {
/* 这个是固定写法，必须先指定display为grid */
display: grid;
/* grid属性需要指定哪种布局 */
grid: var(--九宫格);
/* 加⼊⼀点间距，让九个元素相互之间有⼀定的距离 */  gap: 10px;
}
ul{
/* 这个是固定写法，必须先指定display为grid */ display: grid;
/* grid属性需要指定哪种布局 */
grid:var(--九宫格);
/
* 加⼊⼀点间距，让九个元素相互之间有⼀定的距离 */ gap: 10px;
}
挺好玩的吧
使⽤⽅式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <!-- 在这⾥⽤link标签引⼊中⽂布局 -->
<link rel="stylesheet"href="cdn.jsdelivr/npm/chinese-layout"> <!-- 在这⾥⽤link标签引⼊中⽂渐变⾊ -->
<link rel="stylesheet"href="cdn.jsdelivr/npm/chinese-gradient"> </head>
<body>
<div class="item">
<ul>
<!-- 中⽂变量都定义在 :root{} 下，可以打开控制器看看 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
body{
/* 变量必须有作⽤域，放于{}内部 */cssclass属性
--boder——width: 5px
}
body .item{
display: inline-block;
margin: 10px;
width: 300px;
height: 150px;
}
ul{
display: grid;
grid:var(--九宫格);
gap: 1px;
}
li{
height: 30px;
background:var(--极光绿);
border:var(--boder——width) solid black;
}
本节内容主要来⾃于 掘⾦ |
主要利⽤的就是 css in js
边框特效
案例我⽤的 scss（后⾯样式为了节省篇幅也⽤的scss)；推荐⼤家⼀个 vscode 插件
作⽤就如名字⼀样，实时遍历sass⽂件
特效的基础布局⽂件
body .item{
display: inline-block;
margin: 10px;
width: 300px;
height: 150px;
}
.item > div{
margin: auto;
width: 90%;
height: 90%;
}
特效—边框长度变化
<div class="item">
<div></div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。