|
body { |
|
overflow: hidden; |
|
} |
|
|
|
.title { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
-webkit-transform: translate(-50%, -50%); |
|
-moz-transform: translate(-50%, -50%); |
|
-ms-transform: translate(-50%, -50%); |
|
-o-transform: translate(-50%, -50%); |
|
transform: translate(-50%, -50%); |
|
font-size: 2.25rem; |
|
font-weight: bold; |
|
z-index: 280; |
|
color: #fff; |
|
line-height: 1.2; |
|
text-align: center; |
|
} |
|
|
|
.item { |
|
-webkit-backface-visibility: hidden; |
|
backface-visibility: hidden; |
|
} |
|
.item:before, .item:after { |
|
content: ''; |
|
height: 0px; |
|
width: 0px; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
-webkit-transform: translate(-50%, -50%) scale(0); |
|
-moz-transform: translate(-50%, -50%) scale(0); |
|
-ms-transform: translate(-50%, -50%) scale(0); |
|
-o-transform: translate(-50%, -50%) scale(0); |
|
transform: translate(-50%, -50%) scale(0); |
|
border-radius: 100%; |
|
} |
|
.item:before { |
|
border: 8px solid rgba(217, 67, 98, 0.9); |
|
-webkit-animation: animation1 2.8s ease 0s infinite; |
|
-moz-animation: animation1 2.8s ease 0s infinite; |
|
animation: animation1 2.8s ease 0s infinite; |
|
} |
|
@-webkit-keyframes animation1 { |
|
60% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
} |
|
100% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
} |
|
} |
|
@-moz-keyframes animation1 { |
|
60% { |
|
height: 2000px; |
|
width: 2000px; |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
} |
|
100% { |
|
height: 2000px; |
|
width: 2000px; |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
} |
|
} |
|
@keyframes animation1 { |
|
60% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
-ms-transform: translate(-50%, -50%) scale(1); |
|
-o-transform: translate(-50%, -50%) scale(1); |
|
transform: translate(-50%, -50%) scale(1); |
|
} |
|
100% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
-ms-transform: translate(-50%, -50%) scale(1); |
|
-o-transform: translate(-50%, -50%) scale(1); |
|
transform: translate(-50%, -50%) scale(1); |
|
} |
|
} |
|
.item:after { |
|
background-color: rgba(217, 67, 98, 1); |
|
-webkit-animation: animation2 2.8s ease 0s infinite; |
|
-moz-animation: animation2 2.8s ease 0s infinite; |
|
animation: animation2 2.8s ease 0s infinite; |
|
} |
|
@-webkit-keyframes animation2 { |
|
15% { |
|
height: 0px; |
|
width: 0px; |
|
-webkit-transform: translate(-50%, -50%) scale(0); |
|
} |
|
60% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
} |
|
100% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
} |
|
} |
|
@-moz-keyframes animation2 { |
|
15% { |
|
height: 0px; |
|
width: 0px; |
|
-moz-transform: translate(-50%, -50%) scale(0); |
|
} |
|
60% { |
|
height: 2000px; |
|
width: 2000px; |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
} |
|
100% { |
|
height: 2000px; |
|
width: 2000px; |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
} |
|
} |
|
@keyframes animation2 { |
|
15% { |
|
height: 0px; |
|
width: 0px; |
|
-webkit-transform: translate(-50%, -50%) scale(0); |
|
-moz-transform: translate(-50%, -50%) scale(0); |
|
-ms-transform: translate(-50%, -50%) scale(0); |
|
-o-transform: translate(-50%, -50%) scale(0); |
|
transform: translate(-50%, -50%) scale(0); |
|
} |
|
60% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
-ms-transform: translate(-50%, -50%) scale(1); |
|
-o-transform: translate(-50%, -50%) scale(1); |
|
transform: translate(-50%, -50%) scale(1); |
|
} |
|
100% { |
|
height: 2000px; |
|
width: 2000px; |
|
-webkit-transform: translate(-50%, -50%) scale(1); |
|
-moz-transform: translate(-50%, -50%) scale(1); |
|
-ms-transform: translate(-50%, -50%) scale(1); |
|
-o-transform: translate(-50%, -50%) scale(1); |
|
transform: translate(-50%, -50%) scale(1); |
|
} |
|
} |