text-shadow为文字添加阴影。添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
语法如下:
.el {
text-shadow: [offset-x] [offset-y] [blur] [color];
}
offset-x(必选)指定水平偏移量,若是负值则阴影位于文字左边。正值位于文字右边。
offset-y(必选)指定垂直偏移量,若是负值则阴影位于文字上面。正值位于文字下方。
blur(可选)阴影应该有多少模糊。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。默认值为0px(无模糊)。
color(必选)阴影的颜色
如果offset-x、offset-y两者均为0,则阴影位于文字正后方(如果设置了<blur-radius> 则会产生模糊效果)。
创建3D文本
从6px开始6px,然后以0.25px的增量逐渐减小,直到达到0。我们就可以创建一个3D文本。
.playful {
color: var(--text);
text-shadow:
6px 6px var(--shadow),
5.75px 5.75px var(--shadow),
5.5px 5.5px var(--shadow),
5.25px 5.25px var(--shadow),
5px 5px var(--shadow),
4.75px 4.75px var(--shadow),
4.5px 4.5px var(--shadow),
4.25px 4.25px var(--shadow),
4px 4px var(--shadow),
3.75px 3.75px var(--shadow),
3.5px 3.5px var(--shadow),
3.25px 3.25px var(--shadow),
3px 3px var(--shadow),
2.75px 2.75px var(--shadow),
2.5px 2.5px var(--shadow),
2.25px 2.25px var(--shadow),
2px 2px var(--shadow),
1.75px 1.75px var(--shadow),
1.5px 1.5px var(--shadow),
1.25px 1.25px var(--shadow),
1px 1px var(--shadow),
0.75px 0.75px var(--shadow),
0.5px 0.5px var(--shadow),
0.25px 0.25px var(--shadow);
}
使用Sass简化代码
@function textShadow($precision, $size, $color){
$value: null;
$offset: 0;
$length: $size * (1 / $precision) - 1;
@for $i from 0 through $length {
$offset: $offset + $precision;
$shadow: $offset + px $offset + px $color;
$value: append($value, $shadow, comma);
}
@return $value;
}
.playful {
color: #5362F6;
text-shadow: textShadow(0.25, 6, #E485F8);
}
创建文本交替动画
<link href="https://fonts.googleapis.com/css?family=Archivo+Black&display=swap" rel="stylesheet">
<h1 class="playful" aria-label="Wash your hands">
<span aria-hidden="true">W</span><span aria-hidden="true">a</span><span aria-hidden="true">s</span><span aria-hidden="true">h</span><span aria-hidden="true"> </span><span aria-hidden="true">y</span><span aria-hidden="true">o</span><span aria-hidden="true">u</span><span aria-hidden="true">r</span><span aria-hidden="true"> </span><span aria-hidden="true">h</span><span aria-hidden="true">a</span><span aria-hidden="true">n</span><span aria-hidden="true">d</span><span aria-hidden="true">s</span><span aria-hidden="true">!</span>
</h1>
$background: #E4FFF7;
@function textShadow($precision, $size, $color){
$value: null;
$offset: 0;
$length: $size * (1 / $precision) - 1;
@for $i from 0 through $length {
$offset: $offset + $precision;
$shadow: $offset + px $offset + px $color;
$value: append($value, $shadow, comma);
}
@return $value;
}
.playful span {
position: relative;
color: #5362F6;
text-shadow: textShadow(0.25, 6, #E485F8);
animation: scatter 1.75s infinite;
}
.playful span:nth-child(2n) {
color: #ED625C;
text-shadow: textShadow(0.25, 6, #F2A063);
animation-delay: 0.3s;
}
.playful span:nth-child(3n) {
color: #FFD913;
text-shadow: textShadow(0.25, 6, #6EC0A9);
animation-delay: 0.15s;
}
.playful span:nth-child(5n) {
color: #555BFF;
text-shadow: textShadow(0.25, 6, #E485F8);
animation-delay: 0.4s;
}
.playful span:nth-child(7n), .playful span:nth-child(11n) {
color: #FF9C55;
text-shadow: textShadow(0.25, 6, #FF5555);
animation-delay: 0.25s;
}
@keyframes scatter {
0% {
top: 0;
}
50% {
top: -10px;
}
100% {
top: 0;
}
}
body {
background-color: $background;
}
h1 {
font-size: 65px;
text-transform: uppercase;
font-family: "Archivo Black", "Archivo", sans-serif;
font-weight: normal;
display: block;
width: 666px;
max-width: 80vw;
min-height: 90px;
height: auto;
text-align: center;
margin: 10rem auto;
margin: calc(50vh - 5rem) auto;
}