Senarior
- Want to simple animation when hover an element
Demo
Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
div {
width: 100px;
height: 100px;
position: relative;
border: solid 2px black;
}
div:hover {
animation: hoverDiv 1s forwards;
}
@keyframes hoverDiv {
100% {
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border: solid 2px whitesmoke;
}
}
</style>
</head>
<body>
<div>Hover me</div>
</body>
</html>
Top comments (0)