scss 10种形式的马卡利|纯CSS响应和动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 10种形式的马卡利|纯CSS响应和动画相关的知识，希望对你有一定的参考价值。
10 Forms of Ma Kali | Pure CSS Responsive and Animation
-------------------------------------------------------
Forked from a true champion of the Goddess, what a beautiful piece of art and bhakti.
A [Pen](https://codepen.io/thomashighbaughThomasLeonHighbaugh/pen/PXmEvL) by [Thomas Leon Highbaugh](https://codepen.io/thomashighbaughThomasLeonHighbaugh) on [CodePen](https://codepen.io).
[License](https://codepen.io/thomashighbaughThomasLeonHighbaugh/pen/PXmEvL/license).input(type="radio" name="kali" value="default" checked)
input(type="radio" name="kali" value="main")
input(type="radio" name="kali" value="matangi")
input(type="radio" name="kali" value="chinna-masta")
input(type="radio" name="kali" value="samshan")
input(type="radio" name="kali" value="bagala")
input(type="radio" name="kali" value="bhairavi")
input(type="radio" name="kali" value="tara")
input(type="radio" name="kali" value="shodoshi")
input(type="radio" name="kali" value="gajalakshmi")
input(type="radio" name="kali" value="dhumvati")
.kali
.title
div(style="font-size: 105px;") 10
div(style="font-size: 35px;") Forms Of
div(style="font-size: 55px;") Ma Kali
.hair
.locks.left
.locks.right
.locks.left-2
.locks.right-2
.head
.eyes.left
.eyes.right
.eyes.center
.nose
.blush
.lips
.tongue
.moon
.body
- var hands = 4;
while (hands--)
.hand
- var fingers = 4;
while (fingers--)
.finger
.thumb
.machete
.tongue-cut
.gada
.lasso
.bow
.asur
.asur__head
.asur__hair
.scissor
.scissor__leg.left
.scissor__leg.right
.flower
.petal.left
.petal.right
.petal.top
.petal.bottom
.sword
.sword__handle
.trishul
.trishul__point.left
.trishul__point.right
.javelin
.javelin__point
- var arrows = 4;
while (arrows--)
.arrow(class='arrow-'+arrows)
.tip
.neck
.cut
.bloodstream
.bust.left
.bust.right
.blouse
.skull
.necklace
- var skulls = 5;
while (skulls--)
.skull
each mode in ['left', 'right']
.bone(class=mode)
.skull.skull-2(class=mode)
.elephant(class=mode)
.tusk
.volcano(class=mode)
.neck
.cut
.bloodstream.left
.bloodstream.right
.bird(class=mode)
.bird__head
.bird__wing
.bird.bird-2(class=mode)
.bird__head
.bird__wing
.veena
.veena__neck
each mode in ['front', 'back']
.flower.flower-2(class=mode)
.petal.left
.petal.right
.petal.top
.petal.bottom
.trishul.trishul-2
.trishul__point.left
.trishul__point.right
.dumroo
.basket
.heart
each mode in ['woman', 'man', 'devil']
.character(class=mode)
.hair
.locks.left
.locks.right
.head
.eyes.left
.eyes.right
.nose
.blush.left
.blush.right
.horn.left
.horn.right
.lips
.tongue-cut
.body
.neck
.cut
.bust.left
.bust.right
.heading// Inspired from the illustration designed by Raj Kamal.
// Link: https://www.facebook.com/thelegendofrajkamal/photos/a.1571205719590028/1571205779590022/?type=3&theater:root {
--heading: '';
--subheading: '';
}
$main-bg-color: #354142;
$main-hair-color: #000000;
$main-stilhoute-color: #273032;
$nip-color: rgba(0, 0, 0, 0.25);
$makeup-color: #CC0E1C;
$human-skin-color: #6B4A27;
$sunflower-color: #FCAD1A;
$tongue-color: #EB1A25;
$volcano-color: #905022;
$matangi-color: #008568;
$chinna-masta-color: #B92A1A;
$samshan-color: #0B4350;
$bagala-color: #D88A18;
$bhairavi-color: #BB121C;
$tara-color: #366776;
$shodoshi-color: #F47C69;
$gajalakshmi-color: #B97D70;
$dhumvati-color: #4E2B25;
$morph-time: 0.5s;
$morph-delay: 0.5s;
body {
background: $main-bg-color;
height: 100vh;
width: 100vw;
margin: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
@keyframes float {
from {
top: 45%;
}
to {
top: 50%;
}
}
@keyframes hair-bounce {
from {
bottom: -20px;
}
to {
bottom: -40px;
}
}
@keyframes bird-fly {
from {
transform: rotate(15deg);
}
to {
transform: rotate(-5deg);
}
}
@keyframes tongue-out {
from {
height: 100px;
}
to {
height: 75px;
}
}
@keyframes heart-beat {
25% {
transform: scale(0.45);
}
75% {
transform: scale(0.25);
}
}
@keyframes blood-flow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@mixin center {
left: 50%;
transform: translateX(-50%);
}
.kali {
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
width: 550px;
height: 650px;
animation: float 2s infinite ease-in-out alternate;
}
body * {
position: absolute;
&::before, &::after {
content: '';
position: inherit;
}
}
.title {
@include center;
bottom: 140px;
color: $main-bg-color;
z-index: 1;
opacity: 0;
font-family: "Times New Roman", Times, serif;
display: flex;
flex-direction: column;
letter-spacing: -0.15em;
line-height: 0.85;
align-items: center;
text-transform: uppercase;
> * {
position: relative;
}
}
.heading {
color: rgba(white, 0.35);
bottom: 10vh;
width: 100vw;
z-index: 1;
font-family: system-ui, sans-serif;
&::before, &::after {
left: 20vw;
right: 20vw;
text-align: center;
}
&::before {
font-size: 2.5em;
bottom: 100%;
font-weight: bold;
}
&::after {
top: 100%;
font-size: 1em;
}
}
.hair {
@include center;
top: 45px;
width: 320px;
height: 500px;
background: $main-hair-color;
color: $main-hair-color;
border-radius: 100px/100px 105px 110px 110px;
transition: all $morph-time, top 2 * $morph-time, left 2 * $morph-time;
&::before {
top: 25px;
border-radius: 50%/55% 55% 50% 50%;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
box-shadow: -55px -22px 0 18px, 55px -22px 0 18px;
}
&:after {
width: 50px;
height: 50px;
background: inherit;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
box-shadow: -60px 50px 0 0px, -60px 10px 0 10px, -20px 50px 0 0px, 20px 10px 0 10px, 60px 50px 0 0, -20px 10px 0 10px, 20px 50px 0 0px, 60px 10px 0 10px;
animation: hair-bounce 2s infinite ease-in-out alternate;
}
}
.locks {
width: 140px;
height: 200px;
border-radius: 50%;
border: 45px solid transparent;
border-right-color: inherit;
border-bottom-color: inherit;
bottom: -10px;
color: $main-hair-color;
box-shadow: 10px 0 0 0;
animation: hair-bounce 2s infinite ease-in-out alternate;
transition: all $morph-time;
&::before {
width: 30px;
height: 30px;
border-radius: 50%;
bottom: 4px;
left: 12px;
box-shadow: -15px 10px 0 15px, -21px 16px 0 20px;
}
&.left {
left: -100px;
transform: rotate(21deg);
}
&.right {
right: -100px;
transform: rotate(-21deg) scaleX(-1);
}
&.left-2 {
left: -45px;
transform: translateY(80px) rotate(-5deg) scale(0.7);
box-shadow: 25px -15px 0 20px;
}
&.right-2 {
right: -45px;
transform: translateY(80px) rotate(5deg) scale(0.7) scaleX(-1);
box-shadow: 25px -15px 0 20px;
}
}
.head {
@include center;
top: 50px;
width: 290px;
height: 220px;
background: #2F2F2F;
border-radius: 110px 110px 125px 125px/110px 110px 105px 105px;
z-index: 2;
transition: all $morph-time, top 2 * $morph-time, left 2 * $morph-time;
}
.eyes {
@include center;
top: 65px;
width: 80px;
height: 80px;
border-radius: 85% 0;
color: black;
background: white;
transition: background $morph-time;
&::before {
width: 30px;
height: 30px;
border-radius: 50%;
background: $main-hair-color;
top: 30%;
left: 30%;
}
&.left, &.right {
box-shadow: 0 0 0 5px, -6px 2px 0 8px, 0 5px 0 5px, -5px 5px 0 5px;
&::after {
top: -10px;
left: -15px;
width: 70px;
height: 60px;
border-radius: 50%;
border: 5px solid transparent;
border-top: 5px solid;
transform: rotate(-45deg);
transition: color $morph-time;
}
}
&.left {
transform: translateX(-50%) translateX(-80px) rotate(45deg);
}
&.right {
transform: translateX(-50%) translateX(80px) scaleX(-1) rotate(45deg);
}
&.center {
top: 10px;
box-shadow: 0 0 0 10px;
transform: translateX(-50%) rotate(-45deg) scale(0.6);
}
}
.nose {
@include center;
bottom: 50px;
width: 25px;
height: 15px;
color: black;
border-right: 4px solid;
border-bottom: 4px solid;
border-left: 4px solid;
border-radius: 0 0 15px 15px;
&::before, &::after {
color: gold;
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px solid gold;
border-left: 4px solid transparent;
top: -22px;
left: 10px;
}
&::before {
transform: rotate(-10deg);
}
&::after {
transform: rotate(5deg);
}
}
.blush {
@include center;
width: 30px;
height: 30px;
border-radius: 50%;
bottom: 20px;
color: rgba(0, 0, 0, 0.4);
box-shadow: -60px 0 0 0, 60px 0 0 0;
transition: color $morph-time;
}
.tongue {
@include center;
width: 50px;
height: 100px;
background: $tongue-color;
top: 85%;
border-radius: 0 0 50px 50px;
animation: tongue-out 2s infinite ease-in-out alternate;
}
.tongue-cut {
height: 350px;
width: 400px;
border-color: transparent transparent #EB1A25 #EB1A25;
border-style: solid;
border-width: 0 40px 40px 35px;
border-radius: 0 0 50% 50%;
opacity: 0;
&::before {
width: 40px;
height: 40px;
background: #EB1A25;
border-radius: 50%;
right: 5px;
bottom: 10px;
}
}
.lips {
left: 50%;
transform: translateX(-50%) scaleY(1.5) scaleX(1.2);
bottom: 20px;
width: 40px;
color: $makeup-color;
border: 1px solid;
&::after {
bottom: 0;
width: 12px;
height: 6px;
background: $makeup-color;
color: $makeup-color;
left: 50%;
border-radius: 12px 12px 0 0/10px 10px 0 0;
box-shadow: -10px 0 0 0, -14px 1px 0 -1px, -16px 1px 0 -2px, 4px 1px 0 -1px, 6px 1px 0 -2px, 12px 2px 0 -2px, -22px 2px 0 -2px;
transform: translateX(-1px);
}
&::before {
width: 24px;
height: 12px;
background: $makeup-color;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-radius: 12px 12px 24px 24px/8px 8px 12px 12px;
}
}
.body {
@include center;
width: 175px;
height: 220px;
background: #2F2F2F;
color: #2F2F2F;
bottom: 130px;
border-radius: 120px 120px 40px 40px;
z-index: 1;
transition: all $morph-time, top 2 * $morph-time, left 2 * $morph-time;
}
.neck {
@include center;
width: 60px;
height: 60px;
background: inherit;
top: -50px;
transition: color $morph-time, background $morph-time;
will-change: color, background;
&::before, &::after {
width: 25px;
height: 75px;
border-radius: 50%;
box-shadow: 12px 0 0 0;
top: -2px;
}
&::before {
left: -29px;
transform: rotate(20deg);
}
&::after {
right: -29px;
transform: rotate(-20deg) scale(-1);
}
}
.cut {
@include center;
width: 100%;
height: 60px;
background: inherit;
z-index: 2;
top: 0;
border: 15px solid;
border-color: rgba(white, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(-70deg);
}
.bust {
@include center;
background: #363636;
width: 95px;
height: 95px;
border-radius: 50%;
top: 50px;
transition: background $morph-time;
&.left {
left: 20%;
}
&.right {
left: 80%;
}
&::before {
background: inherit;
width: 25px;
height: 25px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
border: 8px solid $nip-color;
box-shadow: 0 -16px 0 -10px $nip-color, -14px -8px 0 -10px $nip-color, -8px -14px 0 -10px $nip-color, 0 16px 0 -10px $nip-color, 14px -8px 0 -10px $nip-color, 8px -14px 0 -10px $nip-color, -16px 0 0 -10px $nip-color, -14px 8px 0 -10px $nip-color, -8px 14px 0 -10px $nip-color, 16px 0 0 -10px $nip-color, 14px 8px 0 -10px $nip-color, 8px 14px 0 -10px $nip-color;
}
}
.moon {
width: 50px;
height: 50px;
border-radius: 50%;
top: -65px;
left: 20px;
opacity: 0;
box-shadow: 4px 12px 0 0 #fff;
}
.blouse {
@include center;
opacity: 0;
width: 180px;
height: 120px;
border-radius: 0 0 30px 30px;
background: red;
bottom: 0;
&::before, &::after {
top: -50px;
width: 100px;
height: 100px;
background-color: inherit;
border-radius: 50%;
}
&::before {
left: -16px;
}
&::after {
right: -16px;
}
}
@mixin morphing-prop($hidden: false) {
@if ($hidden == true) {
transition: opacity $morph-time / 2;
} @else {
transition: opacity $morph-time ease $morph-time;
}
}
@mixin hand-gesture($finger-grip: true, $pinkies-up: false) {
@if ($finger-grip == true) {
.thumb {
transform: rotate(25deg);
&::before {
transform: rotate(-100deg);
}
}
@if ($pinkies-up == true) {
.finger:not(:nth-of-type(1)) {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
transform: translateY(15px);
height: 40px;
}
.finger:nth-of-type(1) {
z-index: 1;
}
} @else {
.finger {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
transform: translateY(15px);
height: 40px;
}
}
} @else {
.thumb {
transform: rotate(30deg);
&::before {
transform: rotate(-120deg);
}
}
.finger {
background-image: inherit;
transform: translateY(0);
&:nth-of-type(2) {
left: 16px;
height: 50px;
}
&:nth-of-type(3) {
left: 32px;
height: 60px;
}
&:nth-of-type(4) {
left: 48px;
height: 50px;
}
}
}
}
.hand {
width: 62px;
height: 45px;
background: #363636;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
transform-origin: 50% 100%;
transition: all $morph-time;
&::before {
width: 30px;
height: 40px;
border-radius: 50%;
background: inherit;
bottom: -20px;
left: 1px;
transform: rotate(-30deg);
}
&::after {
z-index: 0;
color: $makeup-color;
width: 32px;
height: 32px;
border-radius: 50%;
top: 55%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background-image: radial-gradient(circle at 50% 50%, $makeup-color 8px, transparent 9px, transparent 10px, $makeup-color 11px, $makeup-color 12px, transparent 12px);
border: 2px dotted;
}
.machete, .asur, .scissor, .flower, .gada, .trishul, .sword, .arrow, .javelin, .lasso, .bow, .tongue-cut {
opacity: 0;
@include morphing-prop(true);
}
.machete {
left: 65px;
top: -30px;
z-index: 1;
transform: rotate(90deg);
}
.asur {
left: 15px;
top: 0px;
transform: rotate(90deg);
}
.scissor {
transform: rotate(90deg);
left: 30px;
bottom: -30px;
z-index: 1;
}
.flower {
transform: scaleY(-1) rotate(120deg);
left: 45px;
bottom: 0;
z-index: 1;
}
.gada {
transform: rotate(90deg);
left: 120px;
bottom: -5px;
z-index: 1;
}
.sword {
transform: rotate(90deg);
left: 105px;
bottom: -15px;
z-index: 1;
}
.trishul {
transform: rotate(90deg);
left: 75px;
bottom: -50px;
z-index: 1;
}
.javelin {
transform: rotate(90deg) scaleX(-1);
left: 50px;
bottom: -30px;
z-index: 1;
}
.arrow {
left: -40px;
bottom: 30px;
z-index: 1;
}
.lasso {
transform: rotate(90deg) scaleX(-1);
left: 30px;
bottom: -10px;
z-index: 1;
}
.bow {
transform: rotate(90deg) scaleX(0.65) scaleY(0.75);
left: -30px;
bottom: -95px;
z-index: 1;
}
.tongue-cut {
transform: scale(0.3) rotate(-90deg) scaleX(-1);
left: -65px;
top: -117px;
z-index: 1;
width: 200px;
height: 300px;
&::before {
right: -15px;
bottom: -5px;
}
}
&:nth-of-type(1) {
left: -180px;
top: -50px;
}
&:nth-of-type(2) {
right: -160px;
transform: rotate(90deg) scaleX(-1);
top: -90px;
}
&:nth-of-type(3) {
left: -180px;
transform: rotate(180deg);
top: 20px;
}
&:nth-of-type(4) {
right: -160px;
transform: rotate(90deg) scaleX(-1);
top: 20px;
}
}
.thumb {
z-index: 3;
width: 30px;
height: 55px;
border-radius: 50%;
background: #363636;
bottom: -22px;
right: 0;
transform: rotate(30deg);
transition: all $morph-time;
&::before {
background: inherit;
width: 14px;
border-radius: 30px 0 0 0;
height: 45px;
bottom: calc(100% - 10px);
right: 1px;
transform-origin: 2px 41px;
transform: rotate(-120deg);
}
}
.finger {
z-index: 2;
width: 14px;
height: 40px;
position: absolute;
background: inherit;
bottom: calc(100% - 6px);
border-radius: 12px;
background-image: inherit;
transition: left $morph-time, height $morph-time, transform $morph-time;
&:nth-of-type(2) {
left: 16px;
height: 50px;
}
&:nth-of-type(3) {
left: 32px;
height: 60px;
}
&:nth-of-type(4) {
left: 48px;
height: 50px;
}
}
.skull {
@include center;
width: 70px;
height: 70px;
background: #FFFFFF;
background-image: radial-gradient(circle at 50% 10%, rgba(0, 0, 0, 0.45) 10px, transparent 11px, transparent 12px, rgba(0, 0, 0, 0.45) 12px, rgba(0, 0, 0, 0.45) 13px, transparent 14px), radial-gradient(circle at 33% 50%, rgba(0, 0, 0, 0.5) 8px, transparent 9px), radial-gradient(circle at 67% 50%, rgba(0, 0, 0, 0.5) 8px, transparent 9px), radial-gradient(circle at 35px 23px, rgba(0, 0, 0, 0.5) 2px, transparent 3px), radial-gradient(circle at 25px 19px, rgba(0, 0, 0, 0.5) 2px, transparent 3px), radial-gradient(circle at 20px 10px, rgba(0, 0, 0, 0.5) 2px, transparent 3px), radial-gradient(circle at 45px 19px, rgba(0, 0, 0, 0.5) 2px, transparent 3px), radial-gradient(circle at 50px 10px, rgba(0, 0, 0, 0.5) 2px, transparent 3px), radial-gradient(circle at 50px 5px, rgba(0, 0, 0, 0.5) 1px, transparent 2px), radial-gradient(circle at 48px 15px, rgba(0, 0, 0, 0.5) 1px, transparent 2px), radial-gradient(circle at 40px 21px, rgba(0, 0, 0, 0.5) 1px, transparent 2px), radial-gradient(circle at 20px 5px, rgba(0, 0, 0, 0.5) 1px, transparent 2px), radial-gradient(circle at 22px 15px, rgba(0, 0, 0, 0.5) 1px, transparent 2px), radial-gradient(circle at 30px 21px, rgba(0, 0, 0, 0.5) 1px, transparent 2px), linear-gradient(to right, #fff 28px, transparent 30px, transparent 40px, #fff 42px), linear-gradient(to top, #fff 18px, transparent 18px, transparent 29px, #fff 30px), linear-gradient(-238deg, #fff 49px, transparent 50px), linear-gradient(238deg, #fff 49px, transparent 50px), linear-gradient(-238deg, #fff 49px, rgba(0, 0, 0, 0.5) 50px);
bottom: -20px;
border-radius: 50%;
&::before {
width: 42px;
height: 20px;
bottom: -8px;
background-color: inherit;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}
&::after {
width: 6px;
height: 18px;
bottom: -4px;
background-color: rgba(0, 0, 0, 0.5);
left: 50%;
transform: translateX(-50%);
border-radius: 5px/8px;
box-shadow: -9px 0 0 0 rgba(0, 0, 0, 0.5), 9px 0 0 0 rgba(0, 0, 0, 0.5);
}
}
.skull-2 {
bottom: -20px;
background: $main-stilhoute-color;
opacity: 0;
background-image: radial-gradient(circle at 33% 50%, $main-bg-color 8px, transparent 9px), radial-gradient(circle at 67% 50%, $main-bg-color 8px, transparent 9px), linear-gradient(to right, $main-stilhoute-color 28px, transparent 30px, transparent 40px, $main-stilhoute-color 42px), linear-gradient(to top, $main-stilhoute-color 18px, transparent 18px, transparent 29px, $main-stilhoute-color 30px), linear-gradient(-238deg, $main-stilhoute-color 49px, transparent 50px), linear-gradient(238deg, $main-stilhoute-color 49px, transparent 50px), linear-gradient(-238deg, $main-stilhoute-color 49px, $main-bg-color 50px);
&::after {
background-color: $main-bg-color;
box-shadow: -9px 0 0 0 $main-bg-color, 9px 0 0 0 $main-bg-color;
}
&.left {
left: 12%;
}
&.right {
left: 88%;
}
}
.bird {
background: #2B7A41;
width: 120px;
height: 50px;
border-radius: 0 0 60px 60px/0 0 50px 50px;
bottom: 40px;
opacity: 0;
&.left {
left: -50px;
}
&.right {
right: -50px;
transform: scaleX(-1);
}
&::after {
left: -80px;
border-width: 0 120px 15px 0;
border-style: solid;
border-color: transparent;
border-right-color: #2B7A41;
transform-origin: 100% 0%;
animation: bird-fly 0.25s infinite ease-in alternate;
}
}
.bird__head {
width: 35px;
height: 70px;
transform: rotate(27deg);
background: inherit;
border-radius: 18px 18px 10px 10px;
top: -42px;
right: -6px;
&::before {
width: 45px;
height: 45px;
border-radius: 50%;
background: inherit;
top: -10px;
left: 0;
}
&::after {
border-width: 6px 10px;
border-style: solid;
border-color: transparent transparent transparent red;
right: -28px;
transform: rotate(-10deg);
}
}
.bird__wing {
width: 100px;
height: 40px;
border-radius: 0 15px 20px 90px/ 0 15px 40px 50px;
background: #3A823F;
z-index: 2;
top: -10px;
left: -5px;
transform-origin: 100% 0%;
animation: bird-fly 0.25s infinite ease-in alternate;
&::after {
left: -45px;
border-width: 0 60px 10px 0;
border-style: solid;
border-color: transparent;
border-right-color: #3A823F;
}
}
.bird-2 {
opacity: 0;
bottom: -30px;
background: #6F6E74;
&::after {
border-right-color: black;
}
.bird__head {
background-image: linear-gradient(-170deg, black 14px, transparent 15px), radial-gradient(circle at 125% 25%, black 29px, transparent 30px);
&::before {
left: 22px;
top: 1px;
width: 40px;
height: 12px;
border-radius: 0 30px 0 0/ 0 12px 0 0;
background: black;
transform: rotate(-30deg);
}
&::after {
opacity: 0;
}
}
.bird__wing {
background: black;
&::after {
border-right-color: black;
}
}
}
.machete {
width: 40px;
height: 90px;
background: white;
top: 20px;
&::before {
width: 50px;
height: 50px;
background: transparent;
border: 5px solid transparent;
border-color: red transparent transparent red;
border-radius: 50%;
left: 15px;
transform: rotate(-45deg);
top: -45px;
box-shadow: -12px -12px 0 5px white;
}
&::after {
@include center;
width: 12px;
height: 45px;
border-radius: 0 0 10px 10px;
background: inherit;
top: 100%;
}
}
.asur {
width: 60px;
height: 140px;
transform-origin: 50% 15px;
&::before {
@include center;
width: 10px;
height: 80px;
background: black;
}
&::after {
border: 10px solid transparent;
border-left-color: black;
border-radius: 50%;
width: 60px;
height: 60px;
left: 34px;
top: -20px;
margin-left: -10px;
transform: rotate(60deg);
}
}
.asur__head {
@include center;
width: 60px;
height: 60px;
border-radius: 50%;
background: #212925;
bottom: 0;
box-shadow: 30px 0 0 -23px #2F2F2F, -30px 0 0 -23px #2F2F2F;
background-image: linear-gradient(to right, #212925 12px, transparent 13px, transparent 22px, #212925 22px, #212925 38px, transparent 39px, transparent 47px, #212925 48px), linear-gradient(to bottom, #212925 24px, transparent 24px, transparent 33px, #212925 33px), repeating-linear-gradient(-45deg, transparent, transparent 3px, #0A0A0A 3px, #0A0A0A 6px), repeating-linear-gradient(45deg, transparent, transparent 3px, #0A0A0A 3px, #0A0A0A 6px);
&::before {
left: -5px;
top: -10px;
transform: rotate(45deg);
border: 10px solid transparent;
border-color: black transparent transparent black;
border-radius: 50%;
width: 70px;
height: 70px;
}
&:after {
@include center;
bottom: -10px;
width: 30px;
height: 20px;
background: inherit;
border-radius: 0 0 10px 10px;
background-image: linear-gradient(to bottom, transparent 4px, rgba(black, 0.1) 8px);
}
}
.veena {
bottom: 140px;
right: -120px;
width: 100px;
height: 75px;
border-radius: 125px 125px 95px 95px/ 120px 120px 70px 70px;
background: $main-stilhoute-color;
opacity: 0;
&::before {
@include center;
width: 30px;
height: 165px;
background: inherit;
bottom: 95%;
border-radius: 10px 10px 0 0;
}
}
.veena__neck {
@include center;
width: 2px;
background: $main-bg-color;
height: 190px;
bottom: 35px;
box-shadow: 6px 0 0 0 $main-bg-color, -6px 0 0 0 $main-bg-color;
&::before {
@include center;
width: 10px;
height: 4px;
top: 20px;
box-shadow: -20px 0 0 0 $main-stilhoute-color, 20px 0 0 0 $main-stilhoute-color, -20px 9px 0 0 $main-stilhoute-color, 20px 9px 0 0 $main-stilhoute-color, -20px -9px 0 0 $main-stilhoute-color, 20px -9px 0 0 $main-stilhoute-color;
}
&::after {
@include center;
width: 8px;
height: 8px;
border-radius: 50%;
top: 18px;
box-shadow: -24px 0 0 0 $main-stilhoute-color, 24px 0 0 0 $main-stilhoute-color, -24px 9px 0 0 $main-stilhoute-color, 24px 9px 0 0 $main-stilhoute-color, -24px -9px 0 0 $main-stilhoute-color, 24px -9px 0 0 $main-stilhoute-color;
}
}
.necklace {
@include center;
top: 30px;
width: 70px;
height: 120px;
border-radius: 0 0 15px 15px;
border: 5px solid #276374;
opacity: 0;
border-top: none;
&::before, &::after {
width: 20px;
height: 25px;
border-radius: 0 15px 0 0;
border: 5px solid #276374;
border-bottom: none;
border-left: none;
top: -20px;
}
&::before {
left: -20px;
}
&::after {
right: -20px;
transform: scaleX(-1);
}
.skull {
top: 85px;
transform: translateX(-50%) scale(0.5);
&:nth-of-type(2) {
left: 0px;
top: -10px;
}
&:nth-of-type(3) {
left: 0px;
top: 45px;
}
&:nth-of-type(4) {
left: 100%;
top: -10px;
}
&:nth-of-type(5) {
left: 100%;
top: 45px;
}
}
}
.scissor {
left: 0;
width: 50px;
height: 120px;
}
.scissor__leg {
@include center;
bottom: 0;
width: 5px;
height: 60px;
background: black;
color: black;
transform-origin: 50% 10px;
&::before {
@include center;
width: 25px;
height: 25px;
border-radius: 50%;
top: 100%;
border: 5px solid;
}
&::after {
top: -60px;
right: 0;
background: inherit;
height: 80px;
width: 15px;
border-radius: 15px 0 0 5px;
}
&.left {
transform: rotate(-15deg);
}
&.right {
transform: rotate(15deg) scaleX(-1);
}
}
.flower {
width: 100px;
height: 100px;
opacity: 0;
&:not(.flower-2) {
&::before {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid transparent;
border-left-color: #91A54B;
top: -10px;
left: 45px;
transform: rotate(-40deg);
}
}
}
.petal {
width: 50px;
height: 50px;
border-radius: 90% 0 50% 50% / 50% 0 90% 50%;
left: 25px;
background: #BF518E;
color: #BF518E;
&.top {
z-index: 2;
transform: rotate(-45deg);
box-shadow: -14px -16px 0 -4px rgba(black, 0.15), 16px 14px 0 -4px rgba(black, 0.15), -14px -16px 0 -4px, 16px 14px 0 -4px, -30px -25px 0 -7px, 25px 30px 0 -7px;
}
&.bottom {
top: 29px;
transform: scaleY(-0.5) scaleX(0.8) rotate(-45deg);
background-image: linear-gradient(to top, rgba(black, 0.15), rgba(black, 0.15));
box-shadow: -14px -16px 0 -4px, 16px 14px 0 -4px;
}
&.left, &.right {
top: 25px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)) !important;
box-shadow: 13px -10px 0 -5px rgba(0, 0, 0, 0.15), 11px -10px 0 -5px;
}
&.left {
left: -10px;
transform: scaleY(-0.4) scaleX(0.5) rotate(-90deg);
}
&.right {
right: -10px;
left: auto;
transform: scaleY(0.4) scaleX(0.5) rotate(90deg);
}
}
.flower-2 {
@include center;
width: 250px;
height: 150px;
bottom: 15px;
&.front {
z-index: 1;
}
&.back {
z-index: 0;
transform: translateX(-50%) translateY(-40px) scaleX(0.9) scaleY(0.8);
.petal.left {
top: 40px;
left: -30px;
}
.petal.right {
top: 40px;
right: -30px;
}
&::after {
@include center;
top: 50px;
width: 200px;
height: 50px;
z-index: 2;
border-radius: 50%;
}
}
.petal {
color: #D81962;
background: #D81962;
&.top {
top: 25px;
left: -14px;
box-shadow: 19px 4px 0 5px, 23px 23px 0 0, 46px 46px 0 0, 65px 50px 0 5px, 69px 69px 0 0, 92px 92px 0 0, 111px 96px 0 5px, 115px 115px 0 0, 138px 138px 0 0, 157px 142px 0 5px, 161px 161px 0 0;
}
&.bottom {
left: 100px;
top: 55px;
color: darken(#D81962, 15%);
background: darken(#D81962, 5%);
transform: scaleY(-1) scaleX(1.85) rotate(-45deg);
box-shadow: -28px -21px 0 -1px, 22px 28px 0 -1px;
}
&.left {
left: -25px;
transform: scaleY(1) scaleX(1.25) rotate(-90deg);
}
&.right {
right: -25px;
transform: scaleY(-1) scaleX(1.25) rotate(90deg);
}
}
&::before {
@include center;
bottom: 0;
width: 6px;
height: 45px;
border-radius: 3px;
background: #91A54B;
}
}
.gada {
width: 80px;
height: 80px;
border-radius: 50%;
background: #9E7020;
box-shadow: 0 -40px 0 -30px #9C6919, -5px 0 0 0 #9E7020, 5px 0 0 0 #9E7020;
&::before {
@include center;
width: 9px;
height: 9px;
top: 35px;
border-radius: 50%;
background: #AB7C27;
box-shadow: 11px 0 0 0 #AB7C27, 22px 0 0 0 #AB7C27, 33px 0 0 0 #AB7C27, 44px 0 0 0 #AB7C27, -11px 0 0 0 #AB7C27, -22px 0 0 0 #AB7C27, -33px 0 0 0 #AB7C27, -44px 0 0 0 #AB7C27;
}
&::after {
@include center;
top: 100%;
width: 18px;
border-style: solid;
border-color: #986C1E transparent transparent transparent;
border-width: 100px 2px 0;
}
}
.sword {
width: 40px;
border-style: solid;
border-color: $main-stilhoute-color transparent transparent transparent;
border-width: 120px 10px 0;
&::before {
@include center;
bottom: 120px;
border-style: solid;
border-color: transparent transparent $main-stilhoute-color transparent;
border-width: 0 20px 25px;
}
&::after {
@include center;
width: 40px;
height: 5px;
background: $main-stilhoute-color;
}
}
.sword__handle {
@include center;
width: 8px;
height: 70px;
top: 5px;
background: $main-stilhoute-color;
&::before {
@include center;
bottom: -10px;
width: 12px;
height: 12px;
border-radius: 50%;
background: inherit;
}
}
.trishul {
width: 8px;
height: 180px;
background: $main-stilhoute-color;
&::before {
@include center;
top: -69px;
border-style: solid;
border-color: transparent transparent $main-stilhoute-color transparent;
border-width: 0 9px 75px;
}
&:after {
@include center;
top: 100%;
border-style: solid;
border-color: $main-stilhoute-color transparent transparent transparent;
border-width: 10px 8px;
}
}
.trishul__point {
width: 30px;
height: 30px;
border-radius: 50%;
background: transparent;
box-shadow: -8px 10px 0 8px $main-stilhoute-color, 0 9px 0 6px $main-stilhoute-color, 6px 40px 0 -5px $main-stilhoute-color;
&::before {
width: 30px;
height: 70px;
background: transparent;
border-radius: 10px 55px 0 0/ 10px 175px 0 0;
bottom: 24px;
left: -36px;
transform-origin: 100% 100%;
transform: rotate(45deg);
box-shadow: 8px 0 0 0 $main-stilhoute-color, 2px -2px 0 0 $main-stilhoute-color;
}
&.left {
transform: rotate(-20deg);
left: -30px;
}
&.right {
transform: scaleX(-1) rotate(-20deg);
right: -30px;
}
}
.trishul-2 {
opacity: 0;
bottom: -200px;
left: 50%;
height: 350px;
transform: scaleX(0.75) scaleY(0.85) translateX(-50%) rotate(90deg);
}
.dumroo {
@include center;
top: 55px;
height: 40px;
border-style: solid;
border-color: transparent $main-stilhoute-color;
border-width: 12px 30px;
&::before {
@include center;
width: 15px;
height: 40px;
top: -12px;
border-radius: 50%;
box-shadow: -30px 0 0 0 $main-stilhoute-color, 30px 0 0 0 $main-stilhoute-color;
}
}
.javelin {
width: 8px;
height: 140px;
background: $main-stilhoute-color;
&::before {
@include center;
top: -75px;
border-style: solid;
border-color: transparent transparent $main-stilhoute-color transparent;
border-width: 0 18px 75px;
}
&:after {
@include center;
top: 100%;
border-style: solid;
border-color: $main-stilhoute-color transparent transparent transparent;
border-width: 8px 10px;
}
}
.javelin__point {
width: 30px;
height: 30px;
border-radius: 50%;
background: transparent;
box-shadow: 14px -5px 0 -3px $main-stilhoute-color, 35px 14px 0 0 $main-bg-color, 24px 2px 0 0 $main-stilhoute-color, -8px 10px 0 8px $main-stilhoute-color, 0 9px 0 6px $main-stilhoute-color, 8px 29px 0 1px $main-stilhoute-color;
transform: rotate(-20deg);
left: -30px;
&::before {
width: 30px;
height: 30px;
bottom: 24px;
left: -36px;
transform-origin: 100% 100%;
transform: rotate(45deg);
box-shadow: 8px 0 0 0 $main-stilhoute-color;
}
&::after {
width: 25px;
height: 25px;
border-radius: 50%;
background: $main-bg-color;
left: -10px;
top: -30px;
box-shadow: 5px -5px 0 0px $main-stilhoute-color, 1px -2px 0 2px $main-stilhoute-color, 6px 2px 0 3px $main-stilhoute-color;
transform: rotate(-40deg);
}
}
.volcano {
opacity: 0;
bottom: 10px;
width: 150px;
height: 70px;
border-radius: 150px 150px 150px 150px/ 120px 120px 20px 20px;
background: $volcano-color;
background-image: linear-gradient(to bottom, $volcano-color 40px, transparent 40px), radial-gradient(circle at 50% 110%, transparent 60px, darken($volcano-color, 5%) 60px, darken($volcano-color, 5%) 62px, transparent 62px);
.neck {
top: -32px;
background-image: none;
background: $volcano-color !important;
&::before, &::after {
box-shadow: 10px 0 0 -5px $volcano-color;
}
}
.cut {
border-color: lighten($volcano-color, 5%);
background: darken($volcano-color, 5%);
}
&.left {
left: -80px;
}
&.right {
right: -80px;
}
.bloodstream {
top: -290px;
left: 78px;
transform: rotateY(45deg) scale(0.5);
&::before {
border-width: 8px;
animation-duration: 6s;
border-color: red;
}
&.right {
left: 72px;
transform: rotateY(135deg) scale(0.5);
}
}
}
.elephant {
bottom: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 40px 0 0 0 #98B5C5, -40px 0 0 0 #98B5C5;
opacity: 0;
&::before {
left: -10px;
top: -10px;
width: 70px;
height: 70px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background: #ACCCDB;
transform: rotate(135deg);
}
&.left {
left: -70px;
transform: scale(0.9);
}
&.right {
right: -70px;
transform: scale(0.9) scaleX(-1);
}
}
.tusk {
width: 80px;
height: 80px;
border-radius: 50%;
border-style: solid;
border-color: transparent transparent transparent #ACCCDB;
border-width: 15px;
bottom: -68px;
left: 10px;
transform: rotate(10deg);
&::before {
width: 60px;
height: 60px;
border-radius: 50%;
background: $main-bg-color;
background-image: radial-gradient(circle at 23px 41px, $main-bg-color 4px, transparent 5px), radial-gradient(circle at 27px 39px, #ACCCDB 7px, transparent 8px), radial-gradient(circle at 25px 37px, $main-bg-color 8px, transparent 9px), radial-gradient(circle at 22px 42px, #ACCCDB 13px, transparent 14px), radial-gradient(circle at 24px 44px, $main-bg-color 15px, transparent 16px), radial-gradient(circle at 30px 34px, #ACCCDB 24px, transparent 25px), radial-gradient(circle at 35px 45px, #ACCCDB 16px, transparent 17px);
transform: rotate(130deg);
top: 15px;
left: -10px;
}
}
.bone {
@include center;
bottom: -10px;
width: 80px;
height: 10px;
background: $main-stilhoute-color;
opacity: 0;
&::before {
@include center;
top: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: -38px -6px 0 0 $main-stilhoute-color, -38px 6px 0 0 $main-stilhoute-color, 38px -6px 0 0 $main-stilhoute-color, 38px 6px 0 0 $main-stilhoute-color;
}
&.left {
left: 28%;
}
&.right {
left: 72%;
}
}
.basket {
@include center;
opacity: 0;
width: 130px;
height: 160px;
border-radius: 120px 120px 150px 150px/130px 130px 240px 240px;
border: 8px solid #92531A;
border-bottom-color: $main-bg-color;
bottom: -20px;
background: #744819;
z-index: 3;
background-image: linear-gradient(to top, $main-bg-color 15px, transparent 15px), repeating-linear-gradient(-45deg, transparent, transparent 3px, darken(#744819, 5%) 3px, darken(#744819, 5%) 6px), repeating-linear-gradient(45deg, transparent, transparent 3px, darken(#744819, 5%) 3px, darken(#744819, 5%) 6px);
&::before, &::after {
width: 8px;
height: 30px;
background: #92531A;
bottom: 2px;
}
&::before {
left: 15px;
transform: skewX(33deg);
}
&::after {
right: 15px;
transform: skewX(-33deg);
}
}
.arrow {
width: 160px;
height: 4px;
background: $main-stilhoute-color;
&::before, &::after {
width: 2px;
height: 5px;
background: inherit;
left: 10px;
box-shadow: -4px 0 0 0 $main-stilhoute-color, 4px 0 0 0 $main-stilhoute-color;
}
&::before {
bottom: 100%;
transform: skewX(20deg);
}
&::after {
top: 100%;
transform: skewX(-20deg);
}
$arrows: (-3, -1, 1, 3);
@each $arrow in $arrows {
$i: index($arrows, $arrow);
&.arrow-#{$i - 1} {
transform: rotate(#{$arrow * 10}deg);
}
}
}
.tip {
left: 100%;
top: -6px;
border-style: solid;
border-width: 8px 15px;
border-color: transparent transparent transparent $main-stilhoute-color;
}
.lasso {
width: 50px;
height: 80px;
border-radius: 50%;
border: 8px solid $main-stilhoute-color;
&::before, &::after {
border-radius: 50%;
border-style: solid;
border-width: 8px;
border-color: $main-stilhoute-color $main-stilhoute-color transparent transparent;
}
&::before {
height: 50px;
width: 50px;
left: -24px;
bottom: -45px;
transform: scaleY(-1) rotate(30deg);
}
&::after {
height: 60px;
width: 60px;
right: -42px;
bottom: -48px;
transform: scale(-1) rotate(-5deg);
}
}
.bow {
width: 130px;
height: 210px;
border-radius: 50%;
border-left: 5px solid $main-stilhoute-color;
box-shadow: -10px 0 0 -3px $main-stilhoute-color;
transform: scale(0.85, 0.7);
background: linear-gradient(to right, transparent 40px, $main-stilhoute-color 40px, $main-stilhoute-color 42px, transparent 42px);
&::before, &::after {
background: $main-stilhoute-color;
background-image: radial-gradient(circle at 23px 41px, $main-stilhoute-color 4px, transparent 5px), radial-gradient(circle at 27px 39px, $main-bg-color 7px, transparent 8px), radial-gradient(circle at 25px 37px, $main-stilhoute-color 8px, transparent 9px), radial-gradient(circle at 22px 42px, $main-bg-color 13px, transparent 14px), radial-gradient(circle at 24px 44px, $main-stilhoute-color 15px, transparent 16px), radial-gradient(circle at 30px 34px, $main-bg-color 24px, transparent 25px), radial-gradient(circle at 35px 45px, $main-bg-color 16px, transparent 17px);
width: 60px;
height: 60px;
border-radius: 50%;
left: -5px;
}
&::before {
top: -48px;
transform: rotate(45deg);
}
&::after {
bottom: -48px;
transform: scaleY(-1) rotate(45deg);
}
}
.bloodstream {
width: 430px;
height: 260px;
top: -310px;
left: 85px;
transform-origin: 0 100%;
transform: rotateY(45deg);
overflow: hidden;
opacity: 0;
@include morphing-prop(true);
&::before {
top: 0;
left: 0;
width: 460px;
height: 460px;
border-style: dotted;
border-width: 5px;
border-color: red red transparent;
border-radius: 50%;
animation: blood-flow 4s linear infinite;
}
}
.character {
opacity: 0;
width: 550px;
height: 650px;
bottom: -280px;
transform: scale(0.2);
@include morphing-prop(true);
.head, .body, .neck {
background: $human-skin-color !important;
color: $human-skin-color !important;
}
.nose, .lips {
color: darken($human-skin-color, 5%) !important;
}
.blush {
color: darken($human-skin-color, 5%) !important;
}
.lips::before, .lips::after {
color: darken($human-skin-color, 5%) !important;
background: darken($human-skin-color, 5%) !important;
}
.eyes {
color: transparent;
}
.nose::before, .nose::after, .hair::after {
opacity: 0;
}
}
.woman {
left: -140px;
.bust {
background: lighten($human-skin-color, 2%) !important;
}
}
.man, .devil {
left: -240px;
.head {
transform: translateX(-50%) scaleY(1.1) scaleX(0.9);
top: 70px;
}
.hair {
height: 270px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 40px;
&::before {
box-shadow: -55px -22px 0 18px, -70px 12px 0 18px, -190px 112px 0 -20px $main-bg-color, 55px -22px 0 18px, 70px 12px 0 18px, 190px 112px 0 -20px $main-bg-color;
}
}
.blush {
bottom: 30px;
transform: translateX(-50%) scale(1.2);
}
.lips {
transform: translateX(-50%) scale(1.5);
}
.neck {
width: 90px;
}
.body {
width: 250px;
background-image: radial-gradient(circle at 20% 50%, rgba(black, 0.2) 6px, transparent 7px), radial-gradient(circle at 80% 50%, rgba(black, 0.2) 6px, transparent 7px);
}
.bust, .locks {
opacity: 0;
}
}
.devil {
right: -300px;
bottom: -150px;
left: auto;
transform: scale(0.35);
.tongue-cut {
opacity: 1;
top: -30%;
right: 30%;
}
.lips {
opacity: 0;
}
.eyes::after {
top: -5px;
width: 100px;
color: $main-hair-color;
}
.nose {
color: $main-hair-color;
}
.horn {
top: -75px;
width: 50px;
height: 100px;
background: transparent;
border-radius: 50%;
color: white;
box-shadow: -20px 25px 0 -5px, -15px 10px 0 0, -30px 30px 0 -5px;
&.left {
left: 40px;
transform: rotate(-35deg) scale(0.75);
}
&.right {
right: 40px;
transform: rotate(35deg) scale(0.75) scaleX(-1);
}
}
}
.heart {
left: 45px;
bottom: 30px;
width: 80px;
height: 80px;
z-index: 1;
animation: heart-beat 1s linear infinite alternate;
transform: scale(0.35);
opacity: 0;
&:before, &:after {
left: calc(50% - 20px);
top: calc(50% - 32px);
width: 40px;
height: 64px;
background: red;
border-radius: 20px 20px 0 0;
}
&:before {
transform: translate(20px) rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
transform: translate(-20px) rotate(45deg);
transform-origin: 100% 100%;
}
}
input {
z-index: 5;
left: 5vw;
top: 50%;
cursor: pointer;
width: 1em;
&::before, &::after {
width: 1em;
height: 2.5em;
background: white;
left: 50%;
}
&::before {
bottom: 50%;
transform: skewX(-25deg);
}
&::after {
top: 50%;
transform: skewX(25deg);
}
&:checked {
display: none;
~ input {
right: 5vw;
left: auto;
transform: scaleX(-1);
}
~ .heading {
&::before {
content: var(--heading);
}
&::after {
content: var(--subheading);
}
}
+ input {
z-index: 6;
}
.machete, .asur, .scissor, .flower, .gada, .trishul, .sword, .arrow, .javelin, .lasso, .bow, .tongue-cut {
transition: none !important;
}
}
&[value=default]:checked ~ .kali {
.body, .lips, .moon {
opacity: 0;
}
.title {
opacity: 1;
}
.head, .eyes {
background: $main-bg-color;
}
.nose::before, .nose::after {
border-color: black black black transparent;
}
}
&[value=main]:checked ~ .kali {
~ .heading {
--heading: 'Kali';
--subheading: 'In one of her most violent forms, the Goddess was fighting demons and slaying them nonstop. To end the madness, Lord Shiva threw himself at her feet, so she could step on him accidentally. When she did, Kali put her tongue out in embarrassment, realizing she was standing on her husband.';
}
.skull:not(.skull-2), .trishul-2 {
opacity: 1;
@include morphing-prop;
}
.hand {
&:nth-of-type(2) {
@include hand-gesture(true, true);
.machete {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(4) {
@include hand-gesture;
.asur {
opacity: 1;
@include morphing-prop;
}
}
}
}
&[value=matangi]:checked ~ .kali {
~ .heading {
--heading: 'Matangi Kali';
--subheading: 'The tantric form of Goddess Saraswati, she is depicted as emerald green in colour. She is considered an outcast, and often offered leftover food. She is worshipped for her supernatural powers and for gaining control over enemies.';
}
.skull:not(.skull-2), .veena, .bird:not(.bird-2) {
opacity: 1;
@include morphing-prop;
}
.tongue {
opacity: 0;
}
.blouse {
opacity: 1;
}
.head, .body, .neck, .hand {
background: $matangi-color;
color: $matangi-color;
}
.thumb, .bust {
background: lighten($matangi-color, 5%);
}
.hand {
&:nth-of-type(1) {
top: -80px;
left: -150px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.machete {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
top: -80px;
transform: rotate(0deg) scaleX(-1);
@include hand-gesture(false);
}
&:nth-of-type(3) {
top: 80px;
transform: rotate(0deg);
}
&:nth-of-type(4) {
top: 40px;
right: -150px;
transform: rotate(90deg) scaleX(-1);
@include hand-gesture(false);
}
}
}
&[value=chinna-masta]:checked ~ .kali {
~ .heading {
--heading: 'Chhinna Masta';
--subheading: 'Literally meaning, \'the one whose head is severed\'. She holds her own head that’s drinking blood emerging from the stump of her neck, and at her feet, is a divine couple in a romantic position. This avatar signifies both death and creation.';
}
.skull {
opacity: 0;
}
.man, .woman, .heart, .bloodstream {
opacity: 1;
@include morphing-prop;
}
.blush {
color: rgba(0, 0, 0, 0.1)
}
.head, .body, .neck, .hand {
background: $chinna-masta-color;
color: $chinna-masta-color;
}
.thumb, .bust {
background: lighten($chinna-masta-color, 5%);
}
> .head, > .hair {
left: 70%;
top: 110px;
}
> .body {
left: 15%;
bottom: 130px;
}
> .hair {
height: 420px;
.locks.left-2, .locks.right-2 {
opacity: 0;
}
&::after {
transform: translateX(-50%) translateY(-120%) scale(1.75, 1.25);
}
}
.hand {
opacity: 0;
&:nth-of-type(1) {
opacity: 1;
top: -60px;
left: -30px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.machete {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
opacity: 1;
top: 100px;
right: -210px;
@include hand-gesture(false);
}
}
}
&[value=samshan]:checked ~ .kali {
~ .heading {
--heading: 'Shamshan Kali';
--subheading: 'This avatar of Kali is largely worshipped by tantrics. She is believed to reside in cremation grounds and cemeteries, to protect the purity of the site. Unlike her other avatars, Shamshan Kali is seen with two hands, and without a lolling tongue.';
}
.tongue {
opacity: 0;
}
.necklace, .skull, .skull-2, .bone {
opacity: 1;
@include morphing-prop;
}
.head, .body, .neck, .hand {
background: $samshan-color;
color: $samshan-color;
}
.thumb, .bust {
background: lighten($samshan-color, 5%);
}
.hand {
opacity: 0;
&:nth-of-type(1) {
opacity: 1;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.machete {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
opacity: 1;
top: -20px;
@include hand-gesture;
.asur {
opacity: 1;
@include morphing-prop;
}
}
}
.body > .skull {
bottom: -120px;
transform: translateX(-50%) scale(1.5);
}
}
&[value=bagala]:checked ~ .kali {
~ .heading {
--heading: 'Bagala Kali';
--subheading: 'She is also known as Bagalamukhi Kali, where \'bagala\' means bridle and \'mukhi\' means face. Literally, it means one whose face has the power to control. The colour yellow is associated with the Goddess. In one of her more common appearances, she is seen stunning a demon into silence by clubbing him with her right hand and ripping his tongue out with her left.';
}
.skull, .tongue {
opacity: 0;
}
.devil, .flower-2 {
opacity: 1;
@include morphing-prop;
}
.head, .body, .neck, .hand {
background: $bagala-color;
color: $bagala-color;
}
.head, .body, .hair, .flower-2 {
left: 40%;
}
.thumb, .bust {
background: lighten($bagala-color, 10%);
}
.lips {
color: #B7141B;
&::before, &::after {
background: #B7141B;
color: inherit;
}
}
.blouse {
opacity: 1;
background: $sunflower-color;
}
.blush {
color: rgba(red, 0.2);
}
.flower-2 {
bottom: -50px;
transform: translateX(-50%) scale(0.75);
&.back {
transform: translateX(-50%) translateY(-40px) scale(0.75) scaleX(0.9) scaleY(0.8);
opacity: 0.75;
&::after {
background: yellow;
}
}
.petal {
color: lighten($sunflower-color, 2%);
background: lighten($sunflower-color, 2%);
&.bottom {
color: darken($sunflower-color, 12%);
background: darken($sunflower-color, 5%);
}
}
}
.hand {
opacity: 0;
&:nth-of-type(1) {
opacity: 1;
left: -150px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.gada {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
opacity: 1;
top: -20px;
right: -140px;
@include hand-gesture(true, true);
.tongue-cut {
opacity: 1;
@include morphing-prop;
}
}
}
}
&[value=bhairavi]:checked ~ .kali {
~ .heading {
--heading: 'Bhairavi Kali';
--subheading: 'She is worshipped as the fierce mother who protects her children with all her might. In scriptures, however, she is described as the harbinger of death. Like Shiva, she too is possessed with the ultimate knowledge of total destruction.';
}
.skull:not(.skull-2), .volcano, .volcano .bloodstream {
opacity: 1;
@include morphing-prop;
}
.head, .body, .neck, .hand {
background: $bhairavi-color;
color: $bhairavi-color;
}
.thumb, .bust {
background: lighten($bhairavi-color, 5%);
}
.blush {
color: rgba(black, 0.15);
}
.skull {
bottom: -60px;
transform: translateX(-50%) scale(1.5);
}
.hand {
&:nth-of-type(1) {
left: -210px;
top: -150px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.asur {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(3) {
left: -130px;
top: 90px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.sword {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(4) {
top: -100px;
right: -250px;
transform: rotate(0deg) scaleX(-1);
@include hand-gesture(false);
}
&:nth-of-type(2) {
right: -130px;
top: 80px;
@include hand-gesture(true, true);
.trishul {
opacity: 1;
@include morphing-prop;
}
}
}
}
&[value=tara]:checked ~ .kali {
~ .heading {
--heading: 'Tara';
--subheading: 'Her name means, \'the one who protects\'. She too stands on Lord Shiva with her tongue out in embarrassment. But unlike Kali, Tara has a light blue complexion. She is seen clad waist-down in tiger skin.';
}
.trishul-2 {
opacity: 1;
@include morphing-prop;
}
.head, .body, .neck, .hand {
background: $tara-color;
color: $tara-color;
}
.thumb, .bust {
background: lighten($tara-color, 5%);
}
.hand {
&:nth-of-type(1) {
left: -150px;
top: -90px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.machete {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(3) {
left: -150px;
top: 50px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.scissor {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(4) {
top: -80px;
right: -150px;
@include hand-gesture(true, true);
.flower {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
right: -150px;
top: 20px;
@include hand-gesture(true, true);
.asur {
opacity: 1;
@include morphing-prop;
}
}
}
}
&[value=shodoshi]:checked ~ .kali {
~ .heading {
--heading: 'Shodoshi';
--subheading: 'The name \'Shodoshi\' means sixteen in Sanskrit. She is thus represented as a 16-year-old who rises from the navel of Lord Shiva, with the trinity — Brahma, Vishnu and Shiva — paying its respects and bestowing its collective powers upon her.';
}
.trishul-2, .flower-2, .moon {
@include morphing-prop;
opacity: 1;
}
.tongue, .skull {
opacity: 0;
}
.head, .neck, .hand {
background: $shodoshi-color;
color: $shodoshi-color;
}
.body {
background: linear-gradient(to bottom, $shodoshi-color 100px, transparent 100px);
}
.hair {
&::after, .left-2, .right-2 {
opacity: 0;
}
}
.thumb, .bust {
background: lighten($shodoshi-color, 3%);
}
.blouse {
opacity: 1;
background: transparent;
background-image: radial-gradient(circle at 18% 90%, #C31A23 35px, transparent 20px), radial-gradient(circle at 82% 90%, #C31A23 35px, transparent 20px), radial-gradient(circle at 50% 45%, #C31A23 35px, transparent 20px), radial-gradient(circle at 50% 25%, #C31A23 35px, transparent 20px), radial-gradient(circle at 50% 75%, #C31A23 35px, transparent 35px), radial-gradient(circle at 50% 100%, #C31A23 35px, transparent 35px), linear-gradient(-135deg, transparent 70px, #C31A23 70px, #C31A23 100px, transparent 100px), linear-gradient(135deg, transparent 70px, #C31A23 70px, #C31A23 100px, transparent 100px);
&::before, &::after {
background: #C31A23;
}
}
.flower-2 {
&.back {
opacity: 0.75;
}
}
.blush {
color: rgba(black, 0.1);
}
.hand {
&:nth-of-type(1) {
left: -150px;
top: -180px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.arrow {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(3) {
left: -150px;
top: 20px;
transform: rotate(-90deg);
@include hand-gesture;
.bow {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(4) {
top: -150px;
right: -150px;
@include hand-gesture(true, true);
.javelin {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
right: -150px;
top: 20px;
@include hand-gesture(true, true);
.lasso {
opacity: 1;
@include morphing-prop;
}
}
}
}
&[value=gajalakshmi]:checked ~ .kali {
~ .heading {
--heading: 'Kamala Kali';
--subheading: 'This tantric form of Goddess Lakshmi is also known as \'Gajalakshmi\' in the southern parts of India, as she is seen flanked by two elephants. Just like Lakshmi, she too is worshipped for wealth, fertility and prosperity.';
}
.flower-2, .elephant {
opacity: 1;
@include morphing-prop;
}
.tongue, .skull, .nose::before, .nose::after {
opacity: 0;
}
.head, .body, .neck, .hand {
background: $gajalakshmi-color;
color: $gajalakshmi-color;
}
.hair {
&::after, .left-2, .right-2 {
opacity: 0;
}
}
.thumb, .bust {
background: lighten($gajalakshmi-color, 3%);
}
.blouse {
opacity: 1;
background: #C40058;
&::before, &::after {
background: lighten(#C40058, 5%);
}
}
.flower-2 {
&.back {
opacity: 0.75;
}
}
.blush {
color: rgba(#C40058, 0.15);
}
.lips {
color: #914457;
&::before, &::after {
background: #914457;
color: inherit;
}
}
.hand {
.petal {
background-color: #C40058;
color: #C40058;
}
&:nth-of-type(1) {
left: -150px;
top: -80px;
transform: rotate(-90deg);
@include hand-gesture(true, true);
.flower {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(3) {
left: -160px;
top: 20px;
}
&:nth-of-type(4) {
top: -80px;
right: -150px;
@include hand-gesture(true, true);
.flower {
opacity: 1;
@include morphing-prop;
}
}
&:nth-of-type(2) {
right: -160px;
top: 20px;
transform: rotate(180deg) scaleX(-1);
}
}
}
&[value=dhumvati]:checked ~ .kali {
~ .heading {
--heading: 'Dhumavati';
--subheading: 'She is the only widowed Goddess in Hindu mythology, often depicted as an old, ugly woman, associated with all things inauspicious. She is seen riding a horseless chariot, or a crow. She is known to present herself between conclusion of life and creation, thus relaying the ultimate knowledge.';
}
.skull, .tongue, .nose::before, .nose::after, .hair::after {
opacity: 0;
}
.basket, .bird-2 {
opacity: 1;
@include morphing-prop;
}
.head, .body, .neck, .hand {
background: $dhumvati-color;
color: $dhumvati-color;
}
.thumb, .bust {
background: lighten($dhumvati-color, 3%);
}
.lips {
color: darken($dhumvati-color, 5%);
&::before, &::after {
color: darken($dhumvati-color, 5%);
background: darken($dhumvati-color, 5%);
}
}
.blush {
color: darken($dhumvati-color, 5%);
}
.hair {
background: #7B7C7E;
color: #7B7C7E;
.locks {
color: #7B7C7E;
}
}
.eyes::after {
color: #7B7C7E;
}
.blouse {
opacity: 1;
background: #9FA0A5;
&::before, &::after {
background: lighten(#9FA0A5, 5%);
}
}
.hand {
opacity: 0;
&:nth-of-type(1) {
opacity: 1;
left: -160px;
top: -40px;
}
&:nth-of-type(2) {
opacity: 1;
right: -160px;
top: 20px;
transform: rotate(180deg) scaleX(-1);
}
}
}
}
@media (min-width: 1440px) {
body {
font-size: 16px;
}
.kali {
transform: translate(-50%, -50%) scale(0.85);
}
}
@media (max-width: 1440px) {
body {
font-size: 14px;
}
.kali {
transform: translate(-50%, -50%) scale(0.75);
}
}
@media (max-width: 1024px) {
body {
font-size: 12px;
}
.heading {
&::before, &::after {
left: 10vw;
right: 10vw;
}
}
.kali {
transform: translate(-50%, -50%) scale(0.65);
}
}
@media (max-width: 640px) {
body {
font-size: 10px;
}
.heading {
&::before, &::after {
left: 5vw;
right: 5vw;
}
}
.kali {
transform: translate(-50%, -50%) scale(0.45);
}
}以上是关于scss 10种形式的马卡利|纯CSS响应和动画的主要内容，如果未能解决你的问题，请参考以下文章