Ringing bell

Developer
Michael Lee
Size
3,287 Kb
Views
4,048
  1. Ringing bell Previews
  2. Ringing bell HTML Codes
  3. Ringing bell CSS Codes

How do I make an ringing bell?

Just playing around with an animation idea I had for CodeHive's notification icon. Don't think I have the timing or origin quite right. Any suggestions are welcomed :). What is a ringing bell? How do you make a ringing bell? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Ringing bell Previews
IQ Test

Ringing bell - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ringing bell</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .notification { border: 2px solid #000; font-size: 2.5rem; display: inline-block; text-align: center; line-height: 3.125rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; height: 1.25em; width: 1.25em;
}
.notification:hover .notification-icon { -webkit-animation: drop 0.4s; -moz-animation: drop 0.4s; animation: drop 0.4s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform-origin: 50% 6px; -moz-transform-origin: 50% 6px; -ms-transform-origin: 50% 6px; -o-transform-origin: 50% 6px; transform-origin: 50% 6px;
}
.centerer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.notification-label { font-size: 1.25rem; font-weight: 300; letter-spacing: 5px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
}
@-webkit-keyframes drop { 0%, 100% { -webkit-transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(6deg); } 40%, 80% { -webkit-transform: rotate(-6deg); }
}
@-moz-keyframes drop { 0%, 100% { -moz-transform: rotate(0); } 20%, 60% { -moz-transform: rotate(6deg); } 40%, 80% { -moz-transform: rotate(-6deg); }
}
@keyframes drop { 0%, 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 40%, 80% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="notification centerer"> <div class="notification-icon ion-ios-bell"></div> <div class="notification-label">HOVER</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Ringing bell - Script Codes CSS Codes

.notification { border: 2px solid #000; font-size: 2.5rem; display: inline-block; text-align: center; line-height: 3.125rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; height: 1.25em; width: 1.25em;
}
.notification:hover .notification-icon { -webkit-animation: drop 0.4s; -moz-animation: drop 0.4s; animation: drop 0.4s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform-origin: 50% 6px; -moz-transform-origin: 50% 6px; -ms-transform-origin: 50% 6px; -o-transform-origin: 50% 6px; transform-origin: 50% 6px;
}
.centerer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.notification-label { font-size: 1.25rem; font-weight: 300; letter-spacing: 5px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
}
@-webkit-keyframes drop { 0%, 100% { -webkit-transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(6deg); } 40%, 80% { -webkit-transform: rotate(-6deg); }
}
@-moz-keyframes drop { 0%, 100% { -moz-transform: rotate(0); } 20%, 60% { -moz-transform: rotate(6deg); } 40%, 80% { -moz-transform: rotate(-6deg); }
}
@keyframes drop { 0%, 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 20%, 60% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 40%, 80% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); }
}
Ringing bell - Script Codes
Ringing bell - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 3.5
Size 3,287 Kb
Views 4,048
Do you need developer help for Ringing bell?

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!

Michael Lee (michaellee) Script Codes
Name
SVG Triforce
Rotating Button
Axe the Hamburger, Hail the Tab Bar
My Daily Routine Visualized
SVG Hearts
Current time clock icon
Mountains Illustration
Stop Using Corner Banners
Profile background and color changer prototype for CodeHive
X Mobile Menu
Create amazing Facebook ads 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!