На некоторых сайтах присутствует эффект, который запускает анимацию при наведении курсора.
То есть вначале картинка неподвижна, но при наведении начинает вращаться.
Это реализуется только с помощью JS, или можно с CSS сделать?
1 ответ
Конечно же можно сделать на css
. Это давно не секрет. Уже не один год.
Главное при этом хорошо изучить.
Вот простой пример:
#test {
background-color: #f00;
width: 100px;
height: 100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#test:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
}
.grow {
background-color: green;
width: 100px;
height: 100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
<div id="test"></div>
<br />
<br />
<div class='grow'></div>
При должном навыке можно дела удивительные вещи:
div {
border-radius:50%;
position:absolute;
top:50%; left:75%;
}
div:nth-of-type(odd) { background:black; }
div:nth-of-type(even) { background:white; border:2px solid black; }
div:nth-of-type(11) {
height:10px; width:10px;
margin-top:-5px; margin-left:-5px;
-webkit-animation:slide 3s ease-in-out infinite;
animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) {
height:20px; width:20px;
margin-top:-12px; margin-left:-12px;
-webkit-animation:slide 3s -2.7s ease-in-out infinite;
animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) {
height:40px; width:40px;
margin-top:-20px; margin-left:-20px;
-webkit-animation:slide 3s -2.4s ease-in-out infinite;
animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) {
height:60px; width:60px;
margin-top:-32px; margin-left:-32px;
-webkit-animation:slide 3s -2.1s ease-in-out infinite;
animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) {
height:80px; width:80px;
margin-top:-40px; margin-left:-40px;
-webkit-animation:slide 3s -1.8s ease-in-out infinite;
animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) {
height:100px; width:100px;
margin-top:-52px; margin-left:-52px;
-webkit-animation:slide 3s -1.5s ease-in-out infinite;
animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) {
height:120px; width:120px;
margin-top:-60px; margin-left:-60px;
-webkit-animation:slide 3s -1.2s ease-in-out infinite;
animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) {
height:140px; width:140px;
margin-top:-72px; margin-left:-72px;
-webkit-animation:slide 3s -0.9s ease-in-out infinite;
animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) {
height:160px; width:160px;
margin-top:-80px; margin-left:-80px;
-webkit-animation:slide 3s -0.6s ease-in-out infinite;
animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) {
height:180px; width:180px;
margin-top:-92px; margin-left:-92px;
-webkit-animation:slide 3s -0.3s ease-in-out infinite;
animation:slide 3s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) {
height:200px; width:200px;
margin-top:-100px; margin-left:-100px;
-webkit-animation:slide 3s ease-in-out infinite;
animation:slide 3s ease-in-out infinite;
}
@keyframes slide {
0% { left:75% }
50% { left:25%; }
100% { left:75%; }
}
@-webkit-keyframes slide {
0% { left:75% }
50% { left:25%; }
100% { left:75%; }
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
div {
border-radius:50%;
height:2px; width:2px; /* To allow border-radius to work */
position:absolute;
top:50%; left:50%;
margin-top:-1px; margin-left:-1px;
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
-webkit-animation:rotate 12s infinite linear;
animation:rotate 12s infinite linear;
}
@keyframes rotate {
16.67% {
box-shadow:
-75px -125px 0 40px #76bdd1,
75px -125px 0 40px #6cce74,
150px 0px 0 40px #c18d46,
75px 125px 0 40px #c14745,
-75px 125px 0 40px #2e1e5b,
-150px 0px 0 40px #9c37a6;
}
33.33% {
box-shadow:
-75px -125px 0 40px #9c37a6,
75px -125px 0 40px #76bdd1,
150px 0px 0 40px #6cce74,
75px 125px 0 40px #c18d46,
-75px 125px 0 40px #c14745,
-150px 0px 0 40px #2e1e5b;
}
50% {
box-shadow:
-75px -125px 0 40px #2e1e5b,
75px -125px 0 40px #9c37a6,
150px 0px 0 40px #76bdd1,
75px 125px 0 40px #6cce74,
-75px 125px 0 40px #c18d46,
-150px 0px 0 40px #c14745;
}
66.67% {
box-shadow:
-75px -125px 0 40px #c14745,
75px -125px 0 40px #2e1e5b,
150px 0px 0 40px #9c37a6,
75px 125px 0 40px #76bdd1,
-75px 125px 0 40px #6cce74,
-150px 0px 0 40px #c18d46;
}
88.88% {
box-shadow:
-75px -125px 0 40px #c18d46,
75px -125px 0 40px #c14745,
150px 0px 0 40px #2e1e5b,
75px 125px 0 40px #9c37a6,
-75px 125px 0 40px #76bdd1,
-150px 0px 0 40px #6cce74;
}
100% {
transform:rotate(-360deg);
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
}
@-webkit-keyframes rotate {
16.67% {
box-shadow:
-75px -125px 0 40px #76bdd1,
75px -125px 0 40px #6cce74,
150px 0px 0 40px #c18d46,
75px 125px 0 40px #c14745,
-75px 125px 0 40px #2e1e5b,
-150px 0px 0 40px #9c37a6;
}
33.33% {
box-shadow:
-75px -125px 0 40px #9c37a6,
75px -125px 0 40px #76bdd1,
150px 0px 0 40px #6cce74,
75px 125px 0 40px #c18d46,
-75px 125px 0 40px #c14745,
-150px 0px 0 40px #2e1e5b;
}
50% {
box-shadow:
-75px -125px 0 40px #2e1e5b,
75px -125px 0 40px #9c37a6,
150px 0px 0 40px #76bdd1,
75px 125px 0 40px #6cce74,
-75px 125px 0 40px #c18d46,
-150px 0px 0 40px #c14745;
}
66.67% {
box-shadow:
-75px -125px 0 40px #c14745,
75px -125px 0 40px #2e1e5b,
150px 0px 0 40px #9c37a6,
75px 125px 0 40px #76bdd1,
-75px 125px 0 40px #6cce74,
-150px 0px 0 40px #c18d46;
}
88.88% {
box-shadow:
-75px -125px 0 40px #c18d46,
75px -125px 0 40px #c14745,
150px 0px 0 40px #2e1e5b,
75px 125px 0 40px #9c37a6,
-75px 125px 0 40px #76bdd1,
-150px 0px 0 40px #6cce74;
}
100% {
-webkit-transform:rotate(-360deg);
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
}
<div></div>
Главное не забывать делать эту анимацию при наведении (hover) или при другом любом удобном и нужном вам моменте. При фокусе, к примеру.
О css
анимации множество ресурсов писано. В поисковике очень много ссылок на эту тему