body {
margin: 0; padding: 0;
}
.wrap {
height: 60px; width: 320px; margin: 0 auto; position: relative; top: 30%; /*transform: translateY(-50%);*/ text-align: center; display: block;
}
.shape {
fill: transparent; stroke-dasharray: 140 540; stroke dash-offset: -474; stroke-width:8px;
}
.calltoaction{
color: white; font-size: 40px; position: relative; top: -48px;
}
@keyframes draw {
0% {
stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke: #fff; stroke-width: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke: #fff ; stroke-width:2px; }
} @-webkit-keyframes draw {
0% {
stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke: 2px; }
}
.wrap:hover {
-webkit-animation: 0.5s draw linear infinite ; animation: 0.5s draw linear infinite ;
} .content {
height: 800px; text-align: center; background-color:#b31f13; animation: colorc 8s ease-in-out infinite;
-webkit-animation: colorc 8s ease-in-out infinite ;
} @keyframes colorc {
100%, 0% { background-color:#b31f13; animation-timing-function: ease-in; } 100%, 80% { background-color:white; animation-timing-function: ease-in; }
100%, 100% { background-color:#b31f13; animation-timing-function: ease-in; }
}
@-webkit-keyframes colorc {
100%, 0% { background-color:#b31f13; animation-timing-function: ease-in; } 100%, 80% { background-color:white; animation-timing-function: ease-in; }
100%, 100% { background-color:#b31f13; animation-timing-function: ease-in; }
} .cellfiefuge {
color: white; font-size:100px; font-family:Monospace; text-align: center; position: relative; top: 50px;
}
.tagline {
color: #b31f13; font-size: 30px; text-align: center; text-shadow: 50px; position: relative; top: 30px;
} a, a:visited {
color: white; text-decoration: none;
}