Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Multi-layer shadow animation</title>
- <style>
- body {
- height: 100vh;
- margin: 0;
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: rgb(38, 38, 38);
- }
- .card {
- width: 150px;
- height: 200px;
- background-color: #4b4b53;
- border-radius: 4px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: default;
- transition:
- box-shadow .5s,
- transform .25s;
- }
- .card:hover {
- cursor: default;
- box-shadow:
- 5px 3px rgba(255, 255, 255, .05),
- 10px 6px rgba(255,255,255, .04),
- 15px 9px rgba(255, 255, 255, .03);
- transform:
- rotate(20deg)
- skew(-10deg, -5deg);
- transition:
- box-shadow .75s,
- transform .375s;
- }
- p, span {
- color: white;
- font-family: Arial, Helvetica, sans-serif;
- font-weight: bold;
- font-size: 20px;
- text-align: center;
- }
- .unselectable {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- </style>
- </head>
- <body>
- <div class="card unselectable">
- <p>🤑<br>Hover me</p>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement