Animated CSS3 Mobile Phone
How do I make an animated css3 mobile phone?
Something i've been working on today. An Animated CSS3 Mobile Phone. Depends on Jquery to toggle required classes to trigger animation. . What is a animated css3 mobile phone? How do you make a animated css3 mobile phone? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.
Animated CSS3 Mobile Phone - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated CSS3 Mobile Phone</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <a href='' id='kapow'>Go!</a> <p> <small>Don't forget to resize the window ↓</small> </p> <div id='mobile'> <span id='screen'> <div id='notification'>1 Notification</div> <span class='dollar'></span> <span class='dollar'></span> <span class='dollar'></span> <span class='dollar'></span> <span class='dollar'></span> <span class='dollar'></span> </span> <span id='shadow'></span> </div>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated CSS3 Mobile Phone - Script Codes CSS Codes
html, body { background: #f6f6f6; padding: 0; margin: 0;}
header { float: left; width: 100%; height: 550px; position: relative; padding-top: 60px; background: #fab727 ; background: -webkit-linear-gradient(135deg, #fab727 0%, #cd5c5c 100%); background: -moz-linear-gradient(135deg, #fab727 0%, #cd5c5c 100%); background: -o-linear-gradient(135deg, #7fab727 9b0a9 0%, #cd5c5c 100%); background: linear-gradient(135deg, #fab727 0%, #cd5c5c 100%); /* W3C */
}
p { text-align: center; color: #fff; font-size: 18px; font-family: "Roboto", sans-serif; opacity: 0.5}
#kapow { display: block; position: relative; padding: 0; background: #484d4e; color: #fff; font-size: 18px; width: 70px; line-height: 40px; border-radius: 5px; margin: 0 auto; font-family: "Open Sans", sans-serif; text-decoration: none; text-align: center; box-shadow: 0 3px 0 #232728; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease;} #kapow:active { background: #333839; box-shadow: 0 0 0 #000, inset 0 3px 0 #232728; top: 3px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease;}
/* ------- */
/* Mobile */
/* ------ */
#mobile { position: absolute; bottom: -20px; left: 50%; margin-left: -125px; display: block; width: 250px; height: 455px; background: #3a4041; border-radius: 10px; border: 6px solid #fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 10;} .powpow { -webkit-animation: powpow 0.75s ease forwards; -moz-animation: powpow 0.75s ease forwards; -o-animation: powpow 0.75s ease forwards; animation: powpow 0.75s ease forwards;} /* Spring Mobile */ @-webkit-keyframes powpow { 0% { -webkit-transform: scale(1);} 25% { -webkit-transform: scale(1.2);} 50% { -webkit-transform: scale(1);} 75% { -webkit-transform: scale(1.1);} 100% { -webkit-transform: scale(1);} } @-moz-keyframes powpow { 0% { -moz-transform: scale(1);} 25% { -moz-transform: scale(1.2);} 50% { -moz-transform: scale(1);} 75% { -moz-transform: scale(1.1);} 100% { -moz-transform: scale(1);} } @-o-keyframes powpow { 0% { -o-transform: scale(1);} 25% { -o-transform: scale(1.2);} 50% { -o-transform: scale(1);} 75% { -o-transform: scale(1.1);} 100% { -o-transform: scale(1);} } @keyframes powpow { 0% { -webkit-transform: scale(1); transform: scale(1);} 25% { -webkit-transform: scale(1.2); transform: scale(1.3);} 50% { -webkit-transform: scale(1); transform: scale(1);} 75% { -webkit-transform: scale(1.1); transform: scale(1.1);} 100% { -webkit-transform: scale(1); transform: scale(1);} } /* Camera */ #mobile:after { display: block; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #505b5d; position: absolute; top: 20px; left: 50%; margin-left: -5px;} /* Speaker */ #mobile:before { display: block; content: ""; width: 120px; height: 10px; border-radius: 5px; background: #505b5d; position: absolute; top: 40px; left: 50%; margin-left: -60px;} /* Screen */ #screen { display: block; content: ""; width: 230px; height: 300px; position: absolute; top: 70px; left: 50%; margin-left: -115px; background: #232728; border-radius: 5px;} /* Button */ #screen:after { display: block; content: ""; width: 30px; height: 30px; position: absolute; bottom: -64px; left: 50%; margin-left: -22px; background: #667477; border-radius: 22px; border: 7px solid #505b5d;} /* Blind Bling */ #screen span:before { display: block; opacity: 0; position: absolute; top: 240px; left: 170px; text-align: center; width: 20px; height: 20px; content: "$"; font-family: "Roboto", sans-serif; font-size: 19px; color: #fff; line-height: 20px;} /* Dollar 1 */ #screen span:nth-child(2)::before { top: 60px; left: 80px; font-size: 19px; line-height: 20px; width: 20px; height: 20px;} #screen span.bling:nth-child(2)::before { -webkit-animation: dollarA 1s ease forwards 0.75s; -moz-animation: dollarA 1s ease forwards 0.75s; -o-animation: dollarA 1s ease forwards 0.75s; animation: dollarA 1s ease forwards 0.75s;} /* Animate */ @keyframes dollarA { 0% { opacity: 0; -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0);} 100% { opacity: 0.8; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} } @-webkit-keyframes dollarA { 0% { opacity: 0; -webkit-transform: translate3d(0,-10px,0);} 100% { opacity: 0.8; -webkit-transform: translate3d(0,0,0);} } @-moz-keyframes dollarA { 0% { opacity: 0; -moz-transform: translate3d(0,-10px,0);} 100% { opacity: 0.8; -moz-transform: translate3d(0,0,0);} } @-o-keyframes dollarA { 0% { opacity: 0; -o-transform: translate3d(0,-10px,0);} 100% { opacity: 0.8; -o-transform: translate3d(0,0,0);} } /* Dollar 2 */ #screen span:nth-child(3)::before { top: 100px; left: 60px; font-size: 110px; line-height: 110px; width: 110px; height: 110px;} #screen span.bling:nth-child(3)::before { -webkit-animation: dollarB 1.25s ease forwards 1s; -moz-animation: dollarB 1.25s ease forwards 1s; -o-animation: dollarB 1.25s ease forwards 1s; animation: dollarB 1.25s ease forwards 1s;} /* Animate */ @keyframes dollarB { 0% { opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);} 100% { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} } @-webkit-keyframes dollarB { 0% { opacity: 0; -webkit-transform: translate3d(0,-20px,0);} 100% { opacity: 1; -webkit-transform: translate3d(0,0,0);} } @-moz-keyframes dollarB { 0% { opacity: 0; -moz-transform: translate3d(0,-20px,0);} 100% { opacity: 1; -moz-transform: translate3d(0,0,0);} } @-o-keyframes dollarB { 0% { opacity: 0; -o-transform: translate3d(0,-20px,0);} 100% { opacity: 1; -o-transform: translate3d(0,0,0);} } /* Dollar 3 */ #screen span:nth-child(4)::before { top: 190px; left: 20px; font-size: 50px; line-height: 50px; width: 50px; height: 50px;} #screen span.bling:nth-child(4)::before { -webkit-animation: dollarC 1s ease forwards 0.75s; -moz-animation: dollarC 1s ease forwards 0.75s; -o-animation: dollarC 1s ease forwards 0.75s; animation: dollarC 1s ease forwards 0.75s;} /* Animate */ @keyframes dollarC { 0% { opacity: 0; -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0);} 100% { opacity: 0.6; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} } @-webkit-keyframes dollarC { 0% { opacity: 0; -webkit-transform: translate3d(0,-15px,0);} 100% { opacity: 0.6; -webkit-transform: translate3d(0,0,0);} } @-moz-keyframes dollarC { 0% { opacity: 0; -moz-transform: translate3d(0,-15px,0);} 100% { opacity: 0.6; -moz-transform: translate3d(0,0,0);} } @-o-keyframes dollarC { 0% { opacity: 0; -o-transform: translate3d(0,-15px,0);} 100% { opacity: 0.6; -o-transform: translate3d(0,0,0);} } /* Dollar 4 */ #screen span:nth-child(5)::before { top: 160px; left: 180px; font-size: 40px; line-height: 40px; width: 40px; height: 40px;} #screen span.bling:nth-child(5)::before { -webkit-animation: dollarD 1.75s ease forwards 1s; -moz-animation: dollarD 1.75s ease forwards 1s; -o-animation: dollarD 1.75s ease forwards 1s; animation: dollarD 1.75s ease forwards 1s;} /* Animate */ @keyframes dollarD { 0% { opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);} 100% { opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} } @-webkit-keyframes dollarD { 0% { opacity: 0; -webkit-transform: translate3d(0,-20px,0);} 100% { opacity: 0.4; -webkit-transform: translate3d(0,0,0);} } @-moz-keyframes dollarD { 0% { opacity: 0; -moz-transform: translate3d(0,-20px,0);} 100% { opacity: 0.4; -moz-transform: translate3d(0,0,0);} } @-o-keyframes dollarD { 0% { opacity: 0; -o-transform: translate3d(0,-20px,0);} 100% { opacity: 0.4; -o-transform: translate3d(0,0,0);} } /* Dollar 5 */ #screen span:nth-child(6)::before {} #screen span.bling:nth-child(6)::before { -webkit-animation: dollarE 1.5s ease forwards 1s; -moz-animation: dollarE 1.5s ease forwards 1s; -o-animation: dollarE 1.5s ease forwards 1s; animation: dollarE 1.5s ease forwards 1s;} /* Animate */ @keyframes dollarE { 0% { opacity: 0; -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0);} 100% { opacity: 0.2; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} } @-webkit-keyframes dollarE { 0% { opacity: 0; -webkit-transform: translate3d(0,-10px,0);} 100% { opacity: 0.2; -webkit-transform: translate3d(0,0,0);} } @-moz-keyframes dollarE { 0% { opacity: 0; -moz-transform: translate3d(0,-10px,0);} 100% { opacity: 0.2; -moz-transform: translate3d(0,0,0);} } @-o-keyframes dollarE { 0% { opacity: 0; -o-transform: translate3d(0,-10px,0);} 100% { opacity: 0.2; -o-transform: translate3d(0,0,0);} } /* Dollar 6 */ #screen span:nth-child(7)::before { top: 90px; left: 20px; font-size: 40px; line-height: 40px; width: 40px; height: 40px;} #screen span.bling:nth-child(7)::before { -webkit-animation: dollarE 1.25s ease forwards 0.8s; -moz-animation: dollarE 1.25s ease forwards 0.8s; -o-animation: dollarE 1.25s ease forwards 0.8s; animation: dollarE 1.25s ease forwards 0.8s;} /* Animate */ @keyframes dollarE { 0% { opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);} 100% { opacity: 0.1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} } @-webkit-keyframes dollarA { 0% { opacity: 0; -webkit-transform: translate3d(0,-20px,0);} 100% { opacity: 0.1; -webkit-transform: translate3d(0,0,0);} } @-moz-keyframes dollarA { 0% { opacity: 0; -moz-transform: translate3d(0,-20px,0);} 100% { opacity: 0.1; -moz-transform: translate3d(0,0,0);} } @-o-keyframes dollarA { 0% { opacity: 0; -o-transform: translate3d(0,-20px,0);} 100% { opacity: 0.1; -o-transform: translate3d(0,0,0);} }
/* Mobile: Shadow */
#shadow { position: absolute; bottom: -26px; left: 50%; margin-left: -115px; display: block; width: 230px; height: 2px; background: rgba(0,0,0,0.6); border-radius: 50%; z-index: -5; -webkit-filter:blur(4px); -moz-filter:blur(4px); -ms-filter:blur(4px); -o-filter:blur(4px); filter:blur(4px);}
/* Notification */
#notification { background: #dd8673; display: none; position: absolute; top: 5px; left: 5px; width: 220px; height: 40px; border-radius: 3px; text-align: center; color: #fff; line-height: 40px; font-family: "Open Sans", sans-serif; font-size: 20px;} #notification.sayhi { display: block; height: 0; overflow: hidden; -webkit-animation: sayhi 0.25s ease forwards 0.75s; -moz-animation: sayhi 0.25s ease forwards 0.75s; -o-animation: sayhi 0.25s ease forwards 0.75s; animation: sayhi 0.25s ease forwards 0.75s;} /* Animate */ @keyframes sayhi { 0% { display: block; height: 10px; opacity: 0.5; } 100% { display: block; height: 40px; opacity: 1; } } @-webkit-keyframes sayhi { 0% { display: block; height: 10px; opacity: 0.5; } 100% { display: block; height: 40px; opacity: 1; } } @-moz-keyframes sayhi { 0% { display: block; height: 10px; opacity: 0.5; } 100% { display: block; height: 40px; opacity: 1; } } @-o-keyframes sayhi { 0% { display: block; height: 10px; opacity: 0.5; } 100% { display: block; height: 40px; opacity: 1; } }
Animated CSS3 Mobile Phone - Script Codes JS Codes
(function () { /* Ignore This JS Prevent Iframe Flash */ var div = document.createElement('div'), ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0]; div.innerHTML = '­<style> iframe { visibility: hidden; } </style>'; ref.parentNode.insertBefore(div, ref); window.onload = function() { div.parentNode.removeChild(div); } // Pen JS Starts Here jQuery(document).ready(function(){ function kapow(){ $("#kapow").click(function(event){ event.preventDefault(); $("p").fadeOut(1000); if ($(this).html() === "Reset") { $("#kapow").html("Go!"); $("p").fadeIn(500); } else { $(this).html("Reset"); } $("#mobile").toggleClass("powpow"); $("#notification").toggleClass("sayhi"); $("#screen .dollar").toggleClass("bling"); }); } kapow(); });
})();
Developer | Matt Litherland |
Username | mattsince87 |
Uploaded | August 03, 2022 |
Rating | 4 |
Size | 4,609 Kb |
Views | 36,432 |
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 |
Animated Resposnive SVG Path | 5,339 Kb |
Node Waves | 3,216 Kb |
Animated SVG Path | 3,853 Kb |
Vertical Align Images - Explained | 4,610 Kb |
Subtle CSS3 Heart Beat | 2,691 Kb |
Google Inspired CSS Preloader | 3,008 Kb |
Flat Origami Article | 3,581 Kb |
SCSS Social Icons Flat | 3,482 Kb |
Share Your Profile | 3,387 Kb |
Responsive Flat UI Kit | 17,612 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 |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Nice textured background | Hans | 2,659 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
CSS Chat Bubbles | Boylett | 2,094 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!