Bell
How do I make an bell?
What is a bell? How do you make a bell? This script and codes were developed by Özgür Sağıroğlu on 13 August 2022, Saturday.
Bell - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bell</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.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! */ body { background: #fefefe;
}
.container { position: absolute; top: 50%; left: 50%; width: 168px; height: 200px; margin: -100px 0 0 -84px;
}
@keyframes anim1 { 0% { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } to { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
}
@keyframes anim2 { 0% { -moz-transform: translateX(-2.5px); -ms-transform: translateX(-2.5px); -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } 50% { -moz-transform: translateX(2.5px); -ms-transform: translateX(2.5px); -webkit-transform: translateX(2.5px); transform: translateX(2.5px); } to { -moz-transform: translateX(-2.5px); -ms-transform: translateX(-2.5px); -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); }
}
.bell { overflow: hidden;
}
.bell > i { font-size: 180px; color: #edc357;
}
.bell.bell1 { position: absolute; height: 152px; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; animation: anim1 3s ease-in-out infinite, anim3 1s 1s;
}
.bell.bell1 > i { margin-top: 3px;
}
.bell.bell2 { position: relative; height: 26px; margin-top: 150px; animation: anim2 3s ease-in-out infinite;
}
.bell.bell2 > i { position: absolute; top: -153px; left: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="bell bell1"> <i class="fa fa-bell"></i> </div> <div class="bell bell2"> <i class="fa fa-bell"></i> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Bell - Script Codes CSS Codes
body { background: #fefefe;
}
.container { position: absolute; top: 50%; left: 50%; width: 168px; height: 200px; margin: -100px 0 0 -84px;
}
@keyframes anim1 { 0% { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } to { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
}
@keyframes anim2 { 0% { -moz-transform: translateX(-2.5px); -ms-transform: translateX(-2.5px); -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } 50% { -moz-transform: translateX(2.5px); -ms-transform: translateX(2.5px); -webkit-transform: translateX(2.5px); transform: translateX(2.5px); } to { -moz-transform: translateX(-2.5px); -ms-transform: translateX(-2.5px); -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); }
}
.bell { overflow: hidden;
}
.bell > i { font-size: 180px; color: #edc357;
}
.bell.bell1 { position: absolute; height: 152px; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; animation: anim1 3s ease-in-out infinite, anim3 1s 1s;
}
.bell.bell1 > i { margin-top: 3px;
}
.bell.bell2 { position: relative; height: 26px; margin-top: 150px; animation: anim2 3s ease-in-out infinite;
}
.bell.bell2 > i { position: absolute; top: -153px; left: 0;
}
Bell - Script Codes JS Codes
(function() {
}).call(this);
Developer | Özgür Sağıroğlu |
Username | ozgursagiroglu |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 3,251 Kb |
Views | 32,384 |
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!
Name | Size |
FitScroll | 3,816 Kb |
Css3 box border animation | 3,619 Kb |
Fit font size | 3,404 Kb |
Js scroll after before action | 2,907 Kb |
CSS3 Yin Yang Animation | 2,702 Kb |
Text-shadow effect on key press | 3,707 Kb |
CSS3 Station Message | 5,911 Kb |
Heart | 2,947 Kb |
CSS3 Hourglass | 5,732 Kb |
Next Effect | 6,388 Kb |
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!
Name | Username | Size |
Responsive scrolling text | Ashdurham | 2,259 Kb |
FCC - Tribute Page | Cmwebby | 0 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!