User:Pseudosphere: Difference between revisions
From The Wiki Camp 2 Jr.
Jump to navigationJump to search
Pseudosphere (talk | contribs) (Created page with "<skin>Monobook</skin>{{#css: a[href], .mw-wiki-logo:active, .toctogglelabel, #p-cactions li a, #p-cactions li.selected a, #p-personal li a { color: #0094FF; } a[href]:hover, .toctogglelabel:hover, #p-cactions li a:hover, #p-cactions li.selected a:hover, #p-personal li a:hover, #p-personal li.active a:hover { background-color: #666; } a[href]:active, .toctogglelabel:active, #p-cactions li a:active, #p-cactions li.selected a:active, #p-personal li a:active, #p-personal li....") |
Pseudosphere (talk | contribs) No edit summary |
||
| Line 98: | Line 98: | ||
} | } | ||
}}{{#css: | }}{{#css: | ||
.segs, .segs div { | |||
height: 200px; | |||
width: 200px; | |||
} | } | ||
.segs div { | |||
animation-delay: 0s !important; | |||
animation-duration: 10s !important; | |||
animation-iteration-count: infinite !important; | |||
animation-timing-function: step-end; | |||
background: red; | |||
position: absolute; | |||
} | } | ||
@keyframes seg0 { | |||
0%, 50% { | |||
background: red; | |||
} | |||
40% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg1 { | |||
0%, 20%, 50% { | |||
background: red; | |||
} | |||
10%, 40% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg2 { | |||
0%, 40%, 80% { | |||
background: red; | |||
} | |||
10%, 70% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg3 { | |||
0%, 20%, 70% { | |||
background: red; | |||
} | |||
10%, 50% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg4 { | |||
0%, 20%, 60%, 80% { | |||
background: red; | |||
} | |||
10%, 30%, 70%, 90% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg5 { | |||
0%, 30% { | |||
background: red; | |||
} | |||
10% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg6 { | |||
0%, 50%, 80% { | |||
background: red; | |||
} | |||
40%, 70% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg7 { | |||
0%, 80% { | |||
background: red; | |||
} | |||
70% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg8 { | |||
20%, 80% { | |||
background: red; | |||
} | |||
0%, 70% { | |||
background: #F002; | |||
} | |||
} | |||
@keyframes seg9 { | |||
10% { | |||
background: red; | |||
} | |||
0%, 20% { | |||
background: #F002; | |||
} | } | ||
} | } | ||
}} | }} | ||
<div class="segs" style="background: #000; padding: 10px;"> | |||
<div style="animation-name: seg0; clip-path: polygon(1% 0, 40% 0, 60% 20%, 21% 20%);"></div> | |||
<div style="animation-name: seg1; clip-path: polygon(42% 0, 99% 0, 79% 20%, 62% 20%);"></div> | |||
<div style="animation-name: seg2; clip-path: polygon(0 1%, 20% 21%, 20% 39%, 10% 49%, 0 39%);"></div> | |||
<div style="animation-name: seg3; clip-path: polygon(100% 1%, 80% 21%, 80% 39%, 90% 49%, 100% 39%);"></div> | |||
<div style="animation-name: seg4; clip-path: polygon(0 99%, 20% 79%, 20% 61%, 10% 51%, 0 61%);"></div> | |||
<div style="animation-name: seg5; clip-path: polygon(100% 99%, 80% 79%, 80% 61%, 90% 51%, 100% 61%);"></div> | |||
<div style="animation-name: seg6; clip-path: polygon(99% 100%, 1% 100%, 21% 80%, 79% 80%);"></div> | |||
<div style="animation-name: seg7; clip-path: polygon(40% 40%, 60% 40%, 60% 60%, 40% 60%);"></div> | |||
<div style="animation-name: seg8; clip-path: polygon(11% 50%, 21% 40%, 38% 40%, 38% 60%, 21% 60%);"></div> | |||
<div style="animation-name: seg8; clip-path: polygon(89% 50%, 79% 40%, 62% 40%, 62% 60%, 79% 60%);"></div> | |||
<div style="animation-name: seg9; clip-path: polygon(40% 22%, 60% 22%, 60% 38%, 40% 38%);"></div> | |||
<div style="animation-name: seg9; clip-path: polygon(40% 78%, 60% 78%, 60% 62%, 40% 62%);"></div> | |||
</div> | |||
