应该会做成个系列篇,基本上涉及到的特效都出自CSS揭秘一书,这是本十分不错的图书很推荐大家读一下.
CSS揭秘提供的Demo展示站:csssecrets
本节的所有案例展示页:CSS特效文字篇
凹凸感文本
先上效果图:
代码:
font: 250%/1.6 Baskerville, Palatino, serif;
padding: .8em 1em;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
核心思想:
背景色跟文字颜色要形成深浅色的对比,并且利用text-shdow打上单侧阴影(背景浅文字深时打下方浅阴影,背景深文字浅时打上方深阴影)
hsla(色调[0-360],饱和度[0%-100%],亮度[0%-100%],透明度[0-1]);
text-shadow:x轴偏移,y轴偏移,模糊半径,阴影颜色;
立体文字
效果图:
代码:
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;
font: bold 500%/1 Rockwell, serif;
核心思想:
为了真实,立体文字的质感要通过许多的逐渐变暗的阴影表达,最后还要有一个模糊半径特别大的阴影收尾,写起来有点繁琐,注意每个阴影的偏移量递增,还有亮度递减就好
font-family:sans-serif/serif;[无衬线/有衬线字体]
发光字体
效果图:
代码:
{
color: #ffc;
transition: 1s;
font: bold 500 % /1 Rockwell, serif;
}
:hover{
text-shadow: 0 0 .1em, 0 0 .3em;
}/
核心思想:
用不带偏移量的跟字体颜色一样的阴影模拟光晕特效,并且让特效缓慢的出现,主要是要用这种荧光色,设置两层阴影应该是为了增加层次感吧.
transition:用于作用的属性,执行时间,速度曲线,延时执行时间;[用于设置hover效果展现过程的属性]
打字特效
效果展示页
代码:
- CSS
@keyframes typing {
from {
width: 0
}
}
@keyframes caret {
50% {
border-right-color: transparent;/*用右侧border模拟打字时的光标,50%时是透明实现闪烁*/
}
}
@keyframes colorchange {
0% {
color: transparent;/*这个动画瞬间完成,把字体颜色从透明变成可见*/
}/*动画开始样式*/
100% {
color: #91f72e;
}/*动画结束样式*/
}
#type {
font: bold 100% Consolas, Monaco, monospace;
background-color: black;
color: #91f72e;
}
#T_1 {
/*width: 8.25em;*/
width: 30ch;/*根据当行字数设置长度*/
white-space: nowrap;/*文字不换行*/
overflow: hidden;/超长的裁剪掉/
border-right: .05em solid;/*光标*/
animation: typing 3s steps(30),/*绑定增长动画,执行三秒,为了统一我设置的为一个字0.1秒,分30段执行,这里也就是当行字数*/
caret 1s steps(1) infinite;/*绑定光标闪烁动画*/
}
#T_2 {
width: 12ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 1.2s steps(12),
caret 1s steps(1) infinite,
colorchange 0s forwards;/*改完颜色就停留在最后有颜色的状态*/
animation-delay: 3s;/*设置等待时间,第一行结束才开始执行*/
color: transparent;
}
#T_3 {
width: 16ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 1.6s steps(16),
caret 1s steps(1) infinite,
colorchange 0s forwards;
animation-delay: 4.2s;
color: transparent;
}
- HTML
<div id="type">
<h1 id="T_1">
Welcome to My personal blog...
</h1>
<h1 id="T_2">
DawninShadow
</h1>
<h1 id="T_3">
Have a good time
</h1>
</div>
####核心思想:
首先文字要用等宽字体,按行为单位展示,行长根据ch(一个字符的长度)设定长度.
核心动画是让当前行的宽度从零在一段时间内(速率)通过一定次数(步停)增长到原始长度.
比如有个10个字的行,总长就是10ch,每个字也就占1ch的宽度.现在你的动画规定在10秒的时间里通过10次,把这个行由长度0增长到长度10ch,是不是就是一秒增长一次,一次增长1ch,也就是一秒显示出来了一个字,就实现打字的核心效果了,再加上频繁闪烁的光标,打字特效就实现了.
当要进行多行连续打字的时候,就要为之后的行设置一个n秒(之前行显示消耗的时间)的等待,当然一开始还不能让这些字显示,所以文字颜色设置为透明,再多加个变色(经历0秒颜色从透明变为有色)的动画就好了,别忘了給动画设置上保持结束时的状态.
挖个坑,回头要把这个打字特效封装到js里边