<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: #eee; } .box { width: 500px; margin: 100px auto; } .box span { float: left; width: 100px; height: 100px; font-size: 80px; line-height: 100px; text-align: center; position: relative; } span::before, span::after { /* 通过伪元素来获取自定义属性的值 */ content: attr(data-text); position: absolute; left: 0; top: 0; width: 100px; height: 100px; font-size: 80px; line-height: 100px; text-align: center; transform: scale(0.95, 1); transform-origin: left top; color: #fff; transition: all 0.5s; } span::before { color: rgba(0, 0, 0, 0.3); } .box:hover span::after { transform: rotateY(25deg) skew(0deg, 5deg); } .box:hover span::before { transform: skew(0deg, 15deg); } </style> </head> <body> <div class="box"> <span data-text="唯">唯</span> <span data-text="快">快</span> <span data-text="不">不</span> <span data-text="破">破</span> </div> </body> </html>
- demo 效果
