Home > Web Front-end > HTML Tutorial > css2D特效tranform--文字折叠效果_html/css_WEB-ITnose

css2D特效tranform--文字折叠效果_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:13:53
Original
1566 people have browsed it

<!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>
Copy after login


source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template