"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<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/internette/pen/pyLERq?limit=all&page=3&q=partial" /> <style class="cp-pen-styles">@keyframes cloud-one { 0% { left: 0%; } 50% { left: 80%; } 100% { left: 0%; } } @keyframes cloud-two { 0% { left: 80%; } 50% { left: -5%; } 100% { left: 80%; } } @keyframes cloud-three { 0% { left: 110%; } 50% { left: -20%; } 100% { left: 110%; } } @keyframes cloud-four { 0% { left: -20%; } 50% { left: 50%; } 100% { left: -20%; } } @keyframes cloud-five { 0% { left: 30%; } 50% { left: 100%; } 100% { left: 30%; } } @keyframes cloud-six { 0% { left: -10%; } 50% { left: 100%; } 100% { left: -10%; } } @keyframes bird-1 { 0% { transform: rotate(-15deg) scaleY(0.75); } 50% { transform: rotate(15deg) scaleY(0.75); } 100% { transform: rotate(-15deg) scaleY(0.75); } } @keyframes bird-2 { 0% { transform: rotate(15deg) scale(0.75, 0.5); } 50% { transform: rotate(-15deg) scale(0.75, 0.5); } 100% { transform: rotate(15deg) scale(0.75, 0.5); } } html, body { margin: 0; height: 100%; background: #F3F3F3; } .badge { border-radius: 50%; width: 15em; height: 15em; position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: linear-gradient(#F4A698 10%, #F0937A 10%, #F0937A 20%, #EE7671 20%, #EE7671 30%, #E56152 30%, #E56152 40%, #E23B3C 40%, #E23B3C 50%, #C7342B 50%, #C7342B 60%, #9B261C 60%); } #hide-overflow { border-radius: 50%; width: 15em; height: 15em; overflow: hidden; position: relative; } #moon { border-radius: 50%; width: 2.5em; height: 2.5em; background: #7B1910; position: absolute; top: 8.10811em; left: 2.30769em; } #moon:after { content: ''; display: block; background: #7B1910; position: absolute; width: 2.5em; height: 15em; top: 1.25em; } #tower { width: 0.125em; height: 0; position: absolute; bottom: 2px; left: 50%; margin-left: -0.63393em; border-bottom: solid #7B1910 21em; border-left: 0.57143em solid transparent; border-right: 0.57143em solid transparent; } #tower:before { content: ''; display: block; width: 0.125em; height: 0.125em; border-radius: 50%; background: #7B1910; position: absolute; top: -0.0625em; } #tower #top { width: 0.5em; height: 0.16667em; background: #7B1910; border-radius: 50%; position: absolute; top: 2.25em; left: 50%; margin-left: -0.28571em; } #tower #middle { width: 0.71429em; height: 0.16667em; background: #7B1910; border-radius: 50%; position: absolute; left: 50%; margin-left: -0.35714em; top: 4.25em; } #tower #bottom { width: 0.90909em; height: 0.36364em; background: #7B1910; border-radius: 50%; position: absolute; left: 50%; margin-left: -0.47619em; top: 6.9em; } #tower #bauble { width: 1.11111em; height: 2em; background: #7B1910; position: absolute; top: 7.7em; left: 50%; margin-left: -0.57692em; } #tower #bauble:before { content: ''; display: block; position: absolute; width: 1.11111em; height: 0.5em; background: #7B1910; margin-top: -0.25em; border-radius: 50%; } #tower #bauble:after { content: ''; display: block; background: #7B1910; position: absolute; border-radius: 50%; width: 1.9em; height: 1.9em; left: 50%; margin-left: -0.95em; top: 0.95em; } #tower #deck { background-color: #7B1910; width: 1.11111em; height: 0.4em; position: absolute; top: 11em; left: 50%; margin-left: -0.55556em; } #tower #deck:before { content: ''; display: block; width: 1.11111em; height: 0.3em; position: absolute; top: -0.15em; background: #7B1910; border-radius: 50%; } #tower #deck:after { content: ''; display: block; width: 1.11111em; height: 0.3em; position: absolute; bottom: -0.15em; background: #7B1910; border-radius: 50%; } #building-1 { background: #9B261C; width: 3em; height: 6.66667em; position: absolute; bottom: -0.6em; } #building-1 .window { background: #E23B3C; height: 1.07143em; width: 2.14286em; position: absolute; left: -0.23077em; } #building-1 .window:first-child { bottom: 4.28571em; } #building-1 .window:last-child { bottom: 2.5em; } #building-2 { background: #E23B3C; width: 2.72727em; height: 6em; position: absolute; bottom: -1em; left: 3em; box-sizing: border-box; padding: 0.33333em 0.33333em; } #building-2:after { content: ''; display: block; width: 1.15385em; height: 6em; background: #7B1910; position: absolute; left: 2.72727em; top: 0.45455em; transform: skewY(40deg); } #building-2 .window { width: 100%; height: 100%; position: relative; margin: 0; background-image: repeating-linear-gradient(90deg, #F4CFCA 0%, #F4CFCA 13%, transparent 13%, transparent 21.75%, #F4CFCA 21.75%, #F4CFCA 34.75%, transparent 34.75%, transparent 43.5%, #F4CFCA 43.5%, #F4CFCA 56.5%, transparent 56.5%, transparent 65.25%, #F4CFCA 65.25%, #F4CFCA 78.25%, transparent 78.5%, transparent 87%, #F4CFCA 87%, #F4CFCA 100%); background-size: 100%; } #building-2 .window:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: repeating-linear-gradient(180deg, transparent, transparent 70%, #E23B3C 70%, #E23B3C 100%); background-size: 14.25%; } #building-3 { background: #C7342B; position: absolute; bottom: 2.14286em; width: 0.88235em; height: 3em; left: 6.40909em; transform: skewY(-10deg); padding: 0.15em; box-sizing: border-box; } #building-3 .window { background: #F4CFCA; width: 0.16em; height: 0.25em; transform: skewY(-7deg); } #building-3 .window#one { margin: 0.1em 0 0 0.25em; } #building-3 .window#two { margin: 0.4em 0 0; } #building-4 { background: #9B261C; width: 1.875em; height: 2.5em; position: absolute; bottom: 0; left: 5.72727em; padding: 0.33333em; box-sizing: border-box; } #building-4 .window { height: 35%; width: 80%; background: #E23B3C; margin-top: 0.33333em; } #building-5 { border-radius: 50%; width: 2.5em; height: 2.5em; background-color: #7B1910; position: absolute; bottom: 3.19149em; right: 0.5em; } #building-5:after { content: ''; display: block; width: 0; height: 0; border-bottom: 1.33333em solid #7B1910; position: absolute; top: -1.2em; left: 50%; margin-left: -3px; border-left: 2px solid transparent; border-right: 2px solid transparent; } #building-6 { width: 3.15789em; height: 4em; background: #C7342B; position: absolute; bottom: 0.8em; right: 2.35em; padding: 0.3em; box-sizing: border-box; } #building-6:after { content: ''; display: block; position: absolute; width: 2.14286em; height: 100%; top: 0.55em; right: -2.14286em; background: #9B261C; transform: skewY(30deg); } #building-6 .window { width: 50%; height: 0.25em; background: #EE7671; } #building-6 .window#top { margin: 0 auto 0.25em; } #building-6 .window#bottom { float: right; } #building-7 { background: #F0937A; width: 2.14286em; height: 3.75em; position: absolute; bottom: 0; right: 5.14286em; transform: skewY(-7deg); padding: 0.25em; box-sizing: border-box; } #building-7:after { content: ''; display: block; transform: skewY(40deg); background: #7B1910; width: 1.875em; height: 3.75em; position: absolute; top: 0.7em; right: -1.875em; } #building-7 .window { height: 0.30769em; width: 100%; margin-bottom: 0.2em; } #building-7 .window.on { background: linear-gradient(to right, #F4CFCA 0%, #F4CFCA 19%, transparent 19%); } #building-8 { width: 5.35714em; height: 3.33333em; background: #E23B3C; position: absolute; bottom: 0; right: 1em; padding: 0.45em 0.5em 0.45em 0.35em; box-sizing: border-box; } #building-8 .window { height: 0.44444em; width: 100%; background: linear-gradient(to right, #F4CFCA 0, #F4CFCA 16%, transparent 16%, transparent 21%, #F4CFCA 21%, #F4CFCA 37%, transparent 37%, transparent 42%, #F4CFCA 42%, #F4CFCA 58%, transparent 58%, transparent 63%, #F4CFCA 63%, #F4CFCA 79%, transparent 79%); margin-bottom: 0.25em; } .cloud { width: 2.5em; position: absolute; } .cloud svg { width: 100%; } .cloud.red svg { fill: #E23B3C; } #full-cloud-1 { top: 0.17857em; animation: 25s cloud-one forwards infinite; } #full-cloud-1 svg { fill: #F4A698; } #full-cloud-2 { top: 0.66667em; animation: 25s cloud-two forwards infinite; } #full-cloud-2 svg { fill: #F0937A; } #full-cloud-3 { top: 3.25em; animation: 40s cloud-three forwards infinite; } #full-cloud-3 svg { fill: #E56152; } #full-cloud-4 { top: 4.75em; animation: 30s cloud-four forwards infinite; } #full-cloud-5 { top: 4.75em; transform: scale(1.5); animation: 40s cloud-five forwards infinite; } #full-cloud-6 { top: 6.15em; animation: 60s cloud-six forwards infinite; transform: scale(1.25); } #full-cloud-6 svg { fill: #C7342B; } .partial-cloud { position: absolute; width: 0.5em; height: 0.5em; border-radius: 50%; border-width: 0.15em; border-style: solid; -webkit-clip-path: inset(0 0 40% 0); clip-path: inset(0 0 40% 0); } .partial-cloud:before { content: ''; display: block; border-width: 0.15em; border-style: solid; position: absolute; border-bottom: 0; right: 0.6em; top: 0.2em; } .partial-cloud:after { content: ''; display: block; border-width: 0.15em; border-style: solid; position: absolute; border-bottom: 0; left: 0.6em; top: 0.2em; } .partial-cloud#cloud-1 { border-color: #F4A698; top: 3.33333em; animation: cloud-six 30s forwards infinite; } .partial-cloud#cloud-1:before { border-color: #F4A698; width: 1.1em; } .partial-cloud#cloud-1:after { border-color: #F4A698; width: 0.4em; } .partial-cloud#cloud-2 { border-color: #F0937A; top: 6.25em; animation: cloud-two 30s forwards infinite; } .partial-cloud#cloud-2:before { border-color: #F0937A; width: 0.4em; } .partial-cloud#cloud-2:after { border-color: #F0937A; width: 1.1em; } .bird { position: absolute; width: 0; z-index: 4; } .bird:before { content: ''; display: block; border-radius: 50%; border-width: 0.15em; border-style: solid; -webkit-clip-path: inset(0 0 50% 50%); clip-path: inset(0 0 50% 50%); position: absolute; left: -1em; } .bird:after { content: ''; display: block; border-radius: 50%; border-width: 0.15em; border-style: solid; -webkit-clip-path: inset(0 50% 50% 0); clip-path: inset(0 50% 50% 0); position: absolute; right: -1em; } .bird#bird-1 { top: 3.4em; left: 70%; transform: rotate(-15deg) scaleY(0.75); animation: 2s bird-1 forwards infinite; } .bird#bird-1:before, .bird#bird-1:after { border-color: #F4A698; width: 0.8em; height: 0.8em; } .bird#bird-2 { top: 3.75em; left: 78%; transform: rotate(15deg) scale(0.75, 0.5); animation: 2s bird-2 forwards infinite; } .bird#bird-2:before, .bird#bird-2:after { border-color: #F4A698; width: 0.8em; height: 0.8em; } .bird#bird-2:before { left: -1em; } .bird#bird-2:after { right: -1em; } </style></head><body> <div class="badge"> <div class="bird" id="bird-1"></div> <div class="bird" id="bird-2"></div> <div id="full-cloud-1" class="cloud"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 338.2"> <g> <path d="M527.3,168c-16.9,0-32.6,5-45.9,13.5c0.5-5.4,0.8-10.9,0.8-16.4C482.2,73.9,409.7,0,320.2,0 c-72.8,0-134.4,48.9-154.8,116.2c-2.4-0.2-4.8-0.4-7.2-0.4c-57,0-103.2,47.1-103.2,105.2c0,1.8,0.2,3.6,0.3,5.3c-0.1,0-0.2,0-0.3,0 c-30.3,0-54.9,25-54.9,55.9s24.6,55.9,54.9,55.9c0.7,0,1.4-0.1,2.1-0.1h470.3c47,0,85-38.1,85-85C612.3,206.1,574.3,168,527.3,168z "/> </g> </svg> </div> <div id="full-cloud-2" class="cloud"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 338.2"> <g> <path d="M527.3,168c-16.9,0-32.6,5-45.9,13.5c0.5-5.4,0.8-10.9,0.8-16.4C482.2,73.9,409.7,0,320.2,0 c-72.8,0-134.4,48.9-154.8,116.2c-2.4-0.2-4.8-0.4-7.2-0.4c-57,0-103.2,47.1-103.2,105.2c0,1.8,0.2,3.6,0.3,5.3c-0.1,0-0.2,0-0.3,0 c-30.3,0-54.9,25-54.9,55.9s24.6,55.9,54.9,55.9c0.7,0,1.4-0.1,2.1-0.1h470.3c47,0,85-38.1,85-85C612.3,206.1,574.3,168,527.3,168z "/> </g> </svg> </div> <div id="full-cloud-3" class="cloud"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 338.2"> <g> <path d="M527.3,168c-16.9,0-32.6,5-45.9,13.5c0.5-5.4,0.8-10.9,0.8-16.4C482.2,73.9,409.7,0,320.2,0 c-72.8,0-134.4,48.9-154.8,116.2c-2.4-0.2-4.8-0.4-7.2-0.4c-57,0-103.2,47.1-103.2,105.2c0,1.8,0.2,3.6,0.3,5.3c-0.1,0-0.2,0-0.3,0 c-30.3,0-54.9,25-54.9,55.9s24.6,55.9,54.9,55.9c0.7,0,1.4-0.1,2.1-0.1h470.3c47,0,85-38.1,85-85C612.3,206.1,574.3,168,527.3,168z "/> </g> </svg> </div> <div id="full-cloud-4" class="cloud red"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 338.2"> <g> <path d="M527.3,168c-16.9,0-32.6,5-45.9,13.5c0.5-5.4,0.8-10.9,0.8-16.4C482.2,73.9,409.7,0,320.2,0 c-72.8,0-134.4,48.9-154.8,116.2c-2.4-0.2-4.8-0.4-7.2-0.4c-57,0-103.2,47.1-103.2,105.2c0,1.8,0.2,3.6,0.3,5.3c-0.1,0-0.2,0-0.3,0 c-30.3,0-54.9,25-54.9,55.9s24.6,55.9,54.9,55.9c0.7,0,1.4-0.1,2.1-0.1h470.3c47,0,85-38.1,85-85C612.3,206.1,574.3,168,527.3,168z "/> </g> </svg> </div> <div id="full-cloud-5" class="red cloud"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 338.2"> <g> <path d="M527.3,168c-16.9,0-32.6,5-45.9,13.5c0.5-5.4,0.8-10.9,0.8-16.4C482.2,73.9,409.7,0,320.2,0 c-72.8,0-134.4,48.9-154.8,116.2c-2.4-0.2-4.8-0.4-7.2-0.4c-57,0-103.2,47.1-103.2,105.2c0,1.8,0.2,3.6,0.3,5.3c-0.1,0-0.2,0-0.3,0 c-30.3,0-54.9,25-54.9,55.9s24.6,55.9,54.9,55.9c0.7,0,1.4-0.1,2.1-0.1h470.3c47,0,85-38.1,85-85C612.3,206.1,574.3,168,527.3,168z "/> </g> </svg> </div> <div id="full-cloud-6" class="cloud"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 338.2"> <g> <path d="M527.3,168c-16.9,0-32.6,5-45.9,13.5c0.5-5.4,0.8-10.9,0.8-16.4C482.2,73.9,409.7,0,320.2,0 c-72.8,0-134.4,48.9-154.8,116.2c-2.4-0.2-4.8-0.4-7.2-0.4c-57,0-103.2,47.1-103.2,105.2c0,1.8,0.2,3.6,0.3,5.3c-0.1,0-0.2,0-0.3,0 c-30.3,0-54.9,25-54.9,55.9s24.6,55.9,54.9,55.9c0.7,0,1.4-0.1,2.1-0.1h470.3c47,0,85-38.1,85-85C612.3,206.1,574.3,168,527.3,168z "/> </g> </svg> </div> <div id="cloud-1" class="partial-cloud"></div> <div id="cloud-2" class="partial-cloud"></div> <div id="tower"> <div id="top"></div> <div id="middle"></div> <div id="bottom"></div> <div id="bauble"></div> <div id="deck"></div> </div> <div id="hide-overflow"> <div id="moon"></div> <div id="building-1"> <div class="window"></div> <div class="window"></div> </div> <div id="building-2"> <div class="window"></div> </div> <div id="building-3"> <div class="window" id="one"></div> <div class="window" id="two"></div> </div> <div id="building-4"> <div class="window"></div> </div> <div id="building-5"></div> <div id="building-6"> <div class="window" id="top"></div> <div class="window" id="bottom"></div> </div> <div id="building-7"> <div class="window on"></div> <div class="window"></div> <div class="window"></div> <div class="window on"></div> <div class="window on"></div> </div> <div id="building-8"> <div class="window"></div> <div class="window"></div> <div class="window"></div> </div> </div> </div> </body></html>

Related: See More


Questions / Comments: