Голубая полоса должна бегать по кругу при наведении. С событием hover
в jquery
знаком, на этом в принципе, можно не заострять внимание. Не могу сообразить, как сделать такую анимацию.
P.S Предпочтительно решение на jquery
.
.img {
width: 150px;
height: 150px;
padding: 5px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.img:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: transform 1s linear;
background: linear-gradient(to top, red, blue);
}
.img:hover:after {
transform: rotate(360deg);
}
.img img {
width: 100%;
height: 100%;
border-radius: inherit;
position: relative;
z-index: 2;
}
<div class="img">
<img src="https://st2.depositphotos.com/1814571/6190/i/450/depositphotos_61905765-stock-photo-golden-eagle-close-up-portrait.jpg" alt="">
</div>
Или вот так:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #454372;
}
figure {
--borderWidth: 4px;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
background-image: url(https://s00.yaplakal.com/pics/pics_preview/4/6/4/10101464.jpg);
background-size: cover;
}
figure:after {
content: '';
position: absolute;
top: calc(-1 * var(--borderWidth));
left: calc(-1 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2);
background: linear-gradient(to top, #119d95 30%, #ffffff 70%);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
-webkit-animation: anim 2s ease infinite;
animation: anim 2s ease infinite;
background-size: 100% 100%;
border-radius: 50%;
}
@-webkit-keyframes anim {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes anim {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<figure></figure>
В данном случае: используем keyframes при выполнении анимации. Чтобы она повторялась бесконечное количество раз. Ну возможно это будет инетересно.
1. Заполнение бордюра из одной средней точки до слияния концoв линии
Подробней об этой технике можно прочитать в другом топике сайта Анимация симметричного заполнения фигур из одной точки (смотрите вторую половину ответа)
Нам понадобится максимальная длина линии при радиусе равном 70px
C= 2 * 3.1415 * 70 = 439.81
Округляем до 440px
Далее будем использовать половину длины окружности - 220px
Четверть - 110px
Анимация начинается при наведении курсора
.container {
width:100%;
height:100%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="400" viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk">
<circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="black"/>
</mask>
</defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="dodgerblue" stroke-dasharray="0 220 0 220" >
<animate
attributeName="stroke-dasharray"
values="0 220 0 220;0 0 440 0"
dur="0.5s"
begin="img1.mouseover"
repeatCount="1"
restart="whenNotActive"
fill="freeze"
/>
<animate
attributeName="stroke-dasharray"
values="0 0 440 0;0 220 0 220"
dur="0.5s"
begin="img1.mouseout"
repeatCount="1"
restart="whenNotActive"
fill="freeze"
/>
</circle>
<image id="img1" xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk)"/>
</svg>
</div>
.container {
width:100%;
height:100%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="400" viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk">
<circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="black"/>
</mask>
</defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="dodgerblue" stroke-dashoffset="-110" stroke-dasharray="0 220 0 220" >
<animate
attributeName="stroke-dasharray"
values="0 220 0 220;0 0 440 0"
dur="0.5s"
begin="img1.mouseover"
repeatCount="1"
restart="whenNotActive"
fill="freeze"
/>
<animate
attributeName="stroke-dasharray"
values="0 0 440 0;0 220 0 220"
dur="0.5s"
begin="img1.mouseout"
repeatCount="1"
restart="whenNotActive"
fill="freeze"
/>
</circle>
<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%" mask="url(#msk)"/>
</svg>
</div>
2. Вращение 2-х и более сегментов бордюра
Подробней об этой технике можно прочитать в другом топике сайта Анимация симметричного заполнения фигур из одной точки (смотрите первую половину ответа)
<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="400" viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk">
<circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="black"/>
</mask>
</defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="#C700C7" stroke-dashoffset="102" stroke-dasharray="215 5" >
<animate
<animate
attributeName="stroke-dashoffset"
values="220;0"
dur="0.5s"
begin="img1.mouseover"
repeatCount="2"
restart="whenNotActive" />
<animate
attributeName="stroke-dashoffset"
values="0;220"
dur="0.35s"
begin="img1.mouseout"
repeatCount="2"
restart="whenNotActive" />
</circle>
<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%" mask="url(#msk)"/>
</svg>
</div>
.container {
width:100%;
height:100%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="400" viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk">
<circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="black"/>
</mask>
</defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="#C700C7" stroke-dashoffset="103" stroke-dasharray="140 6.6" >
<animate
attributeName="stroke-dashoffset"
values="146.6;0"
dur="0.5s"
begin="img1.mouseover"
repeatCount="2"
restart="whenNotActive" />
<animate
attributeName="stroke-dashoffset"
values="0;220"
dur="0.5s"
begin="img1.mouseout"
repeatCount="1"
restart="whenNotActive" />
</circle>
<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%" mask="url(#msk)"/>
</svg>
</div>
.container {
width:100%;
height:100%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="400" viewBox="0 0 150 200" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk">
<circle fill="white" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="black"/>
</mask>
</defs>
<circle fill="none" cx="75px" cy="100px" r="70px" stroke-width="5" stroke="#C700C7" stroke-dashoffset="103" stroke-dasharray="105 5" >
<animate
attributeName="stroke-dashoffset"
values="105;0"
dur="0.35s"
begin="img1.mouseover"
repeatCount="3"
restart="whenNotActive" />
<animate
attributeName="stroke-dashoffset"
values="0;105"
dur="0.35s"
begin="img1.mouseout"
repeatCount="2"
restart="whenNotActive" />
</circle>
<image id="img1" xlink:href="https://i.stack.imgur.com/cySio.jpg" width="100%" height="100%" mask="url(#msk)"/>
</svg>
</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Laravel 55 + AjaxRegister При регистрации пользователей иногда натыкаюсь на такую ошибку в логах:
В таблице в хронологическом порядке фиксируются состояния пользователей (и их изменения), например,