1

Is there an alternative to 'clip-path' since it doesn't have a lot of browser support? Please see screenshot of PSD file

**HERE**

I am trying to get "ring 1" to slowly rotate clockwise and "ring 2" to run counterclockwise on an infinite loop. It should be a fairly simple css animation but the tricky part is the clipping mask effect. Any ideas?

DanielBarbarian
  • 5,093
  • 12
  • 35
  • 44
bhood
  • 355
  • 2
  • 8
  • 18

2 Answers2

2

The easiest way you can manage that is - use SVG for both circles. Then just animate them using a normal keyframe animation.

The SVG have a very good browser support and you can make them into various shapes with various opacities. Try Adobe Illustrator if you can - or InkScape, for a free software.

You can find more details on the rotation animation in another stackoverflow article

Community
  • 1
  • 1
wick3d
  • 652
  • 6
  • 17
  • thanks @wick3d But how can I use SVG so that it appears as if the ring is cut out of the white transparent overlay that is on top of the picture? I haven't come across any info on how to achieve that clipping mask effect for SVG. Let me know if that doesn't make sense – bhood Jun 22 '16 at 10:59
  • I would recommend using a mask - your image is pretty complicated so it might get tricky, but the idea is to have a solid background that gets cut through with a shape-mask. You can get more info in this stackoverflow post here: http://stackoverflow.com/questions/26462205/svg-shape-transparency-with-solid-color-as-a-background – wick3d Jun 22 '16 at 11:22
  • awesome - I'll try this out. Thanks! – bhood Jun 22 '16 at 11:46
  • Glad I could help. If my information solved your problems, concider marking my post as the answer to your question please :) Hood luck and have fun. – wick3d Jun 22 '16 at 11:54
1

I think following article by Jezen Thomas is what you are looking for

https://jezenthomas.com/arcify/

See his answer on stackoverflow.

UPADTE

I am posting the relevant code as suggested in comment

html{  
 width: 100%;
 height: 100%;
 background-color: #212121;
}

body {overflow-y: hidden;}

ul{
 height: 100%;
 width: 100%;
 display: block;
 margin: 0 auto;
}

li{
 position: absolute;
 left: 50%;
 top: 50%;
 display: block;
 background: transparent;
 border: 10px solid rgba(23,246,251, 1.0);
 border-radius: 500px;
 transition: all 0.5s ease;
}

li:first-child{
 margin-left: -130px;
 margin-top: -130px;
 width: 240px;
 height: 240px;
 border-color: #e000c9;
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spin 12s infinite linear;
}

li:nth-child(2) {
 margin-left: -120px;
 margin-top: -120px;
 width: 220px;
 height: 220px;
 border-color: #7500ad;
 border-top-color: transparent;
 border-right-color: transparent;
 animation: spin2 12s infinite linear;
}

li:nth-child(3) {
 margin-left: -110px;
 margin-top: -110px;
 width: 200px;
 height: 200px;
 border-color: #0049d8;
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spin3 4s infinite linear;
}

li:nth-child(4) {
 margin-left: -80px;
 margin-top: -80px;
 width: 140px;
 height: 140px;
 border-color: #0089ed;
 border-left-color: transparent;
 border-top-color: transparent;
 animation: spin4 4s infinite linear;
}

li:nth-child(5) {
 margin-left: -70px;
 margin-top: -70px;
 width: 120px;
 height: 120px;
 border-color: #00f2a9;
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spin5 4s infinite linear;
}

li:nth-child(6) {
 margin-left: -60px;
 margin-top: -60px;
 width: 100px;
 height: 100px;
 border-color: #009e2c;
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spin6 4s infinite linear;
}

li:nth-child(7) {
 margin-left: -40px;
 margin-top: -40px;
 width: 60px;
 height: 60px;
 border-color: #d4d800;
 border-left-color: transparent;
 border-right-color: transparent;
 border-top-color: transparent;
 animation: spin7 2s infinite linear;
}

li:nth-child(8) {
 margin-left: -30px;
 margin-top: -30px;
 width: 40px;
 height: 40px;
 border-color: #c18b00;
 border-left-color: transparent;
 border-right-color: transparent;
 animation: spin8 2s infinite linear;
}

/* Animations */

@keyframes spin {
 0%  {transform: rotate(0deg);}
 10%  {transform: rotate(-25deg);}
 20%  {transform: rotate(47deg);}
 30%  {transform: rotate(-125deg);}
 40%  {transform: rotate(-25deg);}
 50%  {transform: rotate(25deg);}
 60%  {transform: rotate(165deg);}
 70%  {transform: rotate(42deg);}
 80%  {transform: rotate(180deg);}
 90%  {transform: rotate(-300deg);}
 100%{transform: rotate(360deg);} 
}

@keyframes spin2 {
 0%  {transform: rotate(0deg);}
 100%{transform: rotate(360deg);} 
}

@keyframes spin3 {
 0%  {transform: rotate(0deg);}
 60%  {transform: rotate(165deg);}
 70%  {transform: rotate(42deg);}
 100%{transform: rotate(360deg);} 
}

@keyframes spin4 {
 0%  {transform: rotate(0deg);}
 100%{transform: rotate(360deg);} 
}

@keyframes spin5 {
 0%  {transform: rotate(0deg);}
 10%  {transform: rotate(-25deg);}
 20%  {transform: rotate(47deg);}
 30%  {transform: rotate(-125deg);}
 100%{transform: rotate(360deg);} 
}

@keyframes spin6 {
 0%  {transform: rotate(0deg);}
 80%  {transform: rotate(180deg);}
 90%  {transform: rotate(-300deg);}
 100%{transform: rotate(360deg);} 
}

@keyframes spin7 {
 0%  {transform: rotate(0deg);}
 100%{transform: rotate(-360deg);} 
}

@keyframes spin8 {
 0%  {transform: rotate(0deg);}
 100%{transform: rotate(360deg);} 
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
See the Pen Arcify by MSS (@geeksal) on CodePen.
Community
  • 1
  • 1
geeksal
  • 4,856
  • 3
  • 24
  • 47
  • 3
    **This is really a comment, not an answer.** – Paulie_D Jun 22 '16 at 10:36
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/12772787) – ρяσѕρєя K Jun 22 '16 at 12:04
  • @AshishAhujaツ and others I think now it looks ok ;) – geeksal Jun 22 '16 at 12:08
  • @ρяσѕρєяK If it requires any other improvement than let me know. – geeksal Jun 22 '16 at 12:09