1.1 文字效果 text-shadow
.text1-1 { background: #434d56; color: #8c99a6; text-shadow: 0 -1px 1px black; }
1.2 文字效果 text-shadow 模糊
.text1-2 { background: #111; color: #ffc; text-shadow: 0 0 .1em, 0 0 .3em; }
1.3 文字效果 text-shadow 多组阴影
.text1-3 { color: #fff; background: hsl(0, 50%, 45%); text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black;
}
2.1 内阴影 text-shadow
.text2-1 { background-color: #fff; } .text2 p { color: transparent; background-color: #000; text-shadow: rgba(255, 255, 255,
0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px; -webkit-background-clip: text; }
3.1 文字扫光效果 -webkit-keyframes
.text3-1 { background: #191919; } .text3-1 p { background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
-webkit-background-size: 1em; -webkit-background-clip: text; -webkit-text-fill-color: rgba(255, 255,
255, 0.3); -webkit-animation: slideShine 3s infinite; } @-webkit-keyframes slideShine { 0% { background-position:
0 0; } 100% { background-position: 100% 100%; } }
4.1 文字淡入淡出效果 -webkit-keyframes
.text4-1 { color: #000; -webkit-animation-name: fadeIn; /*动画名称*/ -webkit-animation-duration: 5s; /*动画持续时间*/ -webkit-animation-iteration-count:
1000; /*动画次数*/ -webkit-animation-delay: 0s; /*延迟时间*/ } @-webkit-keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; } }