css绘制
background-blend-mode
filter
字符打点
的舒服<div class="dot2">...</div>
.dot2{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;;
vertical-align: -.25ex;
overflow: hidden;
}
.dot2:before{
display: block;
content: '... \A.. \A.';
white-space: pre-wrap;
animation: dot3 1s infinite step-start both;
}
@keyframes dot3 {
33% {transform: translateY(-2em);}
66% {transform: translateY(-1em);}
}
颜色流动
<div class="flow-color"></div>
<h1>滴水电费是的</h1>
h1{
font-size: 100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
animation: hue 6s linear infinite;
}
.flow-color{
height: 150px;
background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
animation: hue 6s linear infinite;
}
@keyframes hue {
form {filter: hue-rotate(0deg);}
to {filter: hue-rotate(360deg);}
}
输入框禁用
<form>
<input type="text" name="" id='text'/>
</form>
#text{pointer-events: none}
// 上面这种键盘tab 会输入
// 下面这种不会
<form>
<fieldset disabled>
<legend>标题</legend>
<input type="" name="">
</fieldset>
</form>
fieldset[disabled] {pointer-events: none}
