【持续更新】 | CSS 知识总结 (二)
JarryChen 发布时间:2020-10-05 文章字数:523 预计用时:2分37秒
# 1. 页面变灰
这个样式的话,或许只是在某些特殊场合才需要用到,所以为了方便,可以直接改在html标签上,也方便日后去除。
html {
filter: url(“data:image/svg + xml;utf8,
<svgxmlns=\’http://www.w3.org/2000/svg\’><filterid=\’grayscale\’><feColorMatrixtype=\’matrix\’values=\’0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\’/></filter></svg>#grayscale”) !important; /* Firefox 10+, Firefox on Android */
filter: gray !important; /* IE6-9 */
-webkit-filter: grayscale(
100%
) !important; /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
//以上是兼容所有浏览器的写法,带上important防止被后续定义的样式覆盖
# 2. 按钮边框动画
这个效果其实就是在按钮的边框上放上一圈转呀转的光效,可以用来表示强调,使按钮更显眼?(⊙o⊙)…
<!--只列举相关部分-->
<template>
<div class="description">
<span></span>
<span></span>
<span></span>
<span></span>
<el-button size="small">测试按钮</el-button>
</div>
</template>
<style lang="scss" scoped>
.description {
width: 70%;
text-align: center;
margin: 0 auto;
position: relative;
overflow: hidden;
span {
display: block;
position: absolute;
&:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
&:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: 0.25s;
}
&:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: 0.5s;
}
&:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: 0.75s;
}
}
>>> .el-button {
width: 100%;
background: linear-gradient(100deg, #003f77, #409eff) !important;
font-size: 14px;
letter-spacing: 1px;
border: 0px;
}
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style>
这里放上演示效果,这里避免可以点击,换成了div代替,其他元素做法类似,如下:
测试按钮
# 3. 滚动条样式修改
默认的滚动条样式真的丑得不忍直视,这里记录一下简单修改滚动条样式的css代码
div::-webkit-scrollbar{
width:6px;
height:6px;
}
div::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
div::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
background: #333;
}
div::-webkit-scrollbar-corner{
background: #179a16;
}
// 以简单的div作为例子,实际开发中为了照顾风格的统一,一般给所有会出现滚动的标签统一设置滚动条样式
参数说明
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
- ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
- ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件