Home > Article > Web Front-end > css2D特效tranform--文字折叠效果_html/css_WEB-ITnose
css2D特效tranform--文字折叠效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:13:531496browse
<!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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：获得html元素自身的宽度_html/css_WEB-ITnoseNext article：各种设备的CSS3MediaQuery整理及爽歪歪写法_html/css_WEB-ITnose