bond – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 16:59:04 +0000 en-US hourly 1 Bond Opening Sequence CSS Animation https://thingography.com/css-bond/ https://thingography.com/css-bond/#respond Sun, 18 Feb 2018 18:46:38 +0000 http://thingography.com/my-things/?p=62 /*===== Stage One - the Dots ===== */ @font-face { font-family: GoldenEye; src: url(https://thingography.com/my-things/wp-content/uploads/css-img/bond/GoldenEye.ttf); } #bond-open { width: 100%; height: 600px; overflow: hidden; background-color: #000; position: relative; margin: 0 auto 2em; box-sizing: content-box; } .dot-box { width: 80%; height: 100%; overflow: hidden; position: relative; margin: 0 auto; left: 7%; box-sizing: content-box; } .dot0, .dot1, .dot2, .dot3, .dot4, .dot5, .dot6 { margin: -50px 0px 0px 0px; border-radius: 50%; width: 100px; height: 100px; background-color: #FFFFFF; position: absolute; top: 80%; opacity:0; background: rgb(245,246,246); background: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(234,236,242,1) 23%,rgba(234,236,239,1) 49%,rgba(239,241,244,1) 80%,rgba(245,246,246,1) 100%); } box-sizing: content-box; .dot0 { background-color: transparent; opacity:0; animation:dot0 8s linear; } .dot1 { margin: -50px 0px 0px 54px; animation: dot 1s linear; animation-delay: 0.7s; } .dot2 { margin: -50px 0px 0px 208px; animation: dot 1s linear; animation-delay: 1.3s; } .dot3 { margin: -50px 0px 0px 362px; animation: dot 1s linear; animation-delay: 2s; } .dot4 { margin: -50px 0px 0px 516px; animation: dot 1s linear; animation-delay: 2.7s; } .dot5 { margin: -50px 0px 0px 670px; animation: dot 1s linear; animation-delay: 3.3s; } .dot6 { margin: -50px 0px 0px 824px; animation: dot 1s linear; animation-delay: 4s; } @keyframes dot0 { 0% {left:-100px; opacity:1; background-color: #FFFFFF;} 60% {left:1000px; opacity:1; width:100px; height:100px; margin-top: -50px; background-color: #FFFFFF;} 75% {left:1000px; opacity:0; width:100px; height:100px; margin-top: -50px; background-color: #FFFFFF;} 100%{left:1000px; opacity:0; width:400px; height:400px; margin-top:-200px; background-color: transparent;} } @keyframes dot { 0% {opacity:1;} 40% {opacity:1;} 100% {opacity:0;} } /* Bond Image */ #bond { padding: 60px 95px 60px 115px; left: 50%; top: 50%; width: 90px; height: 180px; margin-top: -150px; margin-left: -150px; position: absolute; opacity: 0; border-radius: 50%; background-color: #FFFFFF; animation: bond 20s linear; animation-delay: 4.5s; box-sizing: content-box; } @keyframes bond { 0.00% {opacity: 0;} 5.00% {opacity: 0;} 12.8% {opacity: 0;} 12.9% {opacity: 1;} 14.6% {opacity: 1;} 47.0% {opacity: 1;} 51.0% {opacity: 0;} 100% {opacity: 0;} } /* The Gun barrel */ /* == The Gun Barrel View ==*/ .barrel { top: 80%; left: 50%; margin-top: -600px; margin-left: -540px; width: 1080px; height: 1000px; border-radius: 50%; z-index: 10; position: absolute; overflow: hidden; opacity: 0; box-shadow: 0 0 150px 150px #333333, 0 0 250px 250px #FFFFFF inset, 0 0 250px 250px #FFFFFF inset; animation: barrel 20s linear; animation-delay:4.5s; overflow: hidden; box-sizing: content-box; } #bore { width: 300px; height: 300px; left: 50%; top: 50%; margin-top: -150px; margin-left: -150px; border: 5px solid #000000; border-radius: 50%; position: absolute; background: none; box-shadow: 0 0 350px 350px #444444, 0 0 250px 250px #444444; box-sizing: content-box; } #bore-cover { width: 300px; height: 300px; left: 50%; top: 50%; margin-top: -150px; margin-left: -150px; border-radius: 50%; border: 5px solid transparent; position: absolute; background: none; animation: bore-cover 20s linear; animation-delay:4.5s; box-sizing: content-box; } #line1, #line2, #line3, #line4, #line5, #line6, #line7, #line8 { border-radius: 30% 0 0 70%; width: 500px; height: 700px; border: 8px solid #000; border-color: transparent transparent transparent #000; position: relative; box-sizing: content-box; } #line1 { margin: 440px 0px 0px 338px; transform: rotateZ(0deg); } #line2 { margin: -760px 0px 0px 110px; transform: rotateZ(45deg); } #line3 { margin: -915px 0px 0px -10px; transform: rotateZ(90deg); } #line4 { margin: -940px 0px 0px 44px; transform: rotateZ(135deg); } #line5 { margin: -845px 0px 0px 237px; transform: rotateZ(180deg); } #line6 { margin: -679px 0px 0px 480px; transform: rotateZ(225deg); } #line7 { margin: -500px 0px 0px 590px; transform:rotateZ(270deg); } #line8 { margin: -483px 0px 0px 540px; transform: rotateZ(315deg); } @keyframes barrel { 0% {margin-left: -120px; margin-top:-498px; transform: scale(0.1); opacity: 0.0; background: transparent;} 5% {margin-left: -120px; margin-top:-498px; transform: scale(0.1); opacity: 1.0; background: transparent;} 15% {margin-left:-540px; margin-top:-700px; transform: scale(0.7); opacity: 1.0; background: transparent;} 48% {margin-left:-540px; margin-top:-700px; transform: scale(0.7); opacity: 1.0; background: transparent;} 50% {margin-left:-740px; margin-top:-700px; transform: scale(0.7); opacity: 1.0; background: transparent;} 60% {margin-left:-340px; margin-top:-700px; transform: scale(0.5); opacity: 1.0; background: transparent;} 75% {margin-left:-740px; margin-top:-700px; transform: scale(0.5); opacity: 1.0; background: transparent;} 85% {margin-left:-340px; margin-top: 0px; transform: scale(0.5); opacity: 1.0; background: #FFFFFF;} 90% {margin-left:-340px; margin-top: 0px; transform: scale(0.5); opacity: 1.0; background: #FFFFFF;} 100%{margin-left:-540px; margin-top:-700px; transform: scale(0.5); opacity: 0; background: #FFFFFF;} } @keyframes bore-cover { 0% {opacity: 0.0; background: #FFFFFF;} 5% {opacity: 1.0; background: #FFFFFF;} 14.9%{opacity: 1.0; background: #FFFFFF;} 15.0%{opacity: 1.0; background: #FFFFFF;} 45% {opacity: 0.0; background: transparent;} 48% {opacity: 1.0; background: #FFFFFF;} 50% {opacity: 1.0; background: #999999;} 60% {opacity: 1.0; background: #999999;} 75% {opacity: 1.0; background: #999999;} 85% {opacity: 1.0; background: #999999;} 90% {opacity: 1.0; background: #999999;} 100% {opacity: 0.0; background: #999999;} } /* ================ The Red =============== */ .redfall { margin-left: -540px; margin-top: -250px; width: 1080px; height: 500px; background-color: #FF0000; position: absolute; left: 50%; top: 0px; z-index: 20; opacity: 0.0; padding-top: 800px; animation: red 40s linear; box-sizing: content-box; } #drop1, #drop2, #drop3, #drop4, #drop5, #drop6, #drop7, #drop8 { border-radius: 30% 0 0 70%; width: 100px; height: 200px; border-color: transparent transparent transparent #000; position: relative; background-color: #FF0000; transform: rotateZ(-90deg); box-sizing: content-box; } #drop1 { margin: 400px 0px 0px 50px; } #drop2 { width: 250px; height: 150px; border-radius: 70% 0 0 70%; margin: -225px 0px 0px 80px; animation: drop2 3s linear 2; animation-delay: 6s; } #drop3 { margin: -114px 0px 0px 300px; } #drop4 { margin: -180px 0px 0px 455px; border-radius: 70% 0 0 70%; animation: drop4 2s linear 3; animation-delay: 6s; } #drop5 { width: 100px; height: 200px; margin: -194px 0px 0px 602px; animation: drop5 3s linear 2; animation-delay: 6s; } #drop6 { margin: -194px 0px 0px 700px; border-radius: 70% 0 0 70%; animation: drop4 3s linear 2; animation-delay: 6s; } #drop7 { margin: -254px 0px 0px 850px; border-radius: 70% 0 30% 70%; animation: drop2 3s linear 2; animation-delay: 6s; } #drop8 { width: 200px; height: 100px; margin: -151px 0px 0px 930px; border-radius: 70% 0 0 70%; animation: drop2 2s linear 3; animation-delay: 6s; } @keyframes red { 0% {top:-1200px; opacity:0.6;} 20% {top:-1200px; opacity:0.6;} 35% {top: 0px; opacity:0.6;} 100% {top: 0px; opacity:0.6;} } @keyframes drop2 { 0% {top:-20px;} 40% {top: 50px;} 100% {top:-20px;} } @keyframes drop5 { 0% {top:0px; transform: rotateZ(-90deg);} 40% {top:2px; transform: rotateZ(-110deg);} 100% {top:0px; transform: rotateZ(-90deg);} } @-keyframes drop4 { 0% {top:-20px;} 40% {top: 8px;} 100% {top:-20px;} } /* ===== 007 Text ===== */ #seven { margin: 0px 0px 0px -170px; position: absolute; left: 50%; top: 50%; opacity: 1; z-index: 30; animation: seven 40s linear; font-size: 200px; color: #FFFFFF; text-align: center; font-family: "GoldenEye"; width: 350px; box-sizing: content-box; } @keyframes seven { 0% {opacity:0;} 60% {opacity:0;} 65% {opacity:1;} 95% {opacity:1;} 100% {opacity:0;} } audio {height: 40px; width: 250px;}

bond

007*

For me this was a challenge to make, unfortunately this Bond CSS animation was designed for a desktop screen – for which it is best viewed. It is predominantly using CSS, only one image was used – the James Bond figure.

]]> https://thingography.com/css-bond/feed/ 0