"mobile color"
Bootstrap 3.0.0 Snippet by ravindra93

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/yusufbkr/pen/JdBxpj?depth=everything&order=popularity&page=40&q=translate&show_forks=false" /> <style class="cp-pen-styles">.phoneBox, .phoneBox .phoneInfo, .phoneBox header, .phoneBox .phoneSingle { position: relative; float: left; width: 100%; } .phoneBox { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .phoneBox .phoneInfo { height: 20px; overflow: hidden; } .phoneBox header { height: 70px; overflow: hidden; } .phoneBox .materialButton { width: 60px; height: 60px; background: #FC4B6B; border-radius: 50%; position: absolute; right: 30px; top: 60px; z-index: 2; cursor: pointer; } .phoneBox .materialButton:before, .phoneBox .materialButton:after { content: ""; background: #fff; z-index: 2; position: absolute; top: 50%; left: 50%; transition: 200ms cubic-bezier(.4, 0, .2, 1); -webkit-transition: 200ms cubic-bezier(.4, 0, .2, 1); -ms-transition: 200ms cubic-bezier(.4, 0, .2, 1); transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .phoneBox .materialButton.active:before, .phoneBox .materialButton.active:after { transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%); } .phoneBox .materialButton:before { width: 15px; height: 3px; } .phoneBox .materialButton:after { width: 3px; height: 15px; } .phoneBox .materialButton .scale { width: 100px; height: 100px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .phoneBox .materialButton .scale:before { content: ""; width: 60px; height: 60px; background: #FC4B6B; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .phoneBox .materialButton .scale .scaleColor { width: 25px; height: 0px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); position: absolute; top: 50%; left: 50%; margin-top: -0px; margin-left: -12.5px; border-radius: 25px; transition: 200ms cubic-bezier(.4, 0, .2, 1); -webkit-transition: 200ms cubic-bezier(.4, 0, .2, 1); -ms-transition: 200ms cubic-bezier(.4, 0, .2, 1); transform: rotate(0deg) translate(0px, 50%); -webkit-transform: rotate(0deg) translate(0px, 50%); -ms-transform: rotate(0deg) translate(0px, 50%); } .phoneBox .materialButton .scale .scaleColor:hover { height: 55px !important; margin-top: -27.5px !important; } .phoneBox .materialButton .scale .scaleColor:nth-child(1) { transform: rotate(90deg) translate(0px, 50%); -webkit-transform: rotate(90deg) translate(0px, 50%); -ms-transform: rotate(90deg) translate(0px, 50%); background: #F44336; } .phoneBox .materialButton .scale .scaleColor:nth-child(2) { transform: rotate(135deg) translate(0px, 50%); -webkit-transform: rotate(135deg) translate(0px, 50%); -ms-transform: rotate(135deg) translate(0px, 50%); background: #9C27B0; } .phoneBox .materialButton .scale .scaleColor:nth-child(3) { transform: rotate(180deg) translate(0px, 50%); -webkit-transform: rotate(180deg) translate(0px, 50%); -ms-transform: rotate(180deg) translate(0px, 50%); background: #3F51B5; } .phoneBox .materialButton .scale .scaleColor:nth-child(4) { transform: rotate(225deg) translate(0px, 50%); -webkit-transform: rotate(225deg) translate(0px, 50%); -ms-transform: rotate(225deg) translate(0px, 50%); background: #03A9F4; } .phoneBox .materialButton .scale .scaleColor:nth-child(5) { transform: rotate(270deg) translate(0px, 50%); -webkit-transform: rotate(270deg) translate(0px, 50%); -ms-transform: rotate(270deg) translate(0px, 50%); background: #009688; } .phoneBox .materialButton .scale .scaleColor:nth-child(6) { transform: rotate(315deg) translate(0px, 50%); -webkit-transform: rotate(315deg) translate(0px, 50%); -ms-transform: rotate(315deg) translate(0px, 50%); background: #8BC34A; } .phoneBox .materialButton .scale .scaleColor:nth-child(7) { transform: rotate(360deg) translate(0px, 50%); -webkit-transform: rotate(360deg) translate(0px, 50%); -ms-transform: rotate(360deg) translate(0px, 50%); background: #FFEB3B; } .phoneBox .materialButton .scale .scaleColor:nth-child(8) { transform: rotate(405deg) translate(0px, 50%); -webkit-transform: rotate(405deg) translate(0px, 50%); -ms-transform: rotate(405deg) translate(0px, 50%); background: #FF9800; } .phoneBox .phoneSingle { background: #fff; } .box-color { width: 60px; height: 60px; position: absolute; border-radius: 50%; } .color { width: 0px; height: 0px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .color.first-active { width: 5000px; height: 5000px; } .color.active { z-index: 2; } .color.body-color-1 { background: #E57373; } .color.phoneInfo-color-1 { background: #D32F2F; } .color.header-color-1 { background: #F44336; } .color.body-color-2 { background: #BA68C8; } .color.phoneInfo-color-2 { background: #7B1FA2; } .color.header-color-2 { background: #9C27B0; } .color.body-color-3 { background: #7986CB; } .color.phoneInfo-color-3 { background: #303F9F; } .color.header-color-3 { background: #3F51B5; } .color.body-color-4 { background: #4FC3F7; } .color.phoneInfo-color-4 { background: #0288D1; } .color.header-color-4 { background: #03A9F4; } .color.body-color-5 { background: #4DB6AC; } .color.phoneInfo-color-5 { background: #00796B; } .color.header-color-5 { background: #009688; } .color.body-color-6 { background: #AED581; } .color.phoneInfo-color-6 { background: #689F38; } .color.header-color-6 { background: #8BC34A; } .color.body-color-7 { background: #FFF176; } .color.phoneInfo-color-7 { background: #FBC02D; } .color.header-color-7 { background: #FFEB3B; } .color.body-color-8 { background: #FFB74D; } .color.phoneInfo-color-8 { background: #F57C00; } .color.header-color-8 { background: #FF9800; } .materialContainer { width: 100%; max-width: 380px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 10; } .row { margin: 0 -20px; } html, body { overflow: hidden; } *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; list-style-type: none; outline: none; }</style></head><body> <div class="body-colors box-color"> <div class="color body-color-1 first-active"></div> <div class="color body-color-2"></div> <div class="color body-color-3"></div> <div class="color body-color-4"></div> <div class="color body-color-5"></div> <div class="color body-color-6"></div> <div class="color body-color-7"></div> <div class="color body-color-8"></div> </div> <div class="materialContainer"> <div class="phoneBox"> <div class="phoneInfo"> <div class="phoneInfo-colors box-color"> <div class="color phoneInfo-color-1 first-active"></div> <div class="color phoneInfo-color-2"></div> <div class="color phoneInfo-color-3"></div> <div class="color phoneInfo-color-4"></div> <div class="color phoneInfo-color-5"></div> <div class="color phoneInfo-color-6"></div> <div class="color phoneInfo-color-7"></div> <div class="color phoneInfo-color-8"></div> </div> </div> <header> <div class="header-colors box-color"> <div class="color header-color-1 first-active"></div> <div class="color header-color-2"></div> <div class="color header-color-3"></div> <div class="color header-color-4"></div> <div class="color header-color-5"></div> <div class="color header-color-6"></div> <div class="color header-color-7"></div> <div class="color header-color-8"></div> </div> </header> <div class="phoneSingle"></div> <div class="materialButton"> <div class="scale"> <div class="scaleColor"></div> <div class="scaleColor"></div> <div class="scaleColor"></div> <div class="scaleColor"></div> <div class="scaleColor"></div> <div class="scaleColor"></div> <div class="scaleColor"></div> <div class="scaleColor"></div> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(function() { $(window).resize(function() { $(".phoneBox .phoneSingle").height(parseInt(($(window).height() / 100) * 70)) }); $(".phoneBox .phoneSingle").height(parseInt(($(window).height() / 100) * 70)) $(".body-colors").css({ "top": $(".materialButton").offset().top + "px", "left": $(".materialButton").offset().left + "px" }) $(".phoneInfo-colors,.header-colors").each(function() { var top = $(".materialButton").offset().top - $(this).offset().top, left = $(".materialButton").offset().left - $(this).offset().left; $(this).css({ "top": top + "px", "left": left + "px" }) }); $(".materialButton").click(function() { if ($(".phoneBox .materialButton").hasClass('active')) { $(".phoneBox .materialButton").removeClass('active') for (var i = 1; i < 9; i++) {if (window.CP.shouldStopExecution(1)){break;} $(".phoneBox .materialButton .scale .scaleColor:nth-child(" + i + ")").delay((i * 50) - 100).animate({ height: 0, marginTop: -0 }, 300); } window.CP.exitedLoop(1); } else { $(".phoneBox .materialButton").addClass('active') for (var i = 1; i < 9; i++) {if (window.CP.shouldStopExecution(2)){break;} $(".phoneBox .materialButton .scale .scaleColor:nth-child(" + i + ")").delay((i * 50) - 100).animate({ height: 50, marginTop: -25 }, 300); } window.CP.exitedLoop(2); } }) $(".materialButton .scale .scaleColor").click(function() { $(".color").removeClass('active'); $(".color").addClass('no-active'); $(".header-colors .header-color-" + ($(this).index() + 1)).each(function() { $(this).addClass("active").removeClass('no-active').animate({ width: 3000, height: 3000 }, 1500); }); $(".phoneInfo-colors .phoneInfo-color-" + ($(this).index() + 1)).each(function() { $(this).addClass("active").removeClass('no-active').animate({ width: 3000, height: 3000 }, 1500); }); $(".body-colors .body-color-" + ($(this).index() + 1)).each(function() { $(this).addClass("active").removeClass('no-active').animate({ width: 3000, height: 3000 }, 1500); }); setTimeout(function() { $(".color.no-active").width(0); $(".color.no-active").height(0); }, 1500); }) setTimeout(function() { $(".materialButton").click(); }, 1500) setTimeout(function() { $(".materialButton .scale .scaleColor").eq(4).click(); }, 3000) }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: