CSS Grid experiment of a page from a vintage astronomy encyclopedia, found here https://www.etsy.com/listing/127297331/1950s-star-positions-original-vintage;
Each box has it's own grid that the stars are aligned on . The boxes also animate when hovered on.
A Pen by Kristopher Van Sant on CodePen.
| <div id="wrapper"> | |
| <div class="box one" > | |
| <div></div> | |
| <div></div> | |
| <div class="number">1</div> | |
| <span>Cygni</span> | |
| </div> | |
| <div class="box two"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">2</div> | |
| <span>Persei</span> | |
| </div> | |
| <div class="box three"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">3</div> | |
| <span>Canum Venaticorum</span> | |
| </div> | |
| <div class="box four"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">4</div> | |
| <span>Scorpii</span> | |
| </div> | |
| <div class="box five"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">5</div> | |
| <span>Delphini</span> | |
| </div> | |
| <div class="box six"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div class="number">6</div> | |
| <span>Andromedae</span> | |
| </div> | |
| <div class="box seven"> | |
| <div></div> | |
| <div class="large-star"> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="number">7</div> | |
| <span>Orionis</span> | |
| </div> | |
| <div class="box eight"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div class="number">8</div> | |
| <span>Cassiopeiae</span> | |
| </div> | |
| <div class="box nine"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">9</div> | |
| <span>Herculis</span> | |
| </div> | |
| <div class="box ten"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">10</div> | |
| <span>Boötis</span> | |
| </div> | |
| <div class="box eleven"> | |
| <div></div> | |
| <div class="large-star"> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="number">11</div> | |
| <span>Scorpii</span> | |
| </div> | |
| <div class="box twelve"> | |
| <div></div> | |
| <div></div> | |
| <div class="number">12</div> | |
| <span>Boötis</span> | |
| </div> | |
| <div class="key"> | |
| <h4>Plate XI. <span>Coloured Multiple Stars.</span></h4> | |
| <p>1. β Cygni 2. η Persei 3. α Canum Venaticorum. 4. β Scorpii. 5. y Delphini. 6. y Andromedae. 7. β Orionis. <br> 8. ι Cassiopeiae. 9. α Herculis. 10. ε Boötis. 11. α Scorpii. 12. ξ Boötis.</p> | |
| <p>N.B. For technical reasons the apparent diameters of the discs and diffraction rings of the brightest stars, and also their colours, are exaggerated considerably.</p> | |
| </div> | |
| </div> |
| $background-font: #fefde9; | |
| $box-key: #3a3c3c; | |
| $orange: #db9a46; | |
| $blue: #7fbfbd; | |
| $red: #c4312a; | |
| $yellow: #e8d854; | |
| $green: #9cc55e; | |
| $white: #f2f4df; | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| background-color: $background-font; | |
| display: grid; | |
| justify-items: center; | |
| } | |
| #wrapper { | |
| color: $background-font; | |
| font-size: 18px; | |
| padding-top: 5%; | |
| display: grid; | |
| grid-template-columns: 300px 300px 300px; | |
| grid-column-gap: 3px; | |
| grid-row-gap: 3px; | |
| } | |
| .box { | |
| background-color: $box-key; | |
| height: 300px; | |
| width: 300px; | |
| display: grid; | |
| z-index: 1; | |
| } | |
| .box .number { | |
| height: 20px; | |
| margin-left: 7px; | |
| margin-bottom: 5px; | |
| grid-column: 1; | |
| grid-row: 3; | |
| align-self: end; | |
| } | |
| .box span { | |
| font-family: 'Playball', cursive; | |
| font-size: 50px; | |
| display: none; | |
| animation: star-name 0.7s ease-in-out; | |
| animation-iteration-count: 1; | |
| animation-play-state: paused; | |
| } | |
| .box:hover > span { | |
| animation-play-state: running; | |
| } | |
| .large-star span { | |
| display: grid; | |
| } | |
| /* Box One */ | |
| .one { | |
| grid-template-columns: 1fr 4fr 1.2fr; | |
| grid-template-rows: 1fr 0.8fr 1fr; | |
| } | |
| .one div:nth-child(1) { | |
| height: 30px; | |
| width: 30px; | |
| background-color: $orange; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| align-self: center; | |
| position: relative; | |
| border: 4px solid $box-key; | |
| } | |
| .one div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 40px; | |
| width: 40px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-40deg, $orange, $box-key, $orange, $box-key); | |
| border: 4px solid $box-key; | |
| z-index: -1; | |
| bottom: -9px; | |
| left: -9px; | |
| animation: one-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .one:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .one div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 51px; | |
| width: 51px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(40deg, $box-key, $orange, $box-key, $orange, $box-key, $orange, $box-key); | |
| z-index: -2; | |
| bottom: -10px; | |
| left: -10px; | |
| opacity: 0.3; | |
| animation: one-first-after 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .one:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .one div:nth-child(2) { | |
| height: 20px; | |
| width: 20px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 3; | |
| grid-row: 3; | |
| align-self: center; | |
| margin-top: 5px; | |
| position: relative; | |
| border: 4px solid $box-key; | |
| } | |
| .one div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 30px; | |
| width: 30px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(40deg, $blue, $box-key, $blue, $box-key, $blue); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| opacity: 0.4; | |
| animation: one-second-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .one:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .one span { | |
| grid-column:2; | |
| grid-row: 2; | |
| align-self: center; | |
| justify-self: center; | |
| } | |
| /* Box Two */ | |
| .two { | |
| grid-template-columns: 1fr 4fr 1.2fr; | |
| grid-template-rows: 1fr 0.77fr 1fr; | |
| } | |
| .two div:nth-child(1) { | |
| height: 25px; | |
| width: 25px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 1; | |
| justify-self: end; | |
| align-self: end; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| } | |
| .two div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 31px; | |
| width: 31px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(125deg, $red 0%, rgba(196, 49, 42, 0.3) 30%); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| border: 2px solid $box-key; | |
| animation: two-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .two:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .two div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 37px; | |
| width: 37px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(110deg, $red 0%, rgba(196, 49, 42, 0.1) 20%); | |
| z-index: -2; | |
| bottom: -6px; | |
| left: -6px; | |
| animation: two-first-after 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .two:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .two div:nth-child(2) { | |
| height: 15px; | |
| width: 15px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 3; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| } | |
| .two div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 22px; | |
| width: 22px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-165deg, $blue 0%, rgba(127, 191, 189, 0.2) 30% ); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| border: 2px solid $box-key; | |
| animation: two-second-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .two:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .two div:nth-child(2):after { | |
| content: ''; | |
| position: absolute; | |
| height: 30px; | |
| width: 30px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-109deg, $blue 0%, rgba(127, 191, 189, 0.1) 17%); | |
| z-index: -2; | |
| bottom: -7px; | |
| left: -7px; | |
| animation: two-second-after 0.6s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .two:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .two span { | |
| grid-column:2; | |
| grid-row: 2; | |
| align-self: center; | |
| justify-self: center; | |
| } | |
| /* Box Three */ | |
| .three { | |
| grid-template-rows: 0.8fr 1fr 1fr; | |
| } | |
| .three div:nth-child(1) { | |
| height: 18px; | |
| width: 18px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| } | |
| .three div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 24px; | |
| width: 24px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(100deg, $blue 0%, rgba(127, 191, 189, 0.2) 30%, $blue 60%, rgba(127, 191, 189, 0.2) 100% ); | |
| z-index: -1; | |
| bottom: -6px; | |
| left: -6px; | |
| border: 3px solid $box-key; | |
| animation: three-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .three:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .three div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 32px; | |
| width: 32px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(50deg, $blue 0%, rgba(127, 191, 189, 0.2) 35%); | |
| z-index: -2; | |
| bottom: -7px; | |
| left: -7px; | |
| animation: three-first-after 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .three:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .three div:nth-child(2) { | |
| height: 30px; | |
| width: 30px; | |
| background-color: $yellow; | |
| border-radius: 50%; | |
| grid-column: 3; | |
| grid-row: 3; | |
| position: relative; | |
| border: 3px solid $box-key; | |
| } | |
| .three div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 40px; | |
| width: 40px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-100deg, $yellow 0%, $box-key 30%, rgba(232, 216, 84, 0.4) 90%); | |
| z-index: -1; | |
| bottom: -9px; | |
| left: -9px; | |
| border: 4px solid $box-key; | |
| animation: three-second-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .three:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .three div:nth-child(2):after { | |
| content: ''; | |
| position: absolute; | |
| height: 52px; | |
| width: 52px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(150deg, rgba(232, 216, 84, 0.35), $box-key, rgba(232, 216, 84, 0.05), $box-key); | |
| z-index: -2; | |
| bottom: -11px; | |
| left: -11px; | |
| animation: three-second-after 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .three:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .three span { | |
| grid-column: 1 / 4; | |
| grid-row: 2 / 4; | |
| align-self: end; | |
| margin-left: 20px; | |
| } | |
| /* Box Four */ | |
| .four { | |
| grid-template-columns: 1fr 1.5fr 1fr; | |
| grid-template-rows: repeat(3, 1fr); | |
| } | |
| .four div:nth-child(1) { | |
| height: 30px; | |
| width: 30px; | |
| background-color: $green; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: center; | |
| position: relative; | |
| border: 3px solid $box-key; | |
| } | |
| .four div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 40px; | |
| width: 40px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-15deg, rgba(156, 197, 94, 0.3) 0%, $box-key 50%, $green 75%, $box-key 90%); | |
| z-index: -1; | |
| bottom: -9px; | |
| left: -9px; | |
| border: 4px solid $box-key; | |
| animation: four-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .four:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .four div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 50px; | |
| width: 50px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(40deg, $green 0%, $box-key 30%); | |
| z-index: -2; | |
| bottom: -10px; | |
| left: -10px; | |
| opacity: 0.2; | |
| animation: four-first-after 0.6s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .four:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .four div:nth-child(2) { | |
| height: 22px; | |
| width: 22px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: end; | |
| justify-self: center; | |
| margin-left: 20%; | |
| position: relative; | |
| border: 3px solid $box-key; | |
| } | |
| .four div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 34px; | |
| width: 34px; | |
| border-radius: 50%; | |
| background-color: $blue; | |
| z-index: -1; | |
| bottom: -10px; | |
| left: -10px; | |
| border: 4px solid $box-key; | |
| opacity: 0.07; | |
| animation: four-second-before 0.6s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .four:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .four span { | |
| grid-column: 2; | |
| grid-row: 3; | |
| align-self: center; | |
| justify-self: center; | |
| } | |
| /* Box Five */ | |
| .five { | |
| grid-template-columns: 1fr 1fr 1fr; | |
| grid-template-rows: repeat(3, 1fr); | |
| } | |
| .five div:nth-child(1) { | |
| height: 20px; | |
| width: 20px; | |
| background-color: $orange; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: center; | |
| position: relative; | |
| border: 4px solid $box-key; | |
| } | |
| .five div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 30px; | |
| width: 30px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(20deg, $orange, $box-key, $orange, $box-key, $orange); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| opacity: 0.8; | |
| animation: five-first-before 0.6s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .five:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .five div:nth-child(2) { | |
| height: 15px; | |
| width: 15px; | |
| background-color: $green; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: center; | |
| justify-self: end; | |
| margin-top: 5%; | |
| border: 1px solid $box-key; | |
| box-shadow: 0 0 10px rgba(156, 197, 94, 0.5); | |
| animation: five-second 1s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .five:hover > div:nth-child(2) { | |
| animation-play-state: running; | |
| } | |
| .five span { | |
| grid-column: 1 / 4; | |
| grid-row: 1 / 2; | |
| justify-self: center; | |
| align-self: end; | |
| } | |
| /* Box Six */ | |
| .six { | |
| grid-template-columns: 1fr 1fr 1fr; | |
| grid-template-rows: 1fr 1fr 1fr; | |
| align-content: space-between; | |
| } | |
| .six div:nth-child(1) { | |
| height: 35px; | |
| width: 35px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: center; | |
| justify-self: start; | |
| position: relative; | |
| border: 4px solid $box-key; | |
| } | |
| .six div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 45px; | |
| width: 45px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-90deg, $red 0%, rgba(196, 49, 42, 0.3) 98%, $box-key 99%); | |
| border: 4px solid $box-key; | |
| z-index: -1; | |
| bottom: -9px; | |
| left: -9px; | |
| animation: six-first-before 0.5s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .six:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .six div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 55px; | |
| width: 55px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(25deg, $box-key, $red, $box-key, $red); | |
| z-index: -2; | |
| bottom: -10px; | |
| left: -10px; | |
| opacity: 0.7; | |
| animation: six-first-after 0.8s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .six:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .six div:nth-child(2) { | |
| height: 10px; | |
| width: 10px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: end; | |
| justify-self: end; | |
| margin-bottom: 18%; | |
| background-image: linear-gradient(30deg, $blue 0%, #9c8e9f 80%); | |
| } | |
| .six div:nth-child(3) { | |
| height: 20px; | |
| width: 20px; | |
| background-color: $green; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: end; | |
| justify-self: end; | |
| margin-right: 9%; | |
| margin-bottom: 4%; | |
| border: 1px solid $box-key; | |
| box-shadow: 0 0 5px rgba(156, 197, 94, 0.5); | |
| animation: six-third 0.8s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .six:hover > div:nth-child(3) { | |
| animation-play-state: running; | |
| } | |
| .six span { | |
| grid-column: 1 / 4; | |
| grid-row: 1 / 3; | |
| justify-self: end; | |
| align-self: start; | |
| transform: rotate(20deg); | |
| margin-top: 25%; | |
| margin-right: 5%; | |
| } | |
| /* Box Seven */ | |
| .seven { | |
| grid-template-columns: 1fr 1fr 1fr; | |
| grid-template-rows: 1fr 2fr 1fr; | |
| } | |
| .seven div:nth-child(1) { | |
| height: 9px; | |
| width: 9px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: center; | |
| justify-self: center; | |
| margin-right: 30%; | |
| margin-bottom: 40%; | |
| animation: seven-first 0.7s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .seven:hover > div:nth-child(1) { | |
| animation-play-state: running; | |
| } | |
| .seven div:nth-child(2) { | |
| height: 43px; | |
| width: 43px; | |
| background-color: $white; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: end; | |
| justify-self: center; | |
| margin-left: 15%; | |
| position: relative; | |
| border: 3px solid $box-key; | |
| animation: seven-second 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .seven:hover > div:nth-child(2) { | |
| animation-play-state: running; | |
| } | |
| .seven div:nth-child(2):before { | |
| content: '+'; | |
| position: absolute; | |
| font-family: 'Lato', sans-serif; | |
| color: $white; | |
| font-size: 190px; | |
| bottom: -14px; | |
| left: -33px; | |
| line-height: 0.5; | |
| z-index: -1; | |
| opacity: 0.7; | |
| animation: seven-second-before 0.5s ease-in-out infinite; | |
| animation-play-state: paused; | |
| animation-delay: 0.5s; | |
| } | |
| .seven:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .seven div:nth-child(2):after { | |
| content: '+'; | |
| position: absolute; | |
| font-family: 'Lato', sans-serif; | |
| color: $white; | |
| font-size: 160px; | |
| bottom: -13px; | |
| left: -20px; | |
| line-height: 0.5; | |
| z-index: -1; | |
| transform: rotate(45deg); | |
| opacity: 0.5; | |
| animation: seven-second-after 0.4s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .seven:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .seven .large-star span:nth-child(1) { | |
| height: 55px; | |
| width: 55px; | |
| background-color: #8ca074; | |
| border-radius: 50%; | |
| position: absolute; | |
| z-index: -5; | |
| bottom: -21px; | |
| left: -8px; | |
| border: 2px solid $box-key; | |
| animation: seven-star-span 0.7s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .seven:hover > .large-star span:nth-child(1) { | |
| animation-play-state: running; | |
| } | |
| .seven .large-star span:nth-child(2) { | |
| height: 65px; | |
| width: 65px; | |
| background-color: #713730; | |
| border-radius: 50%; | |
| position: absolute; | |
| z-index: -10; | |
| bottom: -24px; | |
| left: -11px; | |
| opacity: 0.5; | |
| animation: seven-star-span 0.3s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .seven:hover > .large-star span:nth-child(2) { | |
| animation-play-state: running; | |
| } | |
| .seven span { | |
| grid-column: 1 / 4; | |
| grid-row: 1 / 3; | |
| justify-self: center; | |
| align-self: center; | |
| margin-bottom: 30%; | |
| } | |
| /* Box Eight */ | |
| .eight { | |
| grid-template-columns: 1fr 0.7fr 1fr; | |
| grid-template-rows: 1fr 1fr 1fr; | |
| align-items: center; | |
| } | |
| .eight div:nth-child(1) { | |
| height: 15px; | |
| width: 15px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: start; | |
| position: relative; | |
| border: 1px solid $box-key; | |
| } | |
| .eight div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 21px; | |
| width: 21px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(160deg, $red, $box-key, $red); | |
| z-index: -1; | |
| bottom: -6px; | |
| left: -6px; | |
| border: 3px solid $box-key; | |
| opacity: 0.7; | |
| animation: eight-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eight:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .eight div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 28px; | |
| width: 28px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(175deg, $red 0%, $box-key 80%); | |
| z-index: -2; | |
| bottom: -7px; | |
| left: -7px; | |
| opacity: 0.5; | |
| animation: eight-first-after 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eight:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .eight div:nth-child(2) { | |
| height: 20px; | |
| width: 20px; | |
| background-color: $orange; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: center; | |
| margin-left: 40px; | |
| margin-bottom: 10px; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| } | |
| .eight div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 26px; | |
| width: 26px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(45deg, $orange 0%, $box-key 99%); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| border: 2px solid $box-key; | |
| animation: eight-second-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eight:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .eight div:nth-child(2):after { | |
| content: ''; | |
| position: absolute; | |
| height: 31px; | |
| width: 31px; | |
| border-radius: 50%; | |
| background-color: $orange; | |
| z-index: -2; | |
| bottom: -6px; | |
| left: -6px; | |
| opacity: 0.2; | |
| animation: eight-second-after 0.8s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eight:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .eight div:nth-child(3) { | |
| height: 8px; | |
| width: 8px; | |
| background-color: $yellow; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: end; | |
| margin-top: 15%; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| } | |
| .eight div:nth-child(3):before { | |
| content: ''; | |
| position: absolute; | |
| height: 14px; | |
| width: 14px; | |
| border-radius: 50%; | |
| background-color: $yellow; | |
| z-index: -1; | |
| bottom: -3px; | |
| left: -3px; | |
| opacity: 0.3; | |
| animation: eight-third-before 0.3s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eight:hover > div:nth-child(3):before { | |
| animation-play-state: running; | |
| } | |
| .eight span { | |
| grid-column: 1 / 4; | |
| grid-row: 3; | |
| justify-self: center; | |
| } | |
| /* Box Nine */ | |
| .nine { | |
| grid-template-columns: 1fr 0.45fr 1fr; | |
| grid-template-rows: 1fr 0.38fr 1fr; | |
| } | |
| .nine div:nth-child(1) { | |
| height: 20px; | |
| width: 20px; | |
| background-color: $green; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: start; | |
| justify-self: end; | |
| margin-left: 32px; | |
| margin-bottom: 29px; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| animation: nine-first 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .nine:hover > div:nth-child(1){ | |
| animation-play-state: running; | |
| } | |
| .nine div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 28px; | |
| width: 28px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-150deg, $green, $box-key); | |
| z-index: -1; | |
| bottom: -4px; | |
| left: -4px; | |
| opacity: 0.6; | |
| animation: nine-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .nine:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .nine div:nth-child(2) { | |
| height: 35px; | |
| width: 35px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| align-self: end; | |
| justify-self: start; | |
| position: relative; | |
| border: 3.5px solid $box-key; | |
| } | |
| .nine div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 46px; | |
| width: 46px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(50deg, rgba(196, 49, 42, 0.5), rgba(196, 49, 42, 0.04)); | |
| z-index: -2; | |
| bottom: -10px; | |
| left: -10px; | |
| border: 4px solid $box-key; | |
| animation: nine-second-before 0.3s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .nine:hover > div:nth-child(2):before{ | |
| animation-play-state: running; | |
| } | |
| .nine div:nth-child(2):after { | |
| content: ''; | |
| position: absolute; | |
| height: 56px; | |
| width: 56px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(75deg, $red, rgba(196, 49, 42, 0.1)); | |
| z-index: -3; | |
| bottom: -11px; | |
| left: -11px; | |
| opacity: 0.4; | |
| animation: nine-second-after 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .nine:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .nine span { | |
| grid-column: 1; | |
| grid-row: 1 / 4; | |
| writing-mode: vertical-rl; | |
| text-orientation: upright; | |
| letter-spacing: -33px; | |
| justify-self: center; | |
| align-self: start; | |
| margin-top: 10%; | |
| } | |
| /* Box Ten */ | |
| .ten { | |
| grid-template-columns: 1fr 0.30fr 1fr; | |
| grid-template-rows: 1fr 0.33fr 1fr; | |
| } | |
| .ten div:nth-child(1) { | |
| height: 29px; | |
| width: 29px; | |
| background-color: $orange; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: end; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| animation: ten-first 0.7s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .ten:hover > div:nth-child(1) { | |
| animation-play-state: running; | |
| } | |
| .ten div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 35px; | |
| width: 35px; | |
| border-radius: 50%; | |
| background-color: rgba(219, 154, 70, 0.2); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| border: 2px solid $box-key; | |
| animation: ten-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .ten:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .ten div:nth-child(1):after { | |
| content: ''; | |
| position: absolute; | |
| height: 41px; | |
| width: 41px; | |
| border-radius: 50%; | |
| background-color: $orange; | |
| z-index: -3; | |
| bottom: -6px; | |
| left: -6px; | |
| opacity: 0.2; | |
| animation: ten-first-after 0.6s ease-in-out infinite; | |
| animation-play-state: paused; | |
| animation-delay: 0.2s; | |
| } | |
| .ten:hover > div:nth-child(1):after { | |
| animation-play-state: running; | |
| } | |
| .ten div:nth-child(2) { | |
| height: 13px; | |
| width: 13px; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: start; | |
| align-self: end; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| } | |
| .ten div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 19px; | |
| width: 19px; | |
| border-radius: 50%; | |
| background-color: rgba(127, 191, 189, 0.2); | |
| z-index: -1; | |
| bottom: -5px; | |
| left: -5px; | |
| border: 2px solid $box-key; | |
| animation: ten-second-before 0.8s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .ten:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .ten div:nth-child(2):after { | |
| content: ''; | |
| position: absolute; | |
| height: 25px; | |
| width: 25px; | |
| border-radius: 50%; | |
| background-color: $blue; | |
| z-index: -3; | |
| bottom: -6px; | |
| left: -6px; | |
| opacity: 0.09; | |
| animation: ten-second-after 0.6s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .ten:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .ten span { | |
| grid-column: 1 / 3; | |
| grid-row: 1; | |
| transform: rotate(-20deg); | |
| align-self: center; | |
| justify-self: center; | |
| } | |
| /* Box Eleven */ | |
| .eleven { | |
| grid-template-columns: 1fr 0.47fr 1fr; | |
| grid-template-rows: 1fr 1fr 1fr; | |
| } | |
| .eleven div:nth-child(1) { | |
| height: 8px; | |
| width: 8px; | |
| background-color: $yellow; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: start; | |
| align-self: center; | |
| margin-bottom: 12px; | |
| animation: eleven-first 0.5s ease-in-out infinite; | |
| animation-play-state: paused; | |
| } | |
| .eleven:hover > div:nth-child(1) { | |
| animation-play-state: running; | |
| } | |
| .eleven div:nth-child(2) { | |
| height: 38px; | |
| width: 38px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: end; | |
| align-self: center; | |
| position: relative; | |
| border: 3px solid $box-key; | |
| animation: eleven-second 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eleven:hover > div:nth-child(2) { | |
| animation-play-state: running; | |
| } | |
| .eleven div:nth-child(2):before { | |
| content: '+'; | |
| position: absolute; | |
| font-family: 'Lato', sans-serif; | |
| color: $red; | |
| font-size: 155px; | |
| bottom: -11px; | |
| left: -26px; | |
| line-height: 0.5; | |
| z-index: -1; | |
| opacity: 0.7; | |
| animation: eleven-second-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| animation-delay: 0.5s; | |
| } | |
| .eleven:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .eleven div:nth-child(2):after { | |
| content: '+'; | |
| position: absolute; | |
| font-family: 'Lato', sans-serif; | |
| color: $red; | |
| font-size: 140px; | |
| bottom: -11px; | |
| left: -16px; | |
| line-height: 0.5; | |
| z-index: -1; | |
| transform: rotate(45deg); | |
| opacity: 0.7; | |
| animation: eleven-second-after 0.4s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eleven:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .eleven .large-star span:nth-child(1) { | |
| height: 50px; | |
| width: 50px; | |
| background-color: rgba(182, 163, 96, 0.4); | |
| border-radius: 50%; | |
| position: absolute; | |
| z-index: -5; | |
| bottom: -10px; | |
| left: -10px; | |
| border: 4px solid $box-key; | |
| animation: eleven-star-span 0.3s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eleven:hover > .large-star span:nth-child(1) { | |
| animation-play-state: running; | |
| } | |
| .eleven .large-star span:nth-child(2) { | |
| height: 64px; | |
| width: 64px; | |
| background-image: linear-gradient(-30deg, rgba(182, 163, 96, 0.08) 0%, $box-key 99%); | |
| border-radius: 50%; | |
| position: absolute; | |
| z-index: -10; | |
| bottom: -13px; | |
| left: -13px; | |
| animation: eleven-star-span 0.3s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .eleven:hover > .large-star span:nth-child(2) { | |
| animation-play-state: running; | |
| } | |
| .eleven span { | |
| grid-column: 1 / 4; | |
| grid-row: 3; | |
| justify-self: center; | |
| align-self: center; | |
| } | |
| /* Box Twelve */ | |
| .twelve { | |
| grid-template-columns: 1fr 0.38fr 1fr; | |
| grid-template-rows: 1fr 0.41fr 1fr | |
| } | |
| .twelve div:nth-child(1) { | |
| height: 20px; | |
| width: 20px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: start; | |
| align-self: start; | |
| position: relative; | |
| border: 2px solid $box-key; | |
| animation: twelve-first 0.8s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .twelve:hover > div:nth-child(1){ | |
| animation-play-state: running; | |
| } | |
| .twelve div:nth-child(1):before { | |
| content: ''; | |
| position: absolute; | |
| height: 26px; | |
| width: 26px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-40deg, $red, $box-key); | |
| border: 4px solid $box-key; | |
| z-index: -1; | |
| bottom: -7px; | |
| left: -7px; | |
| animation: twelve-first-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .twelve:hover > div:nth-child(1):before { | |
| animation-play-state: running; | |
| } | |
| .twelve div:nth-child(2) { | |
| height: 30px; | |
| width: 30px; | |
| background-color: $red; | |
| border-radius: 50%; | |
| grid-column: 2; | |
| grid-row: 2; | |
| justify-self: end; | |
| align-self: end; | |
| position: relative; | |
| border: 3px solid $box-key; | |
| } | |
| .twelve div:nth-child(2):before { | |
| content: ''; | |
| position: absolute; | |
| height: 38px; | |
| width: 38px; | |
| border-radius: 50%; | |
| background-image: linear-gradient(-40deg, $red 0%, $box-key 99%); | |
| border: 4px solid $box-key; | |
| z-index: -1; | |
| bottom: -8px; | |
| left: -8px; | |
| border: 4px solid $box-key; | |
| animation: twelve-second-before 0.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .twelve:hover > div:nth-child(2):before { | |
| animation-play-state: running; | |
| } | |
| .twelve div:nth-child(2):after { | |
| content: ''; | |
| position: absolute; | |
| height: 48px; | |
| width: 48px; | |
| border-radius: 50%; | |
| background-color: rgba(196, 49, 42, 0.25); | |
| border: 4px solid $box-key; | |
| z-index: -2; | |
| bottom: -13px; | |
| left: -13px; | |
| animation: twelve-second-after 0.6s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| .twelve:hover > div:nth-child(2):after { | |
| animation-play-state: running; | |
| } | |
| .twelve span { | |
| grid-column: 1 / 3; | |
| grid-row: 2 / 4; | |
| align-self: center; | |
| justify-self: center; | |
| } | |
| /* Bottom Description Key */ | |
| .key { | |
| grid-column: 1 / 4; | |
| color: $box-key; | |
| margin-left: 40px; | |
| } | |
| .key span { | |
| text-transform: uppercase; | |
| } | |
| .key p { | |
| margin-left: 80px; | |
| font-size: 16px; | |
| } | |
| .key p:nth-child(3) { | |
| font-size: 14px; | |
| } | |
| /* Hover and Animations */ | |
| .box:hover > span { | |
| display: grid; // Show name of stars | |
| } | |
| @keyframes star-name { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| /* Box One */ | |
| @keyframes one-first-before { | |
| 100% { | |
| background-image: linear-gradient(-90deg, $orange, $box-key, $orange, $box-key); | |
| } | |
| } | |
| @keyframes one-first-after { | |
| 100% { | |
| background-image: linear-gradient(0deg, $box-key, $orange, $box-key, $orange); | |
| opacity: 0.8; | |
| } | |
| } | |
| @keyframes one-second-before { | |
| 50% { | |
| opacity: 0.5; | |
| transform: rotate(30deg); | |
| } | |
| 100% { | |
| opacity: 0.8; | |
| transform: -30deg; | |
| } | |
| } | |
| /* Box Two */ | |
| @keyframes two-first-before { | |
| 100% { | |
| background-image: linear-gradient(125deg, $red, $box-key); | |
| } | |
| } | |
| @keyframes two-first-after { | |
| 50% { | |
| background-image: linear-gradient(-50deg, $red 0%, rgba(196, 49, 42, 0.3) 20%); | |
| } | |
| 100% { | |
| background-image: linear-gradient(50deg, $red 0%, rgba(196, 49, 42, 0.2) 20%); | |
| } | |
| } | |
| @keyframes two-second-before { | |
| 100% { | |
| background-image: linear-gradient(-90deg, $blue 0%, rgba(127, 191, 189, 0.2) 20% ); | |
| } | |
| } | |
| @keyframes two-second-after { | |
| 50% { | |
| background-image: linear-gradient(180deg, $blue, $box-key); | |
| opacity: 0.4; | |
| } | |
| 100% { | |
| background-image: linear-gradient(-80deg, $blue, $box-key, $blue); | |
| opacity: 0.3; | |
| } | |
| } | |
| /* Box Three */ | |
| @keyframes three-first-before { | |
| 100% { | |
| background-image: linear-gradient(-90deg, $blue 0%, rgba(127, 191, 189, 0.2) 20% ); | |
| } | |
| } | |
| @keyframes three-first-after { | |
| 100% { | |
| background-image: linear-gradient(-80deg, $blue, $box-key, $blue); | |
| opacity: 0.3; | |
| } | |
| } | |
| @keyframes three-second-before { | |
| 100% { | |
| background-image: linear-gradient(-130deg, $yellow 0%, $box-key 30%, rgba(232, 216, 84, 0.5) 90%); | |
| } | |
| } | |
| @keyframes three-second-after { | |
| 50% { | |
| background-image: linear-gradient(190deg, rgba(232, 216, 84, 0.2), $box-key, rgba(232, 216, 84, 0.1)); | |
| } | |
| 100% { | |
| background-image: linear-gradient(160deg, rgba(232, 216, 84, 0.1), $box-key, rgba(232, 216, 84, 0.2)); | |
| } | |
| } | |
| /* Box Four */ | |
| @keyframes four-first-before { | |
| 100% { | |
| background-image: linear-gradient(20deg, rgba(156, 197, 94, 0.7) 0%, $box-key 50%, rgba(156, 197, 94, 0.7) 75%, $box-key 90%); | |
| } | |
| } | |
| @keyframes four-first-after { | |
| 100% { | |
| background-image: linear-gradient(70deg, $green 0%, $box-key 70%); | |
| opacity: 0.4; | |
| } | |
| } | |
| @keyframes four-second-before { | |
| 50% { | |
| opacity: 0.2; | |
| height: 32px; | |
| width: 32px; | |
| bottom: -9px; | |
| left: -9px; | |
| } | |
| 100% { | |
| opacity: 0.1; | |
| box-shadow: 0 0 10px $blue; | |
| } | |
| } | |
| /* Box Five */ | |
| @keyframes five-first-before { | |
| 50% { | |
| opacity: 0.5; | |
| transform: rotate(30deg); | |
| } | |
| 100% { | |
| opacity: 0.8; | |
| transform: -30deg; | |
| } | |
| } | |
| @keyframes five-second { | |
| 50% { | |
| background-color: rgba(156, 197, 94, 0.9); | |
| box-shadow: 0 0 15px rgba(156, 197, 94, 0.7); | |
| } | |
| 100% { | |
| background-color: $green; | |
| box-shadow: 0 0 10px rgba(156, 197, 94, 0.6); | |
| } | |
| } | |
| /* Box Six */ | |
| @keyframes six-first-before { | |
| 100% { | |
| background-image: linear-gradient(-30deg, $red 0%, rgba(196, 49, 42, 0.3) 98%, $box-key 99%); | |
| } | |
| } | |
| @keyframes six-first-after { | |
| 100% { | |
| background-image: linear-gradient(-20deg, $box-key, $red, $box-key, $red); | |
| opacity: 0.5; | |
| } | |
| } | |
| @keyframes six-third { | |
| 50% { | |
| background-color: rgba(156, 197, 94, 0.9); | |
| box-shadow: 0 0 10px rgba(156, 197, 94, 0.7); | |
| } | |
| 100% { | |
| background-color: $green; | |
| box-shadow: 0 0 5px rgba(156, 197, 94, 0.6); | |
| } | |
| } | |
| /* Box Seven*/ | |
| @keyframes seven-first { | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| @keyframes seven-second { | |
| 50% { | |
| background-color: #dddddb; | |
| } | |
| } | |
| @keyframes seven-second-before { | |
| 50% { | |
| opacity: 0.6; | |
| } | |
| 100% { | |
| opacity: 0.9; | |
| } | |
| } | |
| @keyframes seven-second-after { | |
| 50% { | |
| opacity: 0.4; | |
| } | |
| 100% { | |
| opacity: 0.6; | |
| } | |
| } | |
| @keyframes seven-star-span { | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| /* Box Eight*/ | |
| @keyframes eight-first-before { | |
| 100% { | |
| background-image: linear-gradient(120deg, $red, $box-key, $red); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes eight-first-after { | |
| 100% { | |
| background-image: linear-gradient(200deg, $red 0%, $box-key 90%); | |
| opacity: 0.6; | |
| height: 30px; | |
| width: 30px; | |
| bottom: -8px; | |
| left: -8px; | |
| } | |
| } | |
| @keyframes eight-second-before { | |
| 100% { | |
| background-image: linear-gradient(0deg, $orange 0%, $box-key 99%); | |
| } | |
| } | |
| @keyframes eight-second-after { | |
| 50% { | |
| box-shadow: 0 0 5px $orange; | |
| } | |
| 100% { | |
| background-color: $orange; | |
| opacity: 0.5; | |
| } | |
| } | |
| @keyframes eight-third-before { | |
| 100% { | |
| opacity: 0.5; | |
| } | |
| } | |
| /* Box Nine*/ | |
| @keyframes nine-first { | |
| 50% { | |
| background-color: #8bb252; | |
| } | |
| } | |
| @keyframes nine-first-before { | |
| 100% { | |
| background-image: linear-gradient(-120deg, $green, $box-key); | |
| opacity: 0.7; | |
| } | |
| } | |
| @keyframes nine-second-before { | |
| 100% { | |
| background-image: linear-gradient(-10deg, rgba(196, 49, 42, 0.5), rgba(196, 49, 42, 0.05)); | |
| } | |
| } | |
| @keyframes nine-second-after { | |
| 50% { | |
| background-image: linear-gradient(90deg, $red, rgba(196, 49, 42, 0.5)); | |
| opacity: 0.6; | |
| } | |
| } | |
| /* Box Ten*/ | |
| @keyframes ten-first { | |
| 50% { | |
| background-color: #ce9b58; | |
| } | |
| } | |
| @keyframes ten-first-before { | |
| 50% { | |
| background-color: rgba(219, 154, 70, 0.6); | |
| } | |
| } | |
| @keyframes ten-first-after { | |
| 50% { | |
| opacity: 0.4; | |
| box-shadow: 0 0 2px #8e6836; | |
| } | |
| } | |
| @keyframes ten-second-before { | |
| 50% { | |
| background-color: rgba(127, 191, 189, 0.7); | |
| } | |
| } | |
| @keyframes ten-second-after { | |
| 50% { | |
| opacity: 0.4; | |
| box-shadow: 0 0 3px $blue; | |
| } | |
| } | |
| /* Box Eleven*/ | |
| @keyframes eleven-first { | |
| 50% { | |
| opacity: 0.8; | |
| } | |
| } | |
| @keyframes eleven-second { | |
| 50% { | |
| background-color: #b7312c; | |
| } | |
| } | |
| @keyframes eleven-second-before { | |
| 50% { | |
| opacity: 0.6; | |
| } | |
| 100% { | |
| opacity: 0.9; | |
| } | |
| } | |
| @keyframes eleven-second-after { | |
| 50% { | |
| opacity: 0.4; | |
| } | |
| 100% { | |
| opacity: 0.6; | |
| } | |
| } | |
| @keyframes eleven-star-span { | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| /* Box Twelve*/ | |
| @keyframes twelve-first { | |
| 50% { | |
| background-color: #b7312c; | |
| } | |
| } | |
| @keyframes twelve-first-before { | |
| 50% { | |
| background-image: linear-gradient(-70deg, $red, $box-key); | |
| height: 27px; | |
| width: 27px; | |
| left: -9px; | |
| } | |
| } | |
| @keyframes twelve-second-before { | |
| 50% { | |
| background-image: linear-gradient(0deg, $red 0%, $box-key 99%); | |
| } | |
| } | |
| @keyframes twelve-second-after { | |
| 50% { | |
| background-color: rgba(196, 49, 42, 0.6); | |
| } | |
| } |