Heim >Web-Frontend >HTML-Tutorial >css2D特效tranform--文字折叠效果_html/css_WEB-ITnose
css2D特效tranform--文字折叠效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:13:531579Durchsuche
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style>body{ background: #34c4e6; }p{ color: aliceblue; font-family: "微软雅黑"; font-size: 8em;; font-weight: bold; text-align: center; }p span{position: relative;}p span:before{ content: attr(data-text); display: inline-block; position: absolute; top: 0px; left: 0px; color: #34c4e6; transform-origin: left top; transform:rotateY(-40deg); text-shadow: 1px 1px 0 #34869a; z-index: 2;}p span:hover::before{ color: #34c4e6; transform:rotateY(0);}p span:after{ content: attr(data-text); display: inline-block; position: absolute; top: 0px; left: 0px; color:rgba(0,0,0,0.2); transform-origin: left top; transform:skew(0deg,20deg);}p span:hover::after{ color: #684da3; transform:rotateY(0);} </style><body> <p> <span data-text="郭">郭</span> <span data-text="垒">垒</span> <span data-text="好">好</span> </p></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：获得html元素自身的宽度_html/css_WEB-ITnoseNächster Artikel：各种设备的CSS3MediaQuery整理及爽歪歪写法_html/css_WEB-ITnose