Welcome 您好!

    

一段css实现:像翻页的文字特效

QQ截图20180525175543.png


很漂亮的特效,可以利用再任何地方,自己发挥吧!

css

@import url(https://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
box-sizing:border-box;
}
body{
font-family: 'Lato', sans-serif;/*字体*/
}
div.foo{
width: 100%;
margin: 0 auto;
text-align: center;
}
.letter{
display: inline-block;
font-weight: 900;
font-size: 3em;/*文字大小*/
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}
.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:0;
left:0;
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out;
}
.letter:before{
color: #fff;/*文字颜色*/
text-shadow: 
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:2;
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg);
}
.letter:hover:before{
color: #fafafa;
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg);
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
}

html(修改文字即可)

<div class="foo">
<span class="letter" data-letter="大">大</span>
<span class="letter" data-letter="部">部</span>
<span class="letter" data-letter="分">分</span>
<span class="letter" data-letter="价">价</span>
<span class="letter" data-letter="格">格</span>
<span class="letter" data-letter="都">都</span>
<span class="letter" data-letter="已">已</span>
<span class="letter" data-letter="经">经</span>
<span class="letter" data-letter="降">降</span>
<span class="letter" data-letter="价">价</span>
<span class="letter" data-letter=",">,</span>
<span class="letter" data-letter="搭">搭</span>
<span class="letter" data-letter="建">建</span>
<span class="letter" data-letter="分">分</span>
<span class="letter" data-letter="站">站</span>
<span class="letter" data-letter="商">商</span>
<span class="letter" data-letter="品">品</span>
<span class="letter" data-letter="更">更</span>
<span class="letter" data-letter="便">便</span>
<span class="letter" data-letter="宜">宜</span>
<span class="letter" data-letter="专">专</span>
<span class="letter" data-letter="业">业</span>
<span class="letter" data-letter="版">版</span>
<span class="letter" data-letter="只">只</span>
<span class="letter" data-letter="需">需</span>
<span class="letter" data-letter="2.8">2.8</span>
</div>

亿七Seven

添加新评论

很多东西宁缺毋滥,流星的光芒短暂而灼热闪耀。

让你变得更好的那个人,往往是你觉得很难与之相处的那个人。—— by 小宇

觉得自己做的到和不做的到,其实只在一念之间。

路在自己脚下,没有人可以决定我的方向。

你的选择是做或不做,但不做就永远不会有机会。

凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。