Paper Cut Letter code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Paper cut letter</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <span data-title="A">A</span> <span data-title="W">W</span> <span data-title="E">E</span> <span data-title="S">S</span> <span data-title="O">O</span> <span data-title="M">M</span> <span data-title="E">E</span> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .container { text-align: center; margin: 200px auto 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .container span { font-size: 10em; color: blueviolet; position: relative; text-shadow: -1px 0 0 rgba(0,0,0,0.2); } .container span::before { content: attr(data-title); position: absolute; top: 0; left: 0; transform-origin: left; color: white; transition: 0.5s cubic-bezier(.17,.67,.24,.95); transform: rotateY(25deg); z-index: 2; } .container span::after { content: attr(data-title); position: absolute; top: 0; left: 0; transform-origin: left; color: rgba(0,0,0,0.1); transition: 0.5s cubic-bezier(.17,.67,.24,.95); transform: rotateY(5deg) scale(1.07 , 1) skewY(3deg); z-index: 1; opacity: 0.5; } .container span:hover::before { transform: perspective(1000px) rotateY(-15deg); } .container span:hover::after { transform: rotateY(0deg) scale(1.11 , 1) skewY(6deg); }
