1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| // html
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>
// css
div {
margin: 10px 0;
width: 100px;
border: 1px solid red;
text-align: justify;
text-align-last: justify;
}
// 是为了处理safari浏览器不识别text-align-last:justify;问题（但是这样有个问题，就是会多出一行，不知道有没有什么办法）
// 如果想处理IE兼容性问题，只能使用空格或者
div:after{
content: '';
display: inline-block;
width: 100%;
}
|
currentColor — CSS3超高校级好用CSS变量
currentColor：当前的标签所继承的文字颜色
1
2
3
4
5
| div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px solid currentColor;
}
|
以上css实现的效果是边框和阴影与文字颜色相同，都是red。
有什么应用场景呢？
比如，我们有这样一个html:
1
| <a href="##" class="link"><i class="icon icon1"></i>返回</a>
|
我们希望hover的时候，icon的颜色与hover设置的颜色相同，这时候就可以这样写：
1
2
3
4
5
6
7
8
| .icon {
display: inline-block;
width: 16px; height: 20px;
background-image: url(../201307/sprite_icons.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
大专栏 css技巧an class="line">
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
|
实现文字下面波浪线动画效果
第一步是实现波浪线，有三种办法：
text-decoration: green wavy underline;
text-decoration: green wavy underline;
这种方式有几点问题：
- 线的粗细不好调
- 字符和装饰线发生重叠的时候，装饰线直接消失了，波浪线变成了一截一截的
- 无法预知每个波浪线重复片段的宽度，想要无限运动理论上就不太可行
因此，文字或者图形的波浪线动画效果不能使用text-decoration的波浪线。
纯css实现(利用radial-gradient)
这种方式radial-gradient理解成本高，暂不讨论。
使用SVG波形矢量图作为背景
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| // css
.underline-wave {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
background-size: 20px auto;
}
.underline-wave {
animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
from { background-position: 0 100%; }
to { background-position: -20px 100%; }
}
// html
<a href="javascript:" class="svg-wave">测试测试测试zhanghhhhha</a>
|
优点是线条边缘平滑，效果细腻，易理解，易上手，易维护。
缺点也很明显，就是波浪线的颜色无法实时跟着文字的颜色发生变化，适用于文字颜色不会多变的场景。
如果我们想要改变波浪线的颜色也很简单，修改background代码中的stroke=’%23333’这部分，’%23’就是就是#，因此，stroke=’%23333’其实就是stroke=’#333’的意思。例如，我们需要改成红色略带橙色，可以stroke=’%23F30’，也可以写完整stroke=’%23FF3300’。
参考：https://www.zhangxinxu.com/wordpress/2019/04/css-wave-wavy-animation/
css技巧
原文：https://www.cnblogs.com/lijianming180/p/12255819.html
