Bouncing Border

Size
2,548 Kb
Views
30,360

How do I make an bouncing border?

It's actually a bouncing box-shadow. Animating border either moves your element, or changes the apparent size of your content, and looks kind of stupid.. What is a bouncing border? How do you make a bouncing border? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Bouncing Border Previews

Bouncing Border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncing Border</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Bouncing Border*</h1>
<a href="#" class="circle"> <img src="http://placekitten.com/g/500/500" />
</a>
<p>Hover over that adorable kitten.</p>
<p><small>*It's actually a box-shadow, shh.</small></p>
</body>
</html>

Bouncing Border - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
.circle { display: block; width: 200px; height: 200px; margin: 40px auto; box-shadow: 0 0 0 10px #e60000; border-radius: 50%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden;
}
.circle img { width: 100%;
}
.circle:hover { -webkit-animation: border-bounce 300ms linear; -moz-animation: border-bounce 300ms linear;
}
@-webkit-keyframes border-bounce { 0% { box-shadow: 0 0 0 8px #e60000; } 25% { box-shadow: 0 0 0 5px #e60000; } 50% { box-shadow: 0 0 0 15px #e60000; } 75% { box-shadow: 0 0 0 8px #e60000; } 100% { box-shadow: 0 0 0 12px #e60000; }
}
@-moz-keyframes border-bounce { 0% { box-shadow: 0 0 0 8px #e60000; } 25% { box-shadow: 0 0 0 2px #e60000; } 50% { box-shadow: 0 0 0 15px #e60000; } 75% { box-shadow: 0 0 0 8px #e60000; } 100% { box-shadow: 0 0 0 12px #e60000; }
}
body { background: #990000; font: 400 1em Lato, sans-serif; color: #fff; text-align: center;
}
h1 { font: 100 2.5em 'Lato', sans-serif; text-align: center;
}
small { color: #ff3333;
}
Bouncing Border - Script Codes
Bouncing Border - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 2,548 Kb
Views 30,360
Do you need developer help for Bouncing Border?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Derek Wheelden (frxnz) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!