Первая картина – как выглядит элемент, но при наведении у него меняется фон, появляется еще и цветная тень, и, как ни странно, она вращается вокруг элемента (кар. 2-3)
Реализация
HTML
|
1 2 3 4 5 6 |
<h1 class="logo header__logo"> <a href="/" data-name="Про CSS"> <span class="item--about">Про</span> <span class="item--css">CSS</span> </a> </h1> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
// customize bootstrap variables here: @import "bootstrap"; @import "compass"; .header__logo, .header__logo A { text-decoration: none; text-shadow: 0 0 5px #7f0b22; color: white; margin: 100px auto; text-align: center; } .header__logo .logo__no-link, .header__logo A { display: block; position: relative; width: 224px; height: 224px; background: crimson; border-radius: 50%; -webkit-box-shadow: 0 0 0 transparent inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5); box-shadow: 0 0 0 transparent inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5); } .header__logo .logo__no-link:before, .header__logo A:before { content: ""; display: inline-block; width: 0; height: 224px; margin-right: -.1em; vertical-align: middle; } .header__logo A { -webkit-transition: all .5s; transition: all .5s; } .header__logo A:after { content: ""; display: block; position: absolute; width: 268.8px; height: 268.8px; top: -22.4px; left: -22.4px; border-radius: 50%; /* @include shadow ( 0, 0, transparent); */ -webkit-transition: all .5s; /* @include shadow ( 0, 0, transparent); */ transition: all .5s; } .header__logo A:hover { background: #444; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5); text-shadow: 0 2px 5px black; color: #DDD; } .header__logo A:hover{&:after { -webkit-box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0px 0 rgba(170, 255, 0, 0.3), 0 20.384px 0px 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0px 0 rgba(0, 255, 170, 0.3), 20.384px 0 0px 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0px 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0px 0 rgba(170, 0, 255, 0.3); box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0px 0 rgba(170, 255, 0, 0.3), 0 20.384px 0px 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0px 0 rgba(0, 255, 170, 0.3), 20.384px 0 0px 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0px 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0px 0 rgba(170, 0, 255, 0.3); -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; }} /* Animations -------------------------------- */ @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Animations -------------------------------- */ @keyframes rotate { 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } |
Все готово!
Link to this post!