Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="circle">
- <h1>TRANCE-2014</h1>
- </div>
- .circle {
- background: rgb(255, 255, 255);
- border-radius: 100%;
- cursor: pointer;
- position: relative;
- margin: 0 auto;
- width: 15em;
- height: 15em;
- overflow: hidden;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- }
- .circle h1 {
- color: rgba(189, 185, 199, 0);
- font-family:'Lato', sans-serif;
- font-weight: 900;
- font-size: 1.6em;
- line-height: 8.2em;
- text-align: center;
- text-transform: uppercase;
- -webkit-font-smoothing: antialiased;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-transition: color 0.8s ease-in-out;
- -moz-transition: color 0.8s ease-in-out;
- -ms-transition: color 0.8s ease-in-out;
- transition: color 0.8s ease-in-out;
- }
- .circle:before, .circle:after {
- border-radius: 100%;
- content:"";
- position: absolute;
- top: 0;
- left: 0;
- width: inherit;
- height: inherit;
- box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
- -webkit-transition: box-shadow 0.75s;
- -moz-transition: box-shadow 0.75s;
- -ms-transition: box-shadow 0.75s;
- transition: box-shadow 0.75s;
- }
- .circle:after {
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- .circle:hover:before, .circle:hover:after {
- box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
- }
- .circle:hover > h1 {
- color: rgba(185, 185, 185, 1);
- }
- .circle {
- background: rgb(255, 255, 255);
- border-radius: 100%;
- cursor: pointer;
- position: relative;
- margin: 0 auto;
- width: 15em;
- height: 15em;
- overflow: hidden;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- }
- .circle h1 {
- font-family:'Lato', sans-serif;
- font-weight: 900;
- font-size: 1.6em;
- line-height: 8.2em;
- text-align: center;
- text-transform: uppercase;
- -webkit-font-smoothing: antialiased;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-animation: showText 2s infinite; /* Safari/Chrome 4+ */
- -moz-animation: showText 2s infinite; /* Firefox 5+ */
- -o-animation: showText 2s infinite; /* Opera 12+ */
- animation: showText 2s infinite; /* IE 10+ */
- animation-timing-function: ease-in-out;
- /*
- ** -webkit-transition: color 0.8s ease-in-out;
- ** -moz-transition: color 0.8s ease-in-out;
- ** -ms-transition: color 0.8s ease-in-out;
- ** transition: color 0.8s ease-in-out;
- */
- }
- .circle:before, .circle:after {
- border-radius: 100%;
- content:"";
- position: absolute;
- top: 0;
- left: 0;
- width: inherit;
- height: inherit;
- -webkit-animation: moveCircle 2s infinite; /* Safari/Chrome 4+ */
- -moz-animation: moveCircle 2s infinite; /* Firefox 5+ */
- -o-animation: moveCircle 2s infinite; /* Opera 12+ */
- animation: moveCircle 2s infinite; /* IE 10+ */
- /*
- ** -webkit-transition: box-shadow 0.75s;
- ** -moz-transition: box-shadow 0.75s;
- ** -ms-transition: box-shadow 0.75s;
- ** transition: box-shadow 0.75s;
- */
- }
- .circle:after {
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- @-webkit-keyframes moveCircle {
- 0% {
- box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
- }
- 100% {
- box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
- }
- }
- @-moz-keyframes moveCircle {
- 0% {
- box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
- }
- 100% {
- box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
- }
- }
- @-o-keyframes moveCircle {
- 0% {
- box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
- }
- 100% {
- box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
- }
- }
- @keyframes moveCircle {
- 0% {
- box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
- }
- 100% {
- box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
- }
- }
- @-webkit-keyframes showText {
- 0% {
- color: rgba(189, 185, 199, 0);
- }
- 100% {
- color: rgba(185, 185, 185, 1);
- }
- }
- @-moz-keyframes showText {
- 0% {
- color: rgba(189, 185, 199, 0);
- }
- 100% {
- color: rgba(185, 185, 185, 1);
- }
- }
- @-o-keyframes showText {
- 0% {
- color: rgba(189, 185, 199, 0);
- }
- 100% {
- color: rgba(185, 185, 185, 1);
- }
- }
- @keyframes showText {
- 0% {
- color: rgba(189, 185, 199, 0);
- }
- 100% {
- color: rgba(185, 185, 185, 1);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement