JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
#wrap
%input.headNav{ :name => "head", :type => "radio"}/
%input.headNav{:checked => "checked", :name => "head", :type => "radio"}/
%input.headNav{ :name => "head", :type => "radio"}/
.arrows.headNav
-2.times do
.arrow
%input.bodyNav{ :name => "body", :type => "radio"}/
%input.bodyNav{:checked => "checked", :name => "body", :type => "radio"}/
%input.bodyNav{ :name => "body", :type => "radio"}/
.arrows.bodyNav
-2.times do
.arrow
%input.legNav{ :name => "leg", :type => "radio"}/
%input.legNav{:checked => "checked", :name => "leg", :type => "radio"}/
%input.legNav{ :name => "leg", :type => "radio"}/
.arrows.legNav
-2.times do
.arrow
.monsters
.head
.drac
-10.times do
.part
.one
.two
.witch
-10.times do
.part
.one
.two
.frank
-10.times do
.part
.one
.two
.body
.drac
-10.times do
.part
.one
.two
.witch
-10.times do
.part
.one
.two
.frank
-10.times do
.part
.one
.two
.legs
.drac
-10.times do
.part
.one
.two
.witch
-10.times do
.part
.one
.two
.frank
-10.times do
.part
.one
.two
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>
<filter id="jagged">
<feTurbulence id="turbulence" baseFrequency="0.03" numOctaves="5" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
</svg>
@font-face {
font-family: 'Air Conditioner';
font-style: normal;
font-weight: normal;
src: local('Air Conditioner'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/AirConditioner.woff') format('woff');
}
$br: #f1e8d7;
$w: #eeeded;
$g: #3e9344;
$b: #181f1d;
$r: #ee3a1d;
$y: #f4c42c;
$t: transparent;
$bl: #53addd;
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
background:radial-gradient(circle at center, $br 500px, darken($br, 15%));
&:before, &:after{
content:'Monster';
position:absolute;
display:inline-block;
left:calc(50% + 15px);
transform:translateX(calc(-50% - 25px));
text-align:center;
font-family:'Air Conditioner';
filter:url(#jagged);
font-size:60px;
z-index:2;
top:calc(50% + 225px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(45deg, $r -400px, $r 85px, #e79198 100px, #e79198 110px, $r 125px, $r 10000px);
background-size:150% 150%;
animation:shineText 4s ease-in-out infinite;
@keyframes shineText{
0%{
background-position:-200px 50%;
}
10%{
background-position:300px 50%;
}
50%{
background-position:-200px 50%;
}
75%{
background-position:-200px 50%;
}
100%{
background-position:300px 50%;
}
}
}
&:after{
content:'Mashup';
margin-top:30px;
animation-delay:-1.25s;
transform:translateX(calc(-50% + 25px));
}
svg{
position:absolute;
}
#wrap{
width:400px;
height:650px;
filter:url(#jagged);
position:relative;
transform:scale(0.65) translateY(-50px);
input{
opacity:0;
cursor:pointer;
}
.monsters{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
.arrows{
width:calc(100% + 300px);
left:-150px;
position:absolute;
height:33.3333%;
pointer-events:none;
&.bodyNav{
top:33.3333%;
}
&.legNav{
top:66.6666%;
}
.arrow{
position:absolute;
top:calc(50% - 25px);
left:0;
width:50px;
background:$b;
height:50px;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
&:before{
content:'';
position:absolute;
width:50%;
height:50%;
left:30%;
top:25%;
background:$r;
opacity:0;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
border-radius:100%;
}
&:nth-of-type(2){
left:auto;
right:0;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
&:before{
left:auto;
right:30%;
}
}
}
}
input{
position:absolute;
width:150px;
left:-150px;
height:33.3333%;
z-index:8;
opacity:0;
}
input.headNav{
&:nth-of-type(3){
&:checked{
&~.arrows.headNav{
.arrow{
&:last-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:first-of-type{
&:checked{
&~.arrows.headNav{
.arrow{
&:first-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:checked{
pointer-events:none;
&~input.headNav{
left:auto;
right:-150px;
z-index:9;
&:hover{
&~.arrows.headNav{
.arrow:first-of-type{
opacity:1;
}
}
}
&~input.headNav{
z-index:8;
}
}
}
@for $i from 1 through 3{
&:nth-of-type(#{$i}){
&:checked{
& ~ .monsters div.head > div:nth-of-type(#{$i}){
transform:translateX(0);
&.frank{
transform:translateX(0) scaleX(0.8) scaleY(0.9);
}
& ~ div{
transform:translateX(250%);
&.frank{
transform:translateX(250%) scaleX(0.8) scaleY(0.9);
}
}
}
}
}
}
}
input.bodyNav{
top:33.3333%;
&:nth-of-type(6){
&:checked{
&~.arrows.bodyNav{
.arrow{
&:last-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:nth-of-type(4){
&:checked{
&~.arrows.bodyNav{
.arrow{
&:first-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:checked{
pointer-events:none;
&~input.bodyNav{
left:auto;
right:-150px;
z-index:9;
&:hover{
&~.arrows.bodyNav{
.arrow:first-of-type{
opacity:1;
}
}
}
&~input.bodyNav{
z-index:8;
}
}
}
@for $i from 1 through 3{
&:nth-of-type(#{($i + 3)}){
&:checked{
& ~ .monsters div.body > div:nth-of-type(#{$i}){
transform:translateX(0);
& ~ div{
transform:translateX(250%);
}
}
}
}
}
}
input.legNav{
top:66.6666%;
&:last-of-type{
&:checked{
&~.arrows.legNav{
.arrow{
&:last-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:nth-of-type(7){
&:checked{
&~.arrows.legNav{
.arrow{
&:first-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:checked{
pointer-events:none;
&~input.legNav{
left:auto;
right:-150px;
z-index:9;
&:hover{
&~.arrows.legNav{
.arrow:first-of-type{
opacity:1;
}
}
}
&~input.legNav{
z-index:8;
}
}
}
@for $i from 1 through 3{
&:nth-of-type(#{($i + 6)}){
&:checked{
& ~ .monsters div.legs > div:nth-of-type(#{$i}){
transform:translateX(0);
& ~ div{
transform:translateX(250%);
}
}
}
}
}
}
div.head, div.body, div.legs{
position:relative;
width:100%;
height:33.333%;
> div{
position:absolute;
width:60%;
height:100%;
top:0;
left:20%;
transform:translateX(-250%);
transition:0.9s cubic-bezier(1,0,0,1);
.part{
position:absolute;
.one, .two{
position:absolute;
}
}
}
}
.legs{
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 150%, 0 150%);
> div{
&.drac{
.part{
&:first-of-type, &:nth-of-type(2){
width:50px;
height:120%;
left:40px;
.one{
width:100%;
height:100%;
background:$b;
clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.two{
width:110%;
height:120px;
background:$g;
top:100%;
left:-15px;
clip-path: polygon(61% 0, 0 0, 84% 62%);
animation:feet 1s ease-in-out infinite alternate;
transform:scaleX(-1);
@keyframes feet{
to{
clip-path: polygon(61% 0, 0 0, 100% 51%);
}
}
}
}
&:nth-of-type(2){
left:auto;
right:40px;
.two{
left:10px;
transform:scaleX(1);
animation-delay:0.25s;
}
}
}
}
&.frank{
.part{
&:first-of-type{
width:60px;
height:120%;
background:$b;
left:40px;
box-shadow:100px 0 0 $b;
top:0px;
.one, .two{
position:absolute;
width:120px;
height:50px;
bottom:-40px;
background:radial-gradient(circle at bottom right, $r 30px, $b 30px, $b 32px, $t 32px), linear-gradient(to right, $r 40px, $b 40px, $b 42px, $r 42px);
right:0;
border-radius:50px 0 0 50px;
}
.two{
right:auto;
left:100px;
border-radius:0 50px 50px 0;
background:radial-gradient(circle at bottom left, $r 30px, $b 30px, $b 32px, $t 32px), linear-gradient(to left, $r 40px, $b 40px, $b 42px, $r 42px);
}
}
}
}
&.witch{
.part{
&:first-of-type{
width:20px;
height:100%;
background:$g;
left:40px;
box-shadow:140px 0 0 $g;
.one, .two{
position:absolute;
width:100px;
height:80px;
background:$b;
clip-path: polygon(100% 50%, 0% 100%, 100% 100%);
bottom:0;
left:-80px;
}
.two{
left:140px;
clip-path: polygon(0 50%, 0% 100%, 100% 100%);
}
}
}
}
}
}
.body{
z-index:1;
clip-path: polygon(-25% -25%, 125% -25%, 125% 135%, -25% 135%);
> div{
&.drac{
.part{
&:first-of-type{
width:100%;
height:150%;
top:0;
left:0;
background:$b;
.one{
width: 0;
height: 0;
border-style: solid;
border-width: 150px 80px 0 80px;
left:40px;
border-color: $w transparent transparent transparent;
}
.two{
width:12.5px;
height:12.5px;
border-radius:100%;
background:$b;
top:35px;
left:calc(50% - 6.25px);
box-shadow:0 25px 0 $b, 0 50px 0 $b;
}
}
&:nth-of-type(2){
width:70px;
height:70px;
background:$r;
clip-path: polygon(50% 45%, 100% 25%, 100% 75%, 50% 55%, 0% 75%, 0% 25%);
left:calc(50% - 35px);
top:-15px;
animation:spin 6s ease-in-out infinite;
@keyframes spin{
95%{
transform:rotate(0deg);
}
100%{
transform:rotate(900deg);
}
}
}
&:nth-of-type(3){
width:100%;
height:100%;
left:0;
top:0;
.one, .two{
width:75%;
height:75%;
left:calc(100% - 20px);
background:$b;
top:-25%;
clip-path: polygon(1% 58%, 50% 1%, 100% 59%, 86% 91%, 76% 59%, 62% 89%, 53% 60%, 41% 90%, 31% 61%);
transform-origin:left;
animation:flap1 0.5s ease-in-out infinite alternate;
@keyframes flap1{
to{
transform:rotate(10deg);
}
}
}
.two{
left:auto;
right:40px;
transform:scaleX(-1);
transform-origin:left;
animation:flap2 0.5s ease-in-out infinite alternate;
@keyframes flap2{
to{
transform:rotate(-10deg) scaleX(-1);
}
}
}
}
}
}
&.frank{
.part{
&:first-of-type{
width:110%;
height:140%;
background:linear-gradient(to bottom, $t 20px, $bl 20px), linear-gradient(to right, $t 7.5%, $bl 7.5%, $bl 92.5%, $t 92.5%);
top:-2.5px;
border-radius:25px 25px 0 0;
left:-5%;
clip-path: polygon(0 0, 100% 0, 95% 87%, 100% 93%, 100% 100%, 0 100%, 0 94%, 5% 87%);
.one{
position:absolute;
width:15px;
height:15px;
background:$b;
left:calc(50% - 2.5px);
border-radius:100%;
top:25px;
box-shadow:0 40px 0 $b, 0 80px 0 $b, 0 120px 0 $b;
}
}
&:nth-of-type(2), &:nth-of-type(3){
width:50px;
top:15px;
height:calc(100% - 10px);
background:$bl;
transform-origin:top;
transform:rotate(30deg);
left:-12.5px;
border-radius:20px 0 0 0 / 50px 0 0 0;
animation:swing 5s ease-in-out infinite alternate;
@keyframes swing{
to{
transform:rotate(20deg) translateY(-20px);
}
}
.one{
width:80px;
height:80px;
background:$y;
top:100%;
left:calc(50% - 35px);
clip-path: polygon(17% 0, 3% 60%, 8% 91%, 18% 93%, 18% 64%, 26% 50%, 28% 62%, 30% 78%, 37% 91%, 48% 93%, 41% 63%, 43% 49%, 51% 48%, 54% 67%, 58% 83%, 66% 94%, 74% 88%, 68% 65%, 64% 44%, 69% 37%, 79% 41%, 80% 57%, 79% 65%, 85% 71%, 94% 63%, 92% 34%, 85% 21%, 78% 0);
}
}
&:nth-of-type(3){
transform:scaleX(-1) rotate(30deg);
left:auto;
right:-12.5px;
animation:swing2 5s ease-in-out infinite alternate;
animation-delay:-1s;
@keyframes swing2{
to{
transform:scaleX(-1) rotate(20deg) translateY(-20px);
}
}
}
}
}
&.witch{
.part{
&:first-of-type{
width:165%;
left:-32.5%;
height:100%;
background:$b;
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}
&:nth-of-type(2), &:nth-of-type(3){
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 100px 30px;
border-color: transparent transparent $b transparent;
left:-10px;
transform-origin:top;
transform:rotate(50deg);
.one{
position:absolute;
width:40px;
height:20px;
background:$g;
border-radius:0 0 100px 100px;
top:100px;
left:-20px;
z-index:-1;
}
}
&:nth-of-type(3){
left:auto;
right:-10px;
transform:rotate(-50deg);
animation:wave 2s ease-in-out infinite;
@keyframes wave{
0%{
transform:rotate(-50deg);
}
20%{
transform:rotate(-50deg);
}
35%{
transform:rotate(-90deg) translateY(10px);
}
45%{
transform:rotate(-95deg) translateY(5px);
}
50%{
transform:rotate(-90deg) translateY(5px);
}
52.5%{
transform:rotate(-95deg) translateY(5px);
}
58%{
transform:rotate(-90deg) translateY(5px);
}
}
}
}
}
}
}
.head{
clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0% 100%);
z-index:2;
> div{
&.frank{
left:20%;
transform-origin:bottom;
.part{
&:first-of-type{
width:90%;
left:5%;
height:100%;
background:$y;
overflow:hidden;
filter:url(#jagged);
.one{
width:115%;
left:-12%;
top:5px;
height:35px;
filter:url(#jagged);
background:repeating-linear-gradient(to right, $t 0px, $t 20px, $y 20px, $y 28px, $t 28px, $t 45px, $t 45px),
linear-gradient(115deg, transparent 75%, transparent 75%) 0 0,
linear-gradient(245deg, transparent 75%, transparent 75%) 0 0,
linear-gradient(115deg, transparent 75%, $y 75%) 21px -44px,
linear-gradient(245deg, $b 75%, $y 75%) 21px -44px,
$y;
background-size: 100%, 46px 80px, 46px 80px, 46px 80px, 46px 80px, 46px 80px;
box-shadow:0 -5px 0 $b;
}
.two{
width:70%;
left:15%;
top:70px;
height:15px;
background:$b;
}
}
&:nth-of-type(2), &:nth-of-type(3){
width:50px;
height:25px;
border-radius:0 0 150% 150% / 0 0 250% 250%;
box-shadow:0 0 0 5px $b, inset 0 5px 0 0 $y, inset 0 10px 0 $b;
top:85px;
left:50px;
.one{
width:12.5px;
height:12.5px;
background:$g;
bottom:0;
left:calc(50% - 7.5px);
border-radius:100%;
}
}
&:nth-of-type(3){
left:auto;
right:50px;
.two{
width:30px;
height:50px;
background:$y;
left:-35px;
box-shadow:0 0 0 5px $b;
}
}
&:nth-of-type(5){
width:120px;
height:30px;
left:62.5px;
bottom:25px;
background:$b;
border-radius:500px 500px 0 0 / 250px 250px 0 0;
.one, .two{
width:92.5%;
height:5px;
background:$b;
left:-37.5%;
top:12.5px;
transform-origin:top;
transform:rotate(-45deg);
}
.two{
left:auto;
right:-37.5%;
transform:rotate(45deg);
}
}
&:nth-of-type(6), &:nth-of-type(7){
width:60px;
height:5px;
background:$b;
bottom:75px;
left:20px;
transform:rotate(-10deg);
.one{
width:5px;
height:15px;
background:$b;
top:calc(50% - 7.5px);
left:10px;
box-shadow:10px 0 0 $b, 20px 0 0 $b, 30px 0 0 $b;
}
.two{
width:20px;
height:60px;
background:$y;
transform:rotate(10deg);
top:-70px;
left:-15px;
}
}
&:nth-of-type(7){
left:auto;
right:20px;
transform:rotate(10deg);
.two{
transform:rotate(-10deg);
left:auto;
right:-15px;
}
}
&:nth-of-type(8){
width:20px;
height:20px;
background:$b;
bottom:20px;
left:-5px;
box-shadow:230px 0 0 $b;
.one, .two{
width:15px;
height:30px;
background:$b;
border-radius:100px 0 0 100px;
left:-15px;
top:-5px;
}
.two{
left:auto;
right:-240px;
border-radius:0 100px 100px 0;
}
}
&:nth-of-type(9){
width:160%;
height:50px;
left:-30%;
top:140px;
.one, .two{
width:50px;
height:100%;
clip-path: polygon(4% 89%, 33% 46%, 51% 56%, 91% 9%, 57% 78%, 35% 67%);
right:0;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
background:darken($w, 30%);
left:-100%;
animation:zap 1s ease-in-out infinite;
@keyframes zap{
50%{
transform:translateX(0);
}
100%{
transform:translateX(200%);
}
}
}
}
.two{
right:auto;
transform:scaleX(-1);
&:before{
animation-delay:0.25s;
}
}
}
}
}
&.witch{
.part{
&:first-of-type{
width: 0;
height: 0;
border-style: solid;
border-width: 0 120px 300px 120px;
border-color: transparent transparent $g transparent;
bottom:0;
left:calc(50% - 120px);
.one{
width: 0;
height: 0;
border-style: solid;
border-width: 0 62.5px 150px 62.5px;
border-color: transparent transparent $b transparent;
left:-62.5px;
top:0;
}
.two{
width:250px;
height:3px;
background:$b;
top:150px;
left:calc(50% - 125px);
}
}
&:nth-of-type(2){
width: 0;
height: 0;
border-style: solid;
border-width: 140px 38px 0 38px;
border-color: $b transparent transparent transparent;
z-index:2;
top:70px;
left:calc(50% - 38px);
.two{
width: 0;
height: 0;
border-style: solid;
border-width: 130px 32.5px 0 32.5px;
border-color: $g transparent transparent transparent;
z-index:1;
top:-140px;
left:-32.5px;
}
.one{
width:100px;
height:100px;
border:4px solid $b;
border-color:$t $b $b $t;
border-radius:100%;
left:-50px;
top:-135px;
transform:rotate(45deg);
}
}
&:nth-of-type(3){
width:30px;
height:30px;
background:radial-gradient(circle at center, $b, $b 5px, $w 5px);
background-position:50% 35px;
border-radius:100%;
top:75px;
left:55px;
border:4px solid $b;
box-shadow:92.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
animation:lookaround 3s ease-in-out infinite alternate;
@keyframes lookaround{
0%{
background-position:50% 35px;
box-shadow:87.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
}
50%{
background-position:calc(50% + 5px) 35px;
box-shadow:97.5px -5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
}
100%{
background-position:calc(50% - 5px) 30px;
box-shadow:92.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
}
}
}
&:nth-of-type(4), &:nth-of-type(5){
width:4px;
height:100px;
background:$b;
transform:rotate(35deg);
transform-origin:top;
top:70px;
left:60px;
.one, .two{
width:100%;
height:100%;
background:$b;
transform-origin:top;
transform:rotate(10deg);
}
.two{
transform:rotate(20deg);
}
}
&:nth-of-type(5){
transform:rotate(-35deg) scaleX(-1);
left:auto;
right:60px;
}
}
}
&.drac{
.part{
&:first-of-type{
width:100%;
height:100%;
background:$g;
border-radius:975px 975px 0px 0px / 1500px 1500px 0px 0px;
overflow:hidden;
.one{
width:160px;
height:150px;
background:$b;
border-radius:100%;
left:calc(50% - 155px);
top:-100px;
box-shadow:150px 0 0 $b;
}
.two{
width:30px;
height:30px;
box-shadow:5px 5px 0 0 $b;
top:80px;
left:105px;
transform:rotate(45deg);
}
}
&:nth-of-type(2){
height:35px;
width:80px;
background:linear-gradient(to bottom, $g 50%, $y 50%);
background-size:100% 160px;
background-position:50% 100%;
border-radius:0 0 200px 200px / 0 0 150px 150px;
top:80px;
left:35px;
box-shadow:90px 0 0 0 $y;
.one{
width:15px;
height:15px;
background:$r;
border-radius:100%;
bottom:0;
left:calc(50% - 7.5px);
box-shadow:90px 0 0 0 $r;
}
.two{
width:50px;
height:50px;
box-shadow:5px 5px 0 0 $b;
top:-60px;
left:60px;
transform:rotate(45deg);
}
}
&:nth-of-type(3){
height:75px;
width:150px;
background:$b;
border-radius:0 0 500px 500px;
top:130px;
left:45px;
.one, .two{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 12.5px 0 12.5px;
border-color: $w transparent transparent transparent;
left:40px;
}
.two{
left:auto;
right:40px;
}
}
&:nth-of-type(4){
width:50px;
height:60px;
background:$g;
border-radius:100%;
z-index:-1;
top:85px;
left:-15px;
box-shadow:220px 0 0 $g;
}
&:nth-of-type(5){
width:15px;
height:15px;
left:75px;
bottom:45px;
.one, .two{
left:10px;
width:100%;
height:100%;
background:linear-gradient(to right, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(to bottom, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(45deg, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(-45deg, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px));
animation:shine 3s ease-in-out infinite;
clip-path: circle(0% at 50% 50%);
top:5px;
@keyframes shine{
60%{
transform:rotate(0deg);
clip-path: circle(0% at 50% 50%);
}
80%{
transform:rotate(360deg);
clip-path: circle(50% at 50% 50%);
}
100%{
transform:rotate(360deg);
clip-path: circle(0% at 50% 50%);
}
}
}
.two{
top:-5px;
left:70px;
animation-delay:-1.25s;
}
}
}
}
}
}
}
}
Also see: Tab Triggers