<div class="banner">
<div class="frame1">
<p class="text p1">Conheça o programa que vai ajudar você a anunciar seus clientes no <span class="span">Google</span></p>
</div>
<div class="frame2">
<div class="plataforma"></div>
<p class="adword">
<span class="adwords ar -deg">A</span>
<span class="adwords ds deg">D</span>
<span class="adwords wd">W</span>
<span class="adwords o -deg">O</span>
<span class="adwords ar -deg">R</span>
<span class="adwords wd deg">D</span>
<span class="adwords ds">S</span>
</p>
<div class="cifrao">
<p class="cif">$</p>
<p class="cif">$</p>
<p class="cif">$</p>
<p class="cif">$</p>
<p class="cif">$</p>
</div>
<div class="processor"></div>
<div class="sistema">
<div class="boxleft"></div>
<div class="gear-large">
<div class="gear-large-in"></div>
</div>
<div class="gear-small">
<div class="gear-small-in"></div>
</div>
<div class="pistao">
<div class="pistaotop"></div>
<div class="pistao-in"></div>
</div>
</div>
</div>
<div class="frame3">
<p class="text p3">Aprenda mais sobre <span class="span">AdWords</span> e aproveite os beneficios:</p>
<p class="text p3">Treinamento em AdWords . Certificação Google . Recompensas reais e virtuais</p>
</div>
<div class="frame4">
<p class="google"><span class="Gg">G</span><span class="oe">o</span><span class="_o">o</span><span class="Gg">g</span><span class="_l">l</span><span class="oe">e</span> <span class="span engage">Engage</span></p>
<p class="text p4">Transformando palavras em bons negócios</p>
<button class="button">Clique aqui e participe</button>
</div>
<div class="colors blue"></div>
<div class="colors red"></div>
<div class="colors yellow"></div>
<div class="colors green"></div>
</div>
/****
https://developer.mozilla.org/pt-PT/demos/detail/banner-google-engage-css
Banner Google Engage CSS - only chrome
****/
@keyframes "frame1" {
from {
top: 0;
}
to {
top: -55px;
}
}
@-moz-keyframes frame1 {
from {
top: 0;
}
to {
top: -55px;
}
}
@-webkit-keyframes "frame1" {
from {
top: 0;
}
to {
top: -55px;
}
}
@keyframes "frame2" {
from {
top: 90px;
}
to {
top: -7px;
}
}
@-moz-keyframes frame2 {
from {
top: 90px;
}
to {
top: -7px;
}
}
@-webkit-keyframes "frame2" {
from {
top: 90px;
}
to {
top: -7px;
}
}
@keyframes "frame2-1" {
from {
top: -7px;
}
to {
top: 90px;
}
}
@-moz-keyframes frame2-1 {
from {
top: -7px;
}
to {
top: 90px;
}
}
@-webkit-keyframes "frame2-1" {
from {
top: -7px;
}
to {
top: 90px;
}
}
@keyframes "frame3" {
from {
top: -75px;
}
to {
top: 0;
}
}
@-moz-keyframes frame3 {
from {
top: -75px;
}
to {
top: 0;
}
}
@-webkit-keyframes "frame3" {
from {
top: -75px;
}
to {
top: 0;
}
}
@keyframes "frame3-1" {
from {
top: 0;
}
to {
top: 75px;
}
}
@-moz-keyframes frame3-1 {
from {
top: 0;
}
to {
top: 75px;
}
}
@-webkit-keyframes "frame3-1" {
from {
top: 0;
}
to {
top: 75px;
}
}
@keyframes "frame4" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes frame4 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes "frame4" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes "gearlarge" {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes gearlarge {
from {
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes "gearlarge" {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes "gearsmall" {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes gearsmall {
from {
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes "gearsmall" {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes "pistao-top" {
from {
top: 4;
}
to {
top: 24px;
}
}
@-moz-keyframes pistao-top {
from {
top: 4;
}
to {
top: 24px;
}
}
@-webkit-keyframes "pistao-top" {
from {
top: 4;
}
to {
top: 24px;
}
}
@keyframes "pistao-in" {
from {
top: 12;
}
to {
top: 32px;
}
}
@-moz-keyframes pistao-in {
from {
top: 12;
}
to {
top: 32px;
}
}
@-webkit-keyframes "pistao-in" {
from {
top: 12;
}
to {
top: 32px;
}
}
@keyframes "adword" {
from {
left: 65px;
}
to {
left: 290px;
}
}
@-moz-keyframes adword {
from {
left: 65px;
}
to {
left: 290px;
}
}
@-webkit-keyframes "adword" {
from {
left: 65px;
}
to {
left: 290px;
}
}
@keyframes "cifrao" {
from {
right: 266px;
}
to {
right: 80px;
}
}
@-moz-keyframes cifrao {
from {
right: 266px;
}
to {
right: 80px;
}
}
@-webkit-keyframes "cifrao" {
from {
right: 266px;
}
to {
right: 80px;
}
}
@keyframes "cif-1" {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(350deg);
-moz-transform: rotate(350deg);
-o-transform: rotate(350deg);
transform: rotate(350deg);
}
}
@-moz-keyframes cif-1 {
from {
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(350deg);
transform: rotate(350deg);
}
}
@-webkit-keyframes "cif-1" {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(350deg);
transform: rotate(350deg);
}
}
@keyframes "cif-2_5" {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(370deg);
-moz-transform: rotate(370deg);
-o-transform: rotate(370deg);
transform: rotate(370deg);
}
}
@-moz-keyframes cif-2_5 {
from {
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(370deg);
transform: rotate(370deg);
}
}
@-webkit-keyframes "cif-2_5" {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(370deg);
transform: rotate(370deg);
}
}
@keyframes "cif-3" {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(380deg);
-moz-transform: rotate(380deg);
-o-transform: rotate(380deg);
transform: rotate(380deg);
}
}
@-moz-keyframes cif-3 {
from {
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(380deg);
transform: rotate(380deg);
}
}
@-webkit-keyframes "cif-3" {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(380deg);
transform: rotate(380deg);
}
}
@keyframes "cif-4" {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-o-transform: rotate(340deg);
transform: rotate(340deg);
}
}
@-moz-keyframes cif-4 {
from {
-moz-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(340deg);
transform: rotate(340deg);
}
}
@-webkit-keyframes "cif-4" {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(340deg);
transform: rotate(340deg);
}
}
@keyframes "google" {
from {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes google {
from {
-moz-transform: scale(0);
transform: scale(0);
}
to {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "google" {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes "p4" {
from {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes p4 {
from {
-moz-transform: scale(0);
transform: scale(0);
}
to {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "p4" {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes "button" {
from {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes button {
from {
-moz-transform: scale(0);
transform: scale(0);
}
to {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "button" {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
body {
margin: 0;
padding: 0;
}
.banner {
font-family: Verdana, sans-serif;
position: relative;
width: 728px;
height: 90px;
margin: 10% auto;
border: 1px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
background: -moz-radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
background: radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
}
.colors {
position: absolute;
bottom: 0;
width: 181.5px;
height: 4px;
z-index: 10;
}
.blue {
background: blue;
left: 0;
}
.red {
background: red;
left: 181px;
}
.yellow {
background: yellow;
left: 363px;
}
.green {
background: green;
right: 0;
}
.frame1 {
position: relative;
top: 0;
-webkit-animation: frame1 500ms linear 3s forwards;
-moz-animation: frame1 500ms linear 3s forwards;
animation: frame1 500ms linear 3s forwards;
}
.text {
color: #63b9d7;
text-align: center;
}
.p1 {
font-size: 17px;
line-height: 45px;
}
.span {
color: #222;
}
.frame2 {
position: relative;
top: 90px;
-webkit-animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
-moz-animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
}
.plataforma {
position: relative;
width: 678px;
height: 12px;
border-radius: 10px;
background-color: #3399cc;
background-image: -webkit-radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
background-image: -moz-radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
background-image: radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
-webkit-background-size: 45px 12px;
-moz-background-size: 45px 12px;
background-size: 45px 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #000;
border-bottom: none;
margin: 0 auto;
}
.adword {
position: relative;
margin-top: -50px;
left: 65px;
float: left;
-webkit-animation: adword 1500ms linear 4s forwards;
-moz-animation: adword 1500ms linear 4s forwards;
animation: adword 1500ms linear 4s forwards;
}
.adwords {
display: block;
float: left;
font-size: 24px;
font-weight: bold;
letter-spacing: -1px;
position: relative;
top: 14px;
}
.ar {
color: red;
top: 13px;
}
.ds {
color: #ff9900;
}
.wd {
color: #56ab52;
}
.o {
color: #3399cc;
}
.-deg {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.deg {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.cifrao {
position: absolute;
top: -50px;
right: 266px;
-webkit-animation: cifrao 1s linear 5s forwards;
-moz-animation: cifrao 1200ms linear 5s forwards;
animation: cifrao 1200ms linear 5s forwards;
}
.cif {
display: inline-block;
width: 22px;
height: 22px;
margin-left: 10px;
border: solid 2px black;
border-radius: 50%;
background: #3399cc;
box-shadow: 0 0 0 2px #3399cc;
color: white;
text-align: center;
font-family: 'Arial';
font-size: 22px;
line-height: 22px;
}
.cif:first-child {
-webkit-animation: cif-1 1s ease-in-out 5500ms forwards;
-moz-animation: cif-1 1s ease-in-out 5500ms forwards;
animation: cif-1 1s ease-in-out 5500ms forwards;
}
.cif:nth-child(2) {
-webkit-animation: cif-2_5 1s ease-in-out 5400ms forwards;
-moz-animation: cif-2_5 1s ease-in-out 5400ms forwards;
animation: cif-2_5 1s ease-in-out 5400ms forwards;
}
.cif:nth-child(3) {
-webkit-animation: cif-3 1s ease-in-out 5300ms forwards;
-moz-animation: cif-3 1s ease-in-out 5300ms forwards;
animation: cif-3 1s ease-in-out 5300ms forwards;
}
.cif:nth-child(4) {
-webkit-animation: cif-4 1100ms ease-in-out 5200ms forwards;
-moz-animation: cif-4 1100ms ease-in-out 5200ms forwards;
animation: cif-4 1100ms ease-in-out 5200ms forwards;
}
.cif:last-child {
-webkit-animation: cif-2_5 1100ms ease-in 5s forwards;
-moz-animation: cif-2_5 1100ms ease-in 5s forwards;
animation: cif-2_5 1100ms ease-in 5s forwards;
}
.processor {
position: relative;
top: -47px;
width: 200px;
height: 35px;
margin: 0 auto;
background-color: #c7c9c8;
border-top-left-radius: 40px 8px;
border-top-right-radius: 13px 5px;
}
.processor:after {
position: absolute;
top: -1px;
left: 17px;
content: "";
width: 163px;
height: 35px;
background-color: gray;
border: 1px solid #D4D4D4;
border-bottom: none;
}
.sistema {
position: relative;
top: -102px;
width: 155px;
height: 66px;
margin: 0 auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: none;
background-color: #3399cc;
}
.sistema:before {
position: absolute;
top: 6px;
left: 77px;
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
border: solid 3px white;
z-index: 9;
}
.sistema:after {
content: "";
position: absolute;
top: 20px;
left: 92px;
width: 4px;
height: 12px;
background-color: white;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
transform: rotate(-40deg);
z-index: 9;
}
.boxleft {
position: relative;
top: 25px;
width: 20px;
height: 40px;
border-top: solid 1px #c7c9c8;
border-right: solid 1px #c7c9c8;
}
.boxleft:after {
position: absolute;
top: 8px;
left: 3px;
content: "";
width: 10px;
height: 10px;
background-color: black;
box-shadow: 0 7px 0 #3399cc, 0 8px 0 #c7c9c8, 0 9px 0 #3399cc, 0 10px 0 #c7c9c8, 0 11px 0 #3399cc, 0 12px 0 #c7c9c8, 0 13px 0 #3399cc, 0 14px 0 #c7c9c8, 0 15px 0 #3399cc, 0 16px 0 #c7c9c8, 0 17px 0 #3399cc, 0 18px 0 #c7c9c8, 0 19px 0 #3399cc, 0 20px 0 #c7c9c8;
}
.boxleft:before {
position: absolute;
top: -18px;
left: 20px;
content: "";
height: 18px;
border-right: solid 1px #c7c9c8;
box-shadow: 80px 40px 0 #c7c9c8;
}
.gear-large {
position: relative;
top: -55px;
left: 10px;
width: 65px;
height: 65px;
margin: 0 auto;
border-radius: 50%;
background-color: #c7c9c8;
z-index: 2;
-webkit-animation: gearlarge 4s linear infinite;
-moz-animation: gearlarge 4s linear infinite;
animation: gearlarge 4s linear infinite;
}
.gear-large-in {
position: relative;
top: 4px;
width: 46px;
height: 46px;
margin: 0 auto;
background-color: #c7c9c8;
border-radius: 50%;
border: dotted 5px #0e4c7c;
}
.gear-large-in:after {
position: absolute;
top: 0;
content: "";
width: 46px;
height: 46px;
margin: 0 auto;
background-color: #0e4c7c;
border-radius: 50%;
}
.search:after {
content: "";
position: absolute;
top: 10px;
left: 12px;
width: 4px;
height: 12px;
background-color: white;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.gear-small {
position: relative;
top: -87px;
left: -32px;
width: 45px;
height: 45px;
margin: 0 auto;
background-color: #c7c9c8;
border-radius: 50%;
z-index: 5;
-webkit-animation: gearsmall 3s linear infinite;
-moz-animation: gearsmall 3s linear infinite;
animation: gearsmall 3s linear infinite;
}
.gear-small-in {
position: relative;
top: 3px;
width: 29px;
height: 29px;
margin: 0 auto;
background-color: #c7c9c8;
border-radius: 50%;
border: dotted 5px white;
z-index: 9;
}
.gear-small-in:after {
position: absolute;
content: "";
width: 29px;
height: 29px;
margin: 0 auto;
background: #ffffff -webkit-radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
background: #ffffff -moz-radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
background: #ffffff radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
border-radius: 50%;
}
.pistao {
position: relative;
top: -151px;
left: 50px;
width: 23px;
height: 66px;
margin: 0 auto;
background-color: white;
border-top: solid 4px black;
}
.pistao:after {
content: "";
position: absolute;
top: 53px;
left: -95px;
width: 79px;
border-bottom: solid 1px #c7c9c8;
}
.pistao:before {
content: "";
position: absolute;
top: 16px;
left: 23px;
width: 16px;
border-bottom: solid 1px #c7c9c8;
}
.pistaotop {
position: relative;
top: 4px;
width: 9px;
height: 9px;
margin: 0 auto;
border-radius: 50%;
border: 2px solid #000;
-webkit-animation: pistao-top 350ms linear alternate infinite;
-moz-animation: pistao-top 350ms linear alternate infinite;
animation: pistao-top 350ms linear alternate infinite;
}
.pistaotop:after {
position: absolute;
top: 9px;
left: 4px;
content: "";
width: 2px;
height: 10px;
background-color: black;
}
.pistao-in {
position: relative;
top: 12px;
width: 15px;
height: 38px;
margin: 0px auto;
background-color: #ff9900;
-webkit-animation: pistao-in 350ms linear alternate infinite;
-moz-animation: pistao-in 350ms linear alternate infinite;
animation: pistao-in 350ms linear alternate infinite;
}
.frame3 {
position: absolute;
top: -75px;
width: 726px;
-webkit-animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
-moz-animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
}
.p3 {
font-size: 17px;
line-height: 10px;
}
.frame4 {
position: absolute;
top: 0;
width: 726px;
padding: 0 10px 0 25px;
opacity: 0;
-webkit-animation: frame4 100ms linear 11s forwards;
-moz-animation: frame4 100ms linear 11s forwards;
animation: frame4 100ms linear 11s forwards;
}
.google {
font-family: Times, serif;
font-size: 35px;
line-height: 10px;
float: left;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-animation: google 500ms ease-in-out 11s forwards;
-moz-animation: google 500ms ease-in-out 11s forwards;
animation: google 500ms ease-in-out 11s forwards;
}
.Gg {
color: #3399cc;
}
.oe {
color: #ea325b;
}
._o {
color: #fcc547;
}
._l {
color: #56ab52;
}
.engage {
font-family: Arial, sans-serif;
color: #726C6E;
font-size: 26px;
}
.p4 {
padding-top: 10px;
font-size: 16px;
width: 221px;
text-align: left;
float: left;
margin-left: 20px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-animation: p4 500ms ease-in-out 11500ms forwards;
-moz-animation: p4 500ms ease-in-out 11500ms forwards;
animation: p4 500ms ease-in-out 11500ms forwards;
}
.button {
width: 181px;
height: 32px;
float: left;
margin: 28px 0 0 45px;
background: #5086E0;
color: white;
font-size: 15px;
border-radius: 2px;
border: none;
cursor: pointer;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
-moz-animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
}
//outdated
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.