enter image description here

The blue bar should run in a circle when hovering. I jquery familiar with the hover event in jquery , on this, in principle, you can not draw attention. I can not figure out how to make such an animation. PS Preferably a jquery solution.

    3 answers 3

     .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>

    • to border-radius: 50%; pseudo border-radius: 50%; element border-radius: 50%; add. - UModeL

    Or like this:

     * { 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>

    In this case: use keyframes when doing animations. To repeat it an infinite number of times. Well, maybe it will be interesting.

      SVG Solution Options

      1. Filling the border from one midpoint to the confluence of the ends of the line

      More information about this technique can be found in another topic of the site. Animation of symmetric filling of figures from one point (see the second half of the answer)

      We will need the maximum line length with a radius of 70px
      C= 2 * 3.1415 * 70 = 439.81 Round up to 440px

      Next we will use half the length of the circle - 220px A quarter - 110px

      • Fill option from left to right

      Animation starts when you hover

       .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>

      • Top Fill Option

       .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. Rotation of 2 or more curb segments

      More information about this technique can be found in another topic of the site. Animation of symmetric filling of figures from one point (see the first half of the answer)

      • Rotation of two segments during hover

       <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>

      • The rotation of the three segments

       .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>

      • 4 segments

       .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>

      • Still, in three segments looks more interesting. - LFC
      • one
        @LFC is quite possible that the three segments look more interesting. But the main thing now is a new technique. Anyone can easily repeat this by varying the options, changing only a few numbers in the stroke-dasharray But as I look, it has not caused any interest in people. Thank you for being interested and do not pass indifferently by. - Alexandr_TT