Pure CSS3 teddy

An animated teddy with balloon in pure CSS3 and HTML. No Javascript or Images used.
Check it out here: Demo Link
<html> <head> <style> body { background-color:lightblue; overflow-x: hidden; overflow-y: hidden; } .cloudpart1 { width:200px; height:150px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 500px; } .cloudpart2 { width:150px; height:150px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 300px; left: 30px; } .cloudpart3 { width:200px; height:200px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 130px; left: 80px; } .cloudpart4 { width:230px; height:230px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: -50px; left: 120px; } .cloudpart5 { width:200px; height:200px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: -280px; left: 200px; } .cloudpart6 { width:150px; height:160px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: -450px; left: 320px; } .form2 { position:relative; top: -1430px; left: 470px; z-index:-3; } .cloudpart7 { width:200px; height:130px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 500px; } .cloudpart8 { width:130px; height:130px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 300px; left: 30px; } .cloudpart9 { width:150px; height:150px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 150px; left: 80px; } .cloudpart10 { width:130px; height:100px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: 0px; left: 120px; } .cloudpart11 { width:100px; height:100px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: -70px; left: 200px; } .cloudpart12 { width:300px; height:140px; background:white; -moz-border-radius:50%; border-radius:50%; position:relative; top: -130px; left: 100px; } .rainbow{ width: 550px; height: 400px; background:transparent; border-top: yellow solid 24px; -moz-border-radius: 50%; border-radius: 50%; box-shadow: 0px -22px 0px 0px orange, 0px -40px 0px 0px red, 0px -58px 0px 0px purple, 0px -76px 0px 0px blue, 0px -94px 0px 0px green; position: relative; top:-1630px; left:210px; z-index:-2; -moz-transform:rotate(-50deg); } .teddy{ position:absolute; top:400; left:600px; -moz-animation:ted_animation 30s infinite linear; animation:ted_animation 30s infinite linear; } @keyframes ted_animation { 0% {transform: translate(0px, 0px);} 100% {transform: translate(-1350px,-700px);} } @-moz-keyframes ted_animation { 0% {-moz-transform: translate(0px, 0px);} 100% {-moz-transform: translate(-1350px, -700px);} } .tedhead{ width: 70px; height: 70px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; box-shadow: inset 1px -1px 1px 0px #220000; position: absolute; top:300px; left: 500px; z-index:3; } .ear{ width: 25px; height: 25px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:292px; left: 510px; z-index:1; } .ear2{ width: 27px; height: 27px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:310px; left: 550px; z-index:4; } .earin{ width: 10px; height: 10px; background: DarkGoldenrod; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:297px; left: 515px; z-index:2; } .earin2{ width: 10px; height: 10px; background: DarkGoldenrod; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:317px; left: 560px; z-index:5; } .eye{ width: 13px; height: 18px; background: white; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:313px; left: 508px; z-index:4; transform: rotate(20deg); -moz-transform: rotate(20deg); } .eye2{ width: 13px; height: 18px; background: white; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:323px; left: 531px; z-index:4; transform: rotate(20deg); -moz-transform: rotate(20deg); } .eyespot{ width: 10px; height: 10px; background: black; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:314px; left: 510px; z-index:5; transform: rotate(20deg); -moz-transform: rotate(20deg); } .eyespot2{ width: 10px; height: 10px; background: black; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:324px; left: 533px; z-index:5; transform: rotate(20deg); -moz-transform: rotate(20deg); } .nose{ width: 10px; height: 10px; background: black; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:335px; left: 515px; z-index:5; transform: rotate(20deg); -moz-transform: rotate(20deg); } .mouth{ width: 20px; height: 10px; background:transparent; border-bottom: black solid 5px; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:339px; left:509px; z-index:5; -moz-transform:rotate(25deg); transform: rotate(25deg); } .belly{ width: 90px; height: 100px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; box-shadow: inset 1px -1px 1px 0px #220000; position: absolute; top: 350px; left: 475px; z-index:1; } .arml{ width: 30px; height: 80px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; box-shadow: inset 1px -1px 1px 0px #220000; position: absolute; top: 305px; left: 475px; z-index:0; } .armr{ width: 35px; height: 80px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; box-shadow: inset 1px -1px 1px 0px #220000; position: absolute; top: 365px; left: 545px; z-index:3; transform: rotate(-20deg); -moz-transform: rotate(-20deg); } #ex{ animation:animated_ex 3s infinite linear; -moz-animation:animated_ex 3s infinite linear; } @-moz-keyframes animated_ex { 0% {-moz-transform: rotate(-12deg);} 50% {-moz-transform: rotate(-20deg);} 100% {-moz-transform: rotate(-12deg);} } @keyframes animated_ex { 0% {transform: rotate(-12deg);} 50% {transform: rotate(-20deg);} 100% {transform: rotate(-12deg);} } .legr{ width: 35px; height: 80px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; box-shadow: inset 1px -1px 1px 0px #220000; position: absolute; top: 420px; left: 535px; z-index:2; transform: rotate(-20deg); -moz-transform: rotate(-20deg); } .legl{ width: 35px; height: 80px; background: saddlebrown; -moz-border-radius: 50%; border-radius: 50%; box-shadow: inset 1px -1px 1px 0px #220000; position: absolute; top: 420px; left: 495px; z-index:0; transform: rotate(-20deg); -moz-transform: rotate(-20deg); } .ballon{ position: absolute; top: 100px; left: 440px; width: 100px; height: 90px; } .ballon:before, .ballon:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -moz-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transform-origin: 0 100%; transform-origin: 0 100%; } .ballon:after { left: 0; -moz-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: 100% 100%; transform-origin :100% 100%; } .ballonknot{ width: 10px; height: 5px; background: red; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top:175px; left: 485px; z-index:5; } .string{ width: 2px; height: 150px; background: black; position: absolute; top: 180px; left: 490px; z-index:0; } </style> </head> <body> <div class="cloudpart1"></div> <div class="cloudpart2"></div> <div class="cloudpart3"></div> <div class="cloudpart4"></div> <div class="cloudpart5"></div> <div class="cloudpart6"></div> <div class="form2"> <div class="cloudpart7"></div> <div class="cloudpart8"></div> <div class="cloudpart9"></div> <div class="cloudpart10"></div> <div class="cloudpart11"></div> <div class="cloudpart12"></div> </div> <div class="rainbow"></div> <div class="teddy"> <div class="tedhead"></div> <div class="ear"></div> <div class="ear2"></div> <div class="earin"></div> <div class="earin2"></div> <div class="eye"></div> <div class="eye2"></div> <div class="eyespot"></div> <div class="eyespot2"></div> <div class="nose"></div> <div class="mouth"></div> <div class="belly"></div> <div class="arml"></div> <div class="armr" id="ex"></div> <div class="legl" id="ex"></div> <div class="legr" id="ex"></div> <div class="ballon"></div> <div class="ballonknot"></div> <div class="string"></div> </div> </body> </html>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here