本文亦发布于个人的CSDN
效果展示
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cRack</title>
</head>
<body>
<ul>
<li>
<span data="H">H</span>
<span data="A">A</span>
<span data="P">P</span>
<span data="P">P</span>
<span data="Y">Y</span>
</li>
<li>
<span data="N">N</span>
<span data="E">E</span>
<span data="W">W</span>
</li>
<li>
<span data="Y">Y</span>
<span data="E">E</span>
<span data="A">A</span>
<span data="R">R</span>
</li>
</ul>
</body>
</html>
<style>
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background-color: brown;
}
ul {
list-style: none;
padding-top: 100px;
}
ul > li {
font-size: 0;
text-align: center;
}
ul > li > span {
display: inline-block;
/* border: 1px solid #000; */
width: 200px;
height: 200px;
font-size: 200px;
line-height: 200px;
text-align: center;
font-weight: bold;
position: relative;
}
ul > li > span::before, ul > li > span::after {
content: attr(data);
display: inline-block;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
ul > li > span::before{
color: rgb(0, 0, 0, 0.2);
transform: skew(5deg) translateX(10px);
transition: .2s;
}
ul > li > span::after{
color: brown;
text-shadow: 0 -2px 5px rgb(219, 104, 104);
transform-origin: 100% 0 0;
transform: rotateX(20deg);
transition: .2s;
}
ul > li > span:hover::before {
transform: skew(20deg) translateX(25px) scale(1, 1.1) translateY(10px)
}
ul > li > span:hover::after{
color: rgb(199, 72, 72);
transform: rotateX(48deg) translateY(5px)
}
</style>
网友评论