├── CNAME ├── fav.png ├── css-games.jpg ├── maze ├── maze.webp ├── index.html ├── style.css └── style.sass ├── puzzle ├── fav.png ├── puzzle.png ├── index.pug ├── style.sass ├── index.html └── style.css ├── twitter-24.png ├── puzzle-v2 ├── fav.png ├── puzzle.png ├── index.pug ├── index.html ├── style.sass └── style.css ├── gem-catcher ├── fav.png ├── gem-catcher.png ├── index.html └── style.css ├── coin-collector ├── fav.png ├── coin-collector.png ├── index.html ├── style.sass └── style.css ├── click-the-circles ├── fav.png ├── circles.mp3 ├── click-the-circles.png ├── index.pug ├── index.html └── style.sass ├── super-css-mario ├── mario.png ├── index.html ├── style.sass └── style.css ├── super-css-mario-2 ├── mario.png ├── index.html ├── style.sass └── style.css ├── kill-internet-explorer ├── fav.png ├── kill-IE.png ├── index.pug └── index.html ├── README.md ├── .github └── FUNDING.yml ├── LICENSE ├── style.css └── index.html /CNAME: -------------------------------------------------------------------------------- 1 | css-games.com -------------------------------------------------------------------------------- /fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/fav.png -------------------------------------------------------------------------------- /css-games.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/css-games.jpg -------------------------------------------------------------------------------- /maze/maze.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/maze/maze.webp -------------------------------------------------------------------------------- /puzzle/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/puzzle/fav.png -------------------------------------------------------------------------------- /twitter-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/twitter-24.png -------------------------------------------------------------------------------- /puzzle-v2/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/puzzle-v2/fav.png -------------------------------------------------------------------------------- /puzzle/puzzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/puzzle/puzzle.png -------------------------------------------------------------------------------- /gem-catcher/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/gem-catcher/fav.png -------------------------------------------------------------------------------- /puzzle-v2/puzzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/puzzle-v2/puzzle.png -------------------------------------------------------------------------------- /coin-collector/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/coin-collector/fav.png -------------------------------------------------------------------------------- /click-the-circles/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/click-the-circles/fav.png -------------------------------------------------------------------------------- /super-css-mario/mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/super-css-mario/mario.png -------------------------------------------------------------------------------- /gem-catcher/gem-catcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/gem-catcher/gem-catcher.png -------------------------------------------------------------------------------- /super-css-mario-2/mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/super-css-mario-2/mario.png -------------------------------------------------------------------------------- /click-the-circles/circles.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/click-the-circles/circles.mp3 -------------------------------------------------------------------------------- /kill-internet-explorer/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/kill-internet-explorer/fav.png -------------------------------------------------------------------------------- /coin-collector/coin-collector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/coin-collector/coin-collector.png -------------------------------------------------------------------------------- /kill-internet-explorer/kill-IE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/kill-internet-explorer/kill-IE.png -------------------------------------------------------------------------------- /click-the-circles/click-the-circles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Afif13/CSS-Games/HEAD/click-the-circles/click-the-circles.png -------------------------------------------------------------------------------- /kill-internet-explorer/index.pug: -------------------------------------------------------------------------------- 1 | - for(let i = 0; i < 20; i++) 2 | c 3 | e 4 | 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | CSS Pattern 2 | -------------------------------------------------------------------------------- /click-the-circles/index.pug: -------------------------------------------------------------------------------- 1 | audio(controls)(preload="")(src="https://assets.codepen.io/1480814/circles.mp3") 2 | h2 Click play to start 3 | s 4 | l 5 | cc 6 | - for(let i = 0; i < 220; i++) 7 | c 8 | r -------------------------------------------------------------------------------- /puzzle/index.pug: -------------------------------------------------------------------------------- 1 | - let n = 4; /* number of columns/rows, don't forget to adjust the CSS value */ 2 | - let image = "https://picsum.photos/id/1015/800/800"; 3 | 4 | h1 CSS Puzzle 5 | p drag & drop the piece into...
Well, you know how a puzzle works :) 6 | g(style=`--i:url(${image})`) 7 | - for(let i = 0; i < n*n; i++) 8 | z 9 | a 10 | b(draggable="true") -------------------------------------------------------------------------------- /puzzle-v2/index.pug: -------------------------------------------------------------------------------- 1 | - let n = 5; /* number of columns/rows, don't forget to adjust the CSS value */ 2 | - let image = "https://picsum.photos/id/1059/800/800"; 3 | 4 | h1 CSS Puzzle 5 | p drag & drop the piece into...
Well, you know how a puzzle works :) 6 | g(style=`--i:url(${image})`) 7 | - for(let i = 0; i < n*n; i++) 8 | z 9 | a 10 | b(draggable="true") -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: temani 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Temani Afif 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /maze/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Grab the Dino (a Maze game) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | -------------------------------------------------------------------------------- /puzzle/style.sass: -------------------------------------------------------------------------------- 1 | $n : 4; /* number of columns/rows, don't forget to adjust the HTML value */ 2 | 3 | g { 4 | --s: 300px; /* size of the puzzle */ 5 | display: grid; 6 | max-width: var(--s); 7 | border: 1px solid; 8 | margin: auto; 9 | grid-template-columns: repeat($n,1fr); 10 | } 11 | g:before { 12 | content: "Original Image"; 13 | color: #fff; 14 | font-size: 25px; 15 | font-weight: bold; 16 | text-shadow: 0 0 2px #000,0 0 2px #000,0 0 2px #000; 17 | position: fixed; 18 | top: 10px; 19 | left: 10px; 20 | width: calc(var(--s)*0.6); 21 | aspect-ratio: 1; 22 | -webkit-mask: repeating-linear-gradient(-45deg,#000 0 10%,#000d 0 20%); 23 | background: var(--i) 0/100% 100%; 24 | display: grid; 25 | place-content: center; 26 | } 27 | z { 28 | aspect-ratio: 1; 29 | outline: 1px dashed; 30 | display: grid; 31 | position: relative; 32 | pointer-events: none; 33 | } 34 | a { 35 | width: 0; 36 | transition: 0s .2s; 37 | pointer-events: initial; 38 | } 39 | b { 40 | position: absolute; 41 | inset: 0; 42 | background: var(--i) 0/var(--s) var(--s); 43 | box-shadow: 0 0 4px 1px red; 44 | z-index: 2; 45 | cursor: grab; 46 | pointer-events: initial; 47 | } 48 | @for $i from 1 to ($n*$n + 1) { 49 | $r: (random(180)); 50 | $x: (($i - 1)%$n); 51 | $y: floor(($i - 0.001)/$n); 52 | z:nth-of-type(#{$i}) b{ 53 | background-position: ($x/($n - 1))*100% ($y/($n - 1))*100%; 54 | transform: 55 | translate((($n - 1)/2 - $x)*100%,(($n - 1)/2 - $y)*100%) 56 | rotate($r*1deg) 57 | translate((random(100)*1% + ($n - 1)*100%)) 58 | rotate((random(20) - 10 - $r)*1deg) 59 | } 60 | } 61 | z b { 62 | transition: 9999s 9999s; 63 | } 64 | z:active a{ 65 | width: 100%; 66 | transition: 0s; 67 | } 68 | z a:hover ~ b { 69 | transform: translate(0); 70 | box-shadow: none; 71 | transition: 0s; 72 | } 73 | 74 | body { 75 | background: #2c6603; 76 | color: #fff; 77 | font-family: system-ui, sans-serif; 78 | } 79 | h1 { 80 | font-size: 2rem; 81 | margin: 0; 82 | text-align: center; 83 | } 84 | p { 85 | font-size: 1.2rem; 86 | text-align: center; 87 | } -------------------------------------------------------------------------------- /super-css-mario/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Super CSS Mario 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | -------------------------------------------------------------------------------- /super-css-mario-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Super CSS Mario II 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | -------------------------------------------------------------------------------- /gem-catcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Gem Catcher 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 |
36 |

Gem Catcher

37 |

Grab the Gem without touching the walls!

38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /kill-internet-explorer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Kill Internet Explorer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /puzzle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Puzzle 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 |
36 |

CSS Puzzle

37 |

drag & drop the piece into...
Well, you know how a puzzle works :)

38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /coin-collector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Coin Collector 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 34 | 35 | 36 | 37 |
38 |

Coin Collector

39 |

Collect the coins and don't touch the walls!

40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --pico-font-size: 17px; 3 | } 4 | html { 5 | display: grid; 6 | height: 100%; 7 | grid-template-rows: 100%; 8 | } 9 | body { 10 | display: inherit; 11 | grid-template-rows: auto auto 1fr auto; 12 | } 13 | h1 { 14 | font-style: normal; 15 | font-weight: 700; 16 | font-size: 50px; 17 | font-family: 'Montserrat', sans-serif; 18 | line-height: 56px; 19 | text-transform: none; 20 | letter-spacing: -2px; 21 | color: #505050; 22 | white-space: nowrap; 23 | } 24 | @media only screen and (prefers-color-scheme: dark) { 25 | h1 { 26 | color:#fff; 27 | } 28 | } 29 | h1 span { 30 | font-size: 70px; 31 | vertical-align: middle; 32 | } 33 | h1 span:first-child { 34 | letter-spacing: -14px; 35 | } 36 | h1 span:nth-child(2) { 37 | position: relative; 38 | letter-spacing: -15px; 39 | z-index: 1; 40 | } 41 | h1 span:nth-child(3) { 42 | color: #c39f76; 43 | filter: blur(2px); 44 | } 45 | h1 span:nth-child(2):before { 46 | content: ""; 47 | position: absolute; 48 | top: 10px; 49 | height: 28px; 50 | border-left: 1.5px solid var(--pico-background-color); 51 | border-top: 1.5px solid var(--pico-background-color); 52 | width: 44px; 53 | left: 2px; 54 | border-top-left-radius: 41px 24px; 55 | } 56 | h1 span:nth-child(2):after { 57 | content: ""; 58 | position: absolute; 59 | bottom: 0; 60 | left: 4.5px; 61 | height: 37px; 62 | border-left: 1.5px solid var(--pico-background-color); 63 | z-index: 5; 64 | } 65 | body header h1 + p { 66 | text-indent: 130px; 67 | margin-top: -22px; 68 | font-size: 15px; 69 | } 70 | 71 | body>header, body>main { 72 | padding: 0; 73 | } 74 | body header, 75 | body footer { 76 | text-align: center; 77 | margin-bottom: 5px; 78 | } 79 | body main.grid { 80 | margin: 0 auto 50px; 81 | grid-gap: calc(1.5*var(--pico-grid-column-gap)); 82 | align-content: start; 83 | max-width: 1200px; 84 | } 85 | @media (min-width: 768px) { 86 | .grid { 87 | grid-template-columns: repeat(3,minmax(0%,1fr)); 88 | } 89 | } 90 | body header > * { 91 | margin: 5px; 92 | } 93 | article { 94 | aspect-ratio: 2; 95 | position: relative; 96 | background: center/cover no-repeat; 97 | margin: 0; 98 | overflow: hidden; 99 | } 100 | article a { 101 | position: absolute; 102 | inset: 0; 103 | display: flex; 104 | align-items: flex-end; 105 | padding: 10px 20px; 106 | font-size: 20px; 107 | text-decoration: none; 108 | background: linear-gradient(0deg,#fffd 2.5em,#0000 0); 109 | font-weight: bold; 110 | } 111 | .chrome:before { 112 | content: "Chrome Only"; 113 | position: absolute; 114 | inset: 0 0 auto auto; 115 | transform-origin: 0 0; 116 | transform: translate(29.3%) rotate(45deg); 117 | background: #08769b; 118 | border-image:conic-gradient(#08769b 0 0) fill 0//0 100vw; 119 | color: #fff; 120 | font-size: 13px; 121 | } 122 | -------------------------------------------------------------------------------- /puzzle-v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Puzzle V2 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 |
36 |

CSS Puzzle

37 |

drag & drop the piece into...
Well, you know how a puzzle works :)

38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Play Fun games into your browser 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 35 | 36 | 37 |
38 |

CSS Games

39 |

CSS and nothing more

40 |
41 | 42 |
43 |
44 |
Coin Collector
45 |
Gem Catcher
46 |
Kill Internet Explorer
47 |
Click The Circles
48 |
Puzzle
49 |
Puzzle V2
50 |
Super CSS Mario
51 |
Super CSS Mario II
52 |
CSS-only Maze
53 |
54 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /puzzle/style.css: -------------------------------------------------------------------------------- 1 | g { 2 | --s: 300px; 3 | /* size of the puzzle */ 4 | display: grid; 5 | max-width: var(--s); 6 | border: 1px solid; 7 | margin: auto; 8 | grid-template-columns: repeat(4, 1fr); 9 | } 10 | 11 | g:before { 12 | content: "Original Image"; 13 | color: #fff; 14 | font-size: 25px; 15 | font-weight: bold; 16 | text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; 17 | position: fixed; 18 | top: 10px; 19 | left: 10px; 20 | width: calc(var(--s)*0.6); 21 | aspect-ratio: 1; 22 | -webkit-mask: repeating-linear-gradient(-45deg, #000 0 10%, #000d 0 20%); 23 | background: var(--i) 0/100% 100%; 24 | display: grid; 25 | place-content: center; 26 | } 27 | 28 | z { 29 | aspect-ratio: 1; 30 | outline: 1px dashed; 31 | display: grid; 32 | position: relative; 33 | pointer-events: none; 34 | } 35 | 36 | a { 37 | width: 0; 38 | transition: 0s 0.2s; 39 | pointer-events: initial; 40 | } 41 | 42 | b { 43 | position: absolute; 44 | inset: 0; 45 | background: var(--i) 0/var(--s) var(--s); 46 | box-shadow: 0 0 4px 1px red; 47 | z-index: 2; 48 | cursor: grab; 49 | pointer-events: initial; 50 | } 51 | 52 | z:nth-of-type(1) b { 53 | background-position: 0% 0%; 54 | transform: translate(150%, 150%) rotate(68deg) translate(355%) rotate(-69deg); 55 | } 56 | 57 | z:nth-of-type(2) b { 58 | background-position: 33.3333333333% 0%; 59 | transform: translate(50%, 150%) rotate(92deg) translate(327%) rotate(-83deg); 60 | } 61 | 62 | z:nth-of-type(3) b { 63 | background-position: 66.6666666667% 0%; 64 | transform: translate(-50%, 150%) rotate(95deg) translate(396%) rotate(-100deg); 65 | } 66 | 67 | z:nth-of-type(4) b { 68 | background-position: 100% 0%; 69 | transform: translate(-150%, 150%) rotate(119deg) translate(387%) rotate(-118deg); 70 | } 71 | 72 | z:nth-of-type(5) b { 73 | background-position: 0% 33.3333333333%; 74 | transform: translate(150%, 50%) rotate(140deg) translate(310%) rotate(-146deg); 75 | } 76 | 77 | z:nth-of-type(6) b { 78 | background-position: 33.3333333333% 33.3333333333%; 79 | transform: translate(50%, 50%) rotate(107deg) translate(331%) rotate(-102deg); 80 | } 81 | 82 | z:nth-of-type(7) b { 83 | background-position: 66.6666666667% 33.3333333333%; 84 | transform: translate(-50%, 50%) rotate(177deg) translate(339%) rotate(-172deg); 85 | } 86 | 87 | z:nth-of-type(8) b { 88 | background-position: 100% 33.3333333333%; 89 | transform: translate(-150%, 50%) rotate(71deg) translate(348%) rotate(-61deg); 90 | } 91 | 92 | z:nth-of-type(9) b { 93 | background-position: 0% 66.6666666667%; 94 | transform: translate(150%, -50%) rotate(98deg) translate(317%) rotate(-94deg); 95 | } 96 | 97 | z:nth-of-type(10) b { 98 | background-position: 33.3333333333% 66.6666666667%; 99 | transform: translate(50%, -50%) rotate(103deg) translate(308%) rotate(-100deg); 100 | } 101 | 102 | z:nth-of-type(11) b { 103 | background-position: 66.6666666667% 66.6666666667%; 104 | transform: translate(-50%, -50%) rotate(128deg) translate(350%) rotate(-118deg); 105 | } 106 | 107 | z:nth-of-type(12) b { 108 | background-position: 100% 66.6666666667%; 109 | transform: translate(-150%, -50%) rotate(15deg) translate(356%) rotate(-10deg); 110 | } 111 | 112 | z:nth-of-type(13) b { 113 | background-position: 0% 100%; 114 | transform: translate(150%, -150%) rotate(140deg) translate(390%) rotate(-148deg); 115 | } 116 | 117 | z:nth-of-type(14) b { 118 | background-position: 33.3333333333% 100%; 119 | transform: translate(50%, -150%) rotate(119deg) translate(400%) rotate(-124deg); 120 | } 121 | 122 | z:nth-of-type(15) b { 123 | background-position: 66.6666666667% 100%; 124 | transform: translate(-50%, -150%) rotate(121deg) translate(370%) rotate(-115deg); 125 | } 126 | 127 | z:nth-of-type(16) b { 128 | background-position: 100% 100%; 129 | transform: translate(-150%, -150%) rotate(61deg) translate(331%) rotate(-60deg); 130 | } 131 | 132 | z b { 133 | transition: 9999s 9999s; 134 | } 135 | 136 | z:active a { 137 | width: 100%; 138 | transition: 0s; 139 | } 140 | 141 | z a:hover ~ b { 142 | transform: translate(0); 143 | box-shadow: none; 144 | transition: 0s; 145 | } 146 | 147 | body { 148 | background: #2c6603; 149 | color: #fff; 150 | font-family: system-ui, sans-serif; 151 | } 152 | 153 | h1 { 154 | font-size: 2rem; 155 | margin: 0; 156 | text-align: center; 157 | } 158 | 159 | p { 160 | font-size: 1.2rem; 161 | text-align: center; 162 | } 163 | [data-ea-publisher] { 164 | position: absolute; 165 | top: 0; 166 | right: 0; 167 | z-index: 999; 168 | } 169 | [data-ea-publisher].loaded .ea-content, 170 | [data-ea-type].loaded .ea-content { 171 | background: rgb(255 255 255 / 80%)!important; 172 | } 173 | @media (max-width: 1024px) { 174 | [data-ea-publisher] { 175 | display: none!important; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /click-the-circles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Games: Click the Circles 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 | 36 |

Click play to start

37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /puzzle-v2/style.sass: -------------------------------------------------------------------------------- 1 | $n : 5; /* number of columns/rows, don't forget to adjust the HTML value */ 2 | 3 | g { 4 | --s: 70px; /* size of the puzzle */ 5 | --r: 12px; 6 | display: grid; 7 | width: fit-content; 8 | border: 1px solid; 9 | margin: auto; 10 | grid: auto-flow var(--s)/repeat($n,var(--s)); 11 | } 12 | g:before { 13 | content: "Original Image"; 14 | color: #fff; 15 | font-size: 25px; 16 | font-weight: bold; 17 | text-shadow: 0 0 2px #000,0 0 2px #000,0 0 2px #000; 18 | position: fixed; 19 | top: 10px; 20 | left: 10px; 21 | width: calc(#{$n}*var(--s)*0.6); 22 | aspect-ratio: 1; 23 | -webkit-mask: repeating-linear-gradient(-45deg,#000 0 10%,#000d 0 20%); 24 | background: var(--i) 0/100% 100%; 25 | display: grid; 26 | place-content: center; 27 | } 28 | z { 29 | display: grid; 30 | position: relative; 31 | pointer-events: none; 32 | outline: 1px dashed; 33 | } 34 | a { 35 | grid-area: 1/1; 36 | width: 0; 37 | transition: 0s .2s; 38 | pointer-events: initial; 39 | } 40 | b { 41 | grid-area: 1/1; 42 | z-index: 2; 43 | display: grid; 44 | filter: drop-shadow(0 0 2px red) drop-shadow(0 0 2px red); 45 | cursor: grab; 46 | pointer-events: initial; 47 | height: calc(100% + var(--r)); 48 | width: calc(100% + var(--r)); 49 | place-self: start end; 50 | --m: 51 | radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0/100% var(--r) no-repeat, 52 | radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#000) var(--r) 50%/100% calc(100% - 2*var(--r)) no-repeat, 53 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 54 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000); 55 | } 56 | b:before { 57 | content: ""; 58 | background: var(--i) 0/calc(#{$n}*var(--s)) calc(#{$n}*var(--s)); 59 | -webkit-mask: var(--m); 60 | mask: var(--m); 61 | } 62 | 63 | z:first-child b{ 64 | height: calc(100% + var(--r)); 65 | width: 100%; 66 | --m: 67 | radial-gradient(var(--r) at 100% calc(50% + var(--r)/2),#0000 98%,#000) 68 | 0 calc(-1*var(--r)) no-repeat, 69 | radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 98%,#0000) 70 | } 71 | z:nth-child(-n + #{$n - 1}):not(:first-child) b{ 72 | place-self: start end; 73 | height: calc(100% + var(--r)); 74 | width: calc(100% + var(--r)); 75 | --m: 76 | radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% + var(--r)/2),#0000 98%,#000) 77 | var(--r) calc(-1*var(--r)) no-repeat, 78 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 79 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) 80 | } 81 | z:nth-child(#{$n}) b{ 82 | place-self: start end; 83 | height: calc(100% + var(--r)); 84 | width: calc(100% + var(--r)); 85 | --m: 86 | linear-gradient(#000 0 0) var(--r) calc(-1*var(--r)) no-repeat, 87 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 88 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) 89 | } 90 | z:nth-child(#{$n}n + 1):not(:first-child):not(:nth-last-child(#{$n})) b{ 91 | height: calc(100% + var(--r)); 92 | width: 100%; 93 | --m: 94 | radial-gradient(var(--r) at 100% calc(50% - var(--r)/2),#0000 98%,#000) 50%/ 100% calc(100% - 2*var(--r)) no-repeat, 95 | radial-gradient(var(--r) at 50% 0,#0000 98%,#000) 0 0/ 100% var(--r) no-repeat, 96 | radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 98%,#0000) 97 | } 98 | z:nth-last-child(#{$n}) b{ 99 | height: 100%; 100 | width: 100%; 101 | --m: 102 | radial-gradient(var(--r) at 100% calc(50% - var(--r)),#0000 98%,#000) 0 var(--r) no-repeat, 103 | radial-gradient(var(--r) at 50% 0,#0000 98%,#000) 0 0/ 100% var(--r) no-repeat; 104 | } 105 | z:nth-child(#{$n}n):not(:nth-child(#{$n})):not(:last-child) b{ 106 | place-self: start end; 107 | height: calc(100% + var(--r)); 108 | width: calc(100% + var(--r)); 109 | --m: 110 | radial-gradient(var(--r) at calc(50% - var(--r)/2) var(--r),#0000 98%,#000) var(--r) calc(-1*var(--r)) no-repeat, 111 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 112 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) 113 | } 114 | z:last-child b{ 115 | place-self: end; 116 | height: 100%; 117 | width: calc(100% + var(--r)); 118 | --m: 119 | radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0 no-repeat, 120 | radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000) 121 | } 122 | z:nth-last-child(-n + #{$n - 1}):not(:last-child) b{ 123 | place-self: end; 124 | height: 100%; 125 | width: calc(100% + var(--r)); 126 | --m: 127 | radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0/100% var(--r) no-repeat, 128 | radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#000) var(--r) 100%/100% calc(100% - var(--r)) no-repeat, 129 | radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000) 130 | } 131 | 132 | @for $i from 1 to ($n*$n + 1) { 133 | $r: (random(180)); 134 | $x: (($i - 1)%$n); 135 | $y: floor(($i - 0.001)/$n); 136 | z:nth-of-type(#{$i}) b{ 137 | transform: 138 | translate((($n - 1)/2 - $x)*100%,(($n - 1)/2 - $y)*100%) 139 | rotate($r*1deg) 140 | translate((random(70)*1% + ($n - 1)*100%)) 141 | rotate((random(20) - 10 - $r)*1deg) 142 | } 143 | z:nth-of-type(#{$i}) b:before{ 144 | background-position: ($x/($n - 1))*100% ($y/($n - 1))*100%; 145 | } 146 | } 147 | z b { 148 | transition: 9999s 9999s; 149 | } 150 | z:active a{ 151 | width: 100%; 152 | transition: 0s; 153 | } 154 | z a:hover ~ b { 155 | transform: translate(0); 156 | filter: none; 157 | transition: 0s; 158 | } 159 | 160 | body { 161 | background: #547980; 162 | color: #fff; 163 | font-family: system-ui, sans-serif; 164 | } 165 | h1 { 166 | font-size: 2rem; 167 | margin: 0; 168 | text-align: center; 169 | } 170 | p { 171 | font-size: .8rem; 172 | text-align: center; 173 | } -------------------------------------------------------------------------------- /maze/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* control the size */ 3 | /* If the movement is off you have to update the below variable 4 | go here and follow the steps: https://codepen.io/t_afif/pen/ZENaPPG/bdd15282dc854a3e77d6e40232ee5787 5 | You need to perform a scroll with one keypress 6 | to get the amount of pixel you need to move by 7 | */ 8 | /* don't touch this. The game is static not dynamic */ 9 | @property --s1 { 10 | syntax: ""; 11 | inherits: true; 12 | initial-value: 0; 13 | } 14 | @property --x { 15 | syntax: ""; 16 | inherits: true; 17 | initial-value: 0; 18 | } 19 | @property --y { 20 | syntax: ""; 21 | inherits: true; 22 | initial-value: 0; 23 | } 24 | b { 25 | display: block; 26 | width: 600px; 27 | height: 300px; 28 | position: sticky; 29 | left: 0; 30 | top: 0; 31 | --g:conic-gradient(var(--b) 0 0) no-repeat; 32 | background: conic-gradient(from 90deg at 1px 1px, #0000 25%, var(--c1) 0) -1px -1px/calc((100% + 1px)/10) calc((100% + 1px)/5), url(https://assets.codepen.io/1480814/dii.png) no-repeat calc(100% - 6px) calc(100% - 6px)/auto 48px, var(--g) 0 0/120px 60px, var(--g) 60px 180px/180px 60px, var(--g) 180px 120px/180px 60px, var(--g) 300px 60px/180px 60px, var(--g) 300px 240px/180px 60px, var(--g) 420px 180px/180px 60px, var(--g) 60px 0/60px 240px, var(--g) 300px 60px/60px 240px, var(--g) 540px 0/60px 300px, var(--g) 420px 0/60px 300px, var(--g) 420px 0/180px 60px, url(https://assets.codepen.io/1480814/w.jpg) 0 0/60px 60px; 33 | animation: x linear, y linear; 34 | animation-timeline: scroll(nearest inline), scroll(nearest block); 35 | container-name: b; 36 | } 37 | 38 | @keyframes x { 39 | to { 40 | --x: 9; 41 | } 42 | } 43 | @keyframes y { 44 | to { 45 | --y: 4; 46 | } 47 | } 48 | m { 49 | content: ""; 50 | position: absolute; 51 | translate: calc(var(--x)*100%) calc(var(--y)*100%); 52 | width: 60px; 53 | aspect-ratio: 1; 54 | opacity: 0; 55 | background: url(https://assets.codepen.io/1480814/ad.png) center/cover; 56 | } 57 | 58 | b:after { 59 | content: "TIME - " counter(s1, decimal-leading-zero) "s"; 60 | white-space: pre-wrap; 61 | color: #fefeff; 62 | font-size: 35px; 63 | visibility: hidden; 64 | font-variant-numeric: tabular-nums; 65 | counter-reset: s1 var(--s1); 66 | position: absolute; 67 | left: 0; 68 | right: 0; 69 | bottom: -60px; 70 | text-align: center; 71 | padding: 8px; 72 | z-index: 99989; 73 | animation: f 0.1s linear forwards paused, s1 60s linear forwards paused; 74 | } 75 | @container style(--x: 9) and style(--y: 4) { 76 | b:after { 77 | animation-play-state: running, paused !important; 78 | --_c: "\a Congratulations!\a \aYou did it in " counter(s1,decimal-leading-zero) "s"; 79 | } 80 | } 81 | @container (style(--x: 0) and (style(--y: 1) or style(--y: 2) or style(--y: 3) or style(--y: 4))) 82 | or (style(--x: 1) and (style(--y: 4))) 83 | or (style(--x: 2) and (style(--y: 0) or style(--y: 1) or style(--y: 2) or style(--y: 4))) 84 | or (style(--x: 3) and (style(--y: 0) or style(--y: 1) or style(--y: 4))) 85 | or (style(--x: 4) and (style(--y: 0) or style(--y: 1) or style(--y: 3) or style(--y: 4))) 86 | or (style(--x: 5) and (style(--y: 0))) 87 | or (style(--x: 6) and (style(--y: 0) or style(--y: 2) or style(--y: 3))) 88 | or (style(--x: 8) and (style(--y: 1) or style(--y: 2) or style(--y: 4))) { 89 | b:after { 90 | animation-play-state: running, paused !important; 91 | } 92 | } 93 | 94 | @keyframes f { 95 | 1%, to { 96 | content: var(--_c, "\aGame Over\a\aRefresh the page\a and try again "); 97 | font-size: 50px; 98 | background: var(--b); 99 | inset: 0 0 -60px; 100 | } 101 | } 102 | @keyframes s1 { 103 | to { 104 | --s1:60; 105 | } 106 | } 107 | g { 108 | display: block; 109 | width: 960px; 110 | height: 520px; 111 | } 112 | 113 | body { 114 | position: relative; 115 | margin: auto auto 70px; 116 | overflow: auto; 117 | scrollbar-width: none; 118 | width: 600px; 119 | height: 360px; 120 | border: 5px solid var(--c1); 121 | background: var(--c1); 122 | cursor: pointer; 123 | } 124 | 125 | b:before { 126 | content: "Grab the dino without\atouching the wall\a\aUse your keyboard to move\a\a\a🖱️Click to start"; 127 | font-size: 30px; 128 | white-space: pre; 129 | text-align: center; 130 | position: absolute; 131 | inset: 0 0 -60px; 132 | padding-top: 20px; 133 | pointer-events: none; 134 | z-index: 5896; 135 | color: #fefeff; 136 | background: url(https://assets.codepen.io/1480814/ad.png) bottom/90px auto no-repeat, url(https://assets.codepen.io/1480814/k.png) 50% 55%/90px auto no-repeat var(--b); 137 | } 138 | 139 | body:focus-within { 140 | cursor: none; 141 | } 142 | 143 | body:focus-within b:before { 144 | opacity: 0; 145 | } 146 | 147 | body:focus-within m { 148 | opacity: 1; 149 | } 150 | 151 | body:focus-within b:after { 152 | visibility: visible; 153 | animation-play-state: paused, running; 154 | } 155 | 156 | html { 157 | font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; 158 | font-weight: 900; 159 | min-height: 100vh; 160 | overflow: hidden; 161 | display: grid; 162 | --c1: #252521; 163 | --b: #4c6ef5; 164 | background: #ced4da; 165 | } 166 | 167 | @media (width < 660px), (height < 360px) { 168 | html:after { 169 | content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!"; 170 | white-space: pre-wrap; 171 | background: var(--b); 172 | position: absolute; 173 | inset: 0; 174 | z-index: calc(infinity); 175 | display: grid; 176 | place-content: center; 177 | text-align: center; 178 | font-size: 40px; 179 | padding: 40px; 180 | color: #fff; 181 | } 182 | } 183 | @supports not (animation-timeline: scroll()) { 184 | html:after { 185 | content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)"; 186 | white-space: pre-wrap; 187 | background: var(--b); 188 | position: absolute; 189 | inset: 0; 190 | z-index: calc(infinity); 191 | display: grid; 192 | place-content: center; 193 | text-align: center; 194 | font-size: 40px; 195 | padding: 40px; 196 | color: #fff; 197 | } 198 | } -------------------------------------------------------------------------------- /maze/style.sass: -------------------------------------------------------------------------------- 1 | $s: 60px; /* control the size */ 2 | /* If the movement is off you have to update the below variable 3 | go here and follow the steps: https://codepen.io/t_afif/pen/ZENaPPG/bdd15282dc854a3e77d6e40232ee5787 4 | You need to perform a scroll with one keypress 5 | to get the amount of pixel you need to move by 6 | */ 7 | $v: 40px; 8 | 9 | 10 | /* don't touch this. The game is static not dynamic */ 11 | $n: 10; 12 | $m: 5; 13 | @property --s1 { 14 | syntax: ''; 15 | inherits: true; 16 | initial-value: 0 17 | } 18 | @property --x { 19 | syntax: ''; 20 | inherits: true; 21 | initial-value: 0 22 | } 23 | @property --y { 24 | syntax: ''; 25 | inherits: true; 26 | initial-value: 0 27 | } 28 | b { 29 | display: block; 30 | width: $n*$s; 31 | height: $m*$s; 32 | position: sticky; 33 | left: 0; 34 | top: 0; 35 | --g:conic-gradient(var(--b) 0 0) no-repeat; 36 | background: 37 | conic-gradient(from 90deg at 1px 1px,#0000 25%,var(--c1) 0) 38 | -1px -1px/calc((100% + 1px)/#{$n}) calc((100% + 1px)/#{$m}), 39 | url(https://assets.codepen.io/1480814/dii.png) no-repeat 40 | calc(100% - #{.1*$s}) calc(100% - #{.1*$s})/auto #{.8*$s}, 41 | var(--g) 0 0/#{2*$s} #{$s}, 42 | var(--g) #{$s} #{3*$s}/#{3*$s} #{$s}, 43 | var(--g) #{3*$s} #{2*$s}/#{3*$s} #{$s}, 44 | var(--g) #{5*$s} #{$s}/#{3*$s} #{$s}, 45 | var(--g) #{5*$s} #{4*$s}/#{3*$s} #{$s}, 46 | var(--g) #{7*$s} #{3*$s}/#{3*$s} #{$s}, 47 | var(--g) #{$s} 0/#{$s} #{4*$s}, 48 | var(--g) #{5*$s} #{$s}/#{$s} #{4*$s}, 49 | var(--g) #{9*$s} 0/#{$s} #{5*$s}, 50 | var(--g) #{7*$s} 0/#{$s} #{5*$s}, 51 | var(--g) #{7*$s} 0/#{3*$s} #{$s}, 52 | url(https://assets.codepen.io/1480814/w.jpg) 0 0/#{$s} #{$s}; 53 | animation: x linear,y linear; 54 | animation-timeline: scroll(nearest inline),scroll(nearest block); 55 | container-name: b; 56 | } 57 | @keyframes x{to {--x: #{$n - 1}}} 58 | @keyframes y{to {--y: #{$m - 1}}} 59 | m { 60 | content: ""; 61 | position: absolute; 62 | translate: calc(var(--x)*100%) calc(var(--y)*100%); 63 | width: $s; 64 | aspect-ratio:1; 65 | opacity:0; 66 | background: url(https://assets.codepen.io/1480814/ad.png) center/cover; 67 | } 68 | b:after { 69 | content: "TIME - " counter(s1,decimal-leading-zero) "s"; 70 | white-space: pre-wrap; 71 | color: #fefeff; 72 | font-size: 35px; 73 | visibility: hidden; 74 | font-variant-numeric: tabular-nums; 75 | counter-reset: s1 var(--s1); 76 | position: absolute; 77 | left: 0; 78 | right: 0; 79 | bottom: -1*$s; 80 | text-align: center; 81 | padding: 8px; 82 | z-index: 99989; 83 | animation: 84 | f .1s linear forwards paused, 85 | s1 60s linear forwards paused; 86 | @container style(--x: #{$n - 1}) and style(--y: #{$m - 1}) { 87 | animation-play-state: running, paused !important; 88 | --_c: "\a Congratulations!\a\aYou did it in " counter(s1,decimal-leading-zero) "s"; 89 | } 90 | @container 91 | (style(--x: 0) and (style(--y: 1) or style(--y: 2) or style(--y: 3) or style(--y: 4))) 92 | or (style(--x: 1) and (style(--y: 4))) 93 | or (style(--x: 2) and (style(--y: 0) or style(--y: 1) or style(--y: 2) or style(--y: 4))) 94 | or (style(--x: 3) and (style(--y: 0) or style(--y: 1) or style(--y: 4))) 95 | or (style(--x: 4) and (style(--y: 0) or style(--y: 1) or style(--y: 3) or style(--y: 4))) 96 | or (style(--x: 5) and (style(--y: 0))) 97 | or (style(--x: 6) and (style(--y: 0) or style(--y: 2) or style(--y: 3))) 98 | or (style(--x: 8) and (style(--y: 1) or style(--y: 2) or style(--y: 4))) { 99 | animation-play-state: running, paused !important; 100 | } 101 | } 102 | @keyframes f { 103 | 1%,to { 104 | content: var(--_c,"\aGame Over\a\a Refresh the page\a and try again "); 105 | font-size: 50px; 106 | background: var(--b); 107 | inset: 0 0 -1*$s; 108 | } 109 | } 110 | @keyframes s1 {to{--s1:60}} 111 | g { 112 | display: block; 113 | width: $n*$s + ($n - 1)*$v; 114 | height: ($m + 1)*$s + ($m - 1)*$v; 115 | } 116 | body { 117 | position: relative; 118 | margin: auto auto $s/2; 119 | overflow: auto; 120 | scrollbar-width: none; 121 | width: $n*$s; 122 | height: ($m + 1)*$s; 123 | border: 5px solid var(--c1); 124 | background: var(--c1); 125 | cursor: pointer; 126 | } 127 | b:before { 128 | content:"Grab the dino without\a touching the wall\a\aUse your keyboard to move\a\a\a🖱️Click to start"; 129 | font-size: 30px; 130 | white-space: pre; 131 | text-align: center; 132 | position: absolute; 133 | inset: 0 0 -1*$s; 134 | padding-top: 20px; 135 | pointer-events: none; 136 | z-index: 5896; 137 | color: #fefeff; 138 | background: 139 | url(https://assets.codepen.io/1480814/ad.png) bottom/90px auto no-repeat, 140 | url(https://assets.codepen.io/1480814/k.png) 50% 55%/90px auto no-repeat var(--b); 141 | } 142 | body:focus-within { 143 | cursor: none; 144 | } 145 | body:focus-within b:before { 146 | opacity: 0; 147 | } 148 | body:focus-within m { 149 | opacity: 1; 150 | } 151 | body:focus-within b:after { 152 | visibility: visible; 153 | animation-play-state: paused,running; 154 | } 155 | html { 156 | font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; 157 | font-weight: 900; 158 | min-height:100vh; 159 | overflow: hidden; 160 | display: grid; 161 | --c1: #252521; 162 | --b: #4c6ef5; 163 | background: #ced4da; 164 | } 165 | @media (width < ($n + 1)*$s), (height < ($m + 1)*$s) { 166 | html:after { 167 | content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!"; 168 | white-space: pre-wrap; 169 | background: var(--b); 170 | position: absolute; 171 | inset: 0; 172 | z-index: calc(infinity); 173 | display: grid; 174 | place-content: center; 175 | text-align: center; 176 | font-size: 40px; 177 | padding: 40px; 178 | color: #fff; 179 | } 180 | } 181 | @supports not (animation-timeline: scroll()) { 182 | html:after { 183 | content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)"; 184 | white-space: pre-wrap; 185 | background: var(--b); 186 | position: absolute; 187 | inset: 0; 188 | z-index: calc(infinity); 189 | display: grid; 190 | place-content: center; 191 | text-align: center; 192 | font-size: 40px; 193 | padding: 40px; 194 | color: #fff; 195 | } 196 | } -------------------------------------------------------------------------------- /click-the-circles/style.sass: -------------------------------------------------------------------------------- 1 | $n:220; /* control the number of circles (don't forget to update the HTML value*/ 2 | 3 | audio{ 4 | position: absolute; 5 | inset: 0; 6 | margin: auto; 7 | width: 100px; 8 | height: 54px; 9 | clip-path: circle(26px at 27% 50%); 10 | } 11 | h2 { 12 | color: #fff; 13 | font-family: sans-serif; 14 | position: absolute; 15 | inset: 0 0 0 170px; 16 | margin: auto; 17 | width: 160px; 18 | height: fit-content; 19 | font-size: 30px; 20 | text-align: center; 21 | } 22 | s { 23 | position: absolute; 24 | top: 50px; 25 | left: 50px; 26 | width: 50px; 27 | aspect-ratio: 1; 28 | background: #fc86a9; 29 | border-radius: 50%; 30 | opacity: 0; 31 | transition: 999s 999s; 32 | } 33 | s:after { 34 | content: ""; 35 | position: absolute; 36 | width: 48px; 37 | height: 20px; 38 | background: #fff; 39 | left: 104%; 40 | top: calc(50% - 10px); 41 | clip-path: polygon(20px 0,20px 30%,100% 30%,100% 60%,20px 60%,20px 100%,0 50%); 42 | pointer-events: none; 43 | } 44 | s:before { 45 | content: "When the music starts, click the circle!"; 46 | position: absolute; 47 | left: calc(100% + 50px); 48 | top: 50%; 49 | color: #fff; 50 | font-family: sans-serif; 51 | font-weight: bold; 52 | width: 195px; 53 | text-align: center; 54 | transform: translateY(-50%); 55 | pointer-events: none; 56 | } 57 | audio:hover ~ s{ 58 | opacity: 1; 59 | transition: 0s; 60 | } 61 | s:active { 62 | opacity: 0.01; 63 | transition: 0s; 64 | } 65 | c { 66 | position: absolute; 67 | display: grid; 68 | width: 60px; 69 | aspect-ratio: 1; 70 | border-radius: 50%; 71 | overflow: hidden; 72 | outline: 4px solid #fff; 73 | place-items: center; 74 | font-family: sans-serif; 75 | font-weight: bold; 76 | animation: c 2s linear both 1s; 77 | transition: filter 999s 999s, outline 999s 999s; 78 | } 79 | l { 80 | position: fixed; 81 | z-index: 20; 82 | inset: 0 0 100%; 83 | background: #000; 84 | transition: 999s 999s; 85 | display: grid; 86 | place-content: center; 87 | text-align: center; 88 | overflow: hidden; 89 | background: #000; 90 | font-family: monospace; 91 | pointer-events: none; 92 | } 93 | l:before { 94 | content: "Your cursor left the screen :("; 95 | font-size: 40px; 96 | color: red; 97 | } 98 | l:after { 99 | content: "Refresh the page to start a new game!"; 100 | font-size: 20px; 101 | color: white; 102 | } 103 | cc { 104 | position: fixed; 105 | z-index: 23; 106 | inset: 0; 107 | display: none; 108 | background: #000; 109 | border: 60px solid; 110 | } 111 | @property --time{ 112 | syntax: ''; 113 | inherits: true; 114 | initial-value: 0; 115 | } 116 | @keyframes time{ 117 | 0% {--time: 138} 118 | 100%{--time: 0} 119 | } 120 | cc:before { 121 | content: counter(time); 122 | counter-reset: time var(--time); 123 | animation: time 138s linear forwards; 124 | display: grid; 125 | place-content: center; 126 | position: fixed; 127 | inset: 0; 128 | z-index: 10; 129 | color :#fff9; 130 | font-family: monospace; 131 | font-weight: bold; 132 | font-size: 80px; 133 | } 134 | s:active ~ cc, 135 | cc:hover { 136 | display: block; 137 | } 138 | s:active ~ l { 139 | inset: 0; 140 | transition: 0s; 141 | } 142 | c:before, 143 | c:after { 144 | content: "Miss"; 145 | grid-area: 1/1; 146 | } 147 | c:after { 148 | content: "Good"; 149 | border-image: conic-gradient(#009247 0 0) fill 0/ /50px; 150 | opacity: 0; 151 | transition: opacity 999s 999s, font-size 999s 999s; 152 | } 153 | c:active { 154 | filter: opacity(50%); 155 | outline-color: #0000; 156 | transition: filter 0s, outline 0s; 157 | } 158 | c:active:after { 159 | opacity: 1; 160 | font-size: 16px; 161 | transition: opacity 0s, font-size 0s; 162 | } 163 | @keyframes c { 164 | 0%, 165 | 2% { 166 | z-index: 9; 167 | opacity: 0; 168 | font-size: 0; 169 | outline-offset: 35px; 170 | background: #fc86a9; 171 | } 172 | 10% { 173 | z-index: 15; 174 | opacity: 1; 175 | font-size: 0; 176 | outline-offset: 35px; 177 | background: #fc86a9; 178 | } 179 | 75% { 180 | z-index: 15; 181 | opacity: 1; 182 | font-size: 0; 183 | outline-offset: 0px; 184 | background: #fc86a9; 185 | } 186 | 76% { 187 | z-index: 9; 188 | } 189 | 80% { 190 | font-size: 16px; 191 | background: #ea2127; 192 | } 193 | 100% { 194 | opacity: 0; 195 | background: #ea2127; 196 | } 197 | } 198 | 199 | $sum: (); 200 | $anime: (); 201 | @for $i from 1 to ($n+1) { 202 | @property --c#{$i}{ 203 | syntax: ''; 204 | inherits: true; 205 | initial-value: 0; 206 | } 207 | c:nth-of-type(#{$i}) { 208 | top: (random(100))*1%; 209 | left: (random(100))*1%; 210 | animation-duration: (random(3)+1)+s; 211 | animation-delay: (#{132*$i/$n})+s; 212 | } 213 | c:nth-of-type(#{$i}) ~ r{ 214 | --c#{$i}: 0; 215 | --s#{$i}: paused 216 | } 217 | c:nth-of-type(#{$i}):active ~ r{ 218 | --s#{$i}: running; 219 | } 220 | @keyframes c#{$i} { 221 | to{--c#{$i}:1;} 222 | } 223 | $sum: append($sum,'+ var(--c#{$i})' , space); 224 | $anime: append($anime,'c#{$i} var(--s#{$i}) forwards 0.01s' , comma); 225 | } 226 | 227 | r { 228 | --sum:calc(0 #{$sum}); 229 | animation: 138s end linear forwards, #{$anime}; 230 | position: absolute; 231 | display: grid; 232 | place-content: center; 233 | text-align: center; 234 | color: #fff; 235 | overflow: hidden; 236 | z-index: 999; 237 | background: #000; 238 | font-family: monospace; 239 | } 240 | @keyframes end { 241 | 0%,99% { 242 | inset: 0 0 100%; 243 | } 244 | 100% { 245 | inset: 0; 246 | } 247 | } 248 | r:before { 249 | content: "Score: " counter(T) "/#{$n}"; 250 | counter-reset: T var(--sum); 251 | font-size: 60px; 252 | } 253 | r:after { 254 | content: "Refresh the page to start a new game!"; 255 | font-size: 20px; 256 | color: red; 257 | } 258 | 259 | 260 | 261 | html { 262 | background: #000; 263 | cursor: url('data:image/svg+xml;utf8,
') 264 | 20 20, 265 | auto; 266 | } 267 | html:active { 268 | background: #000; 269 | cursor: url('data:image/svg+xml;utf8,
') 270 | 20 20, 271 | auto; 272 | } 273 | -------------------------------------------------------------------------------- /coin-collector/style.sass: -------------------------------------------------------------------------------- 1 | grid { 2 | display: grid; 3 | grid: repeat(8,1fr)/repeat(10,1fr); 4 | margin: 10px auto 0; 5 | position: relative; 6 | cursor: pointer; 7 | } 8 | c,w { 9 | width: 40px; 10 | aspect-ratio: 1; 11 | } 12 | c { 13 | background: radial-gradient(#f7a011 34%,#f8ce00 35% 51%,#0000 52%) 0/100% 100% no-repeat; 14 | transition: 999s 999s; 15 | } 16 | c:hover { 17 | background-size: 0 0; 18 | transition: 0s; 19 | } 20 | 21 | $sum: (); 22 | $anime: (); 23 | @for $i from 1 to 36 { 24 | @property --c#{$i}{ 25 | syntax: ''; 26 | inherits: true; 27 | initial-value: 0; 28 | } 29 | c:nth-of-type(#{$i}) ~ result{ 30 | --c#{$i}: 0; 31 | --s#{$i}: paused 32 | } 33 | c:nth-of-type(#{$i}):hover ~ result{ 34 | --s#{$i}: running; 35 | } 36 | @keyframes c#{$i} { 37 | to{--c#{$i}:1;} 38 | } 39 | $sum: append($sum,'+ var(--c#{$i})' , space); 40 | $anime: append($anime,'c#{$i} var(--s#{$i}) forwards 0.01s' , comma); 41 | } 42 | result { 43 | --sum:calc(0 #{$sum}); 44 | animation: #{$anime}; 45 | position: absolute; 46 | inset: 0 0 clamp(0%, (35 - var(--sum))*9999% ,100%) 0; 47 | display: grid; 48 | place-content: center; 49 | font-size: 70px; 50 | color: #00b300; 51 | overflow: hidden; 52 | background: #fff9; 53 | } 54 | result:before { 55 | content: "Bravo!"; 56 | } 57 | 58 | w { 59 | background: 60 | linear-gradient(#a49d83 50%,#0000 0) 75% 0/2px 50% repeat-y, 61 | linear-gradient(#0000 50%,#a49d83 0) 25% 0/2px 50% repeat-y, 62 | linear-gradient(#966042 calc(100% - 2px),#a49d83 0) 0 0/100% calc(100%/4); 63 | } 64 | w::before { 65 | content: "Game Over"; 66 | position: fixed; 67 | inset: 0 0 100%; 68 | z-index: 5695845; 69 | background: #000; 70 | color: red; 71 | font-size: 80px; 72 | display: grid; 73 | place-content: center; 74 | overflow: hidden; 75 | transition: 99999s; 76 | } 77 | w::after { 78 | content: "Refresh the page to start a new game"; 79 | position: fixed; 80 | inset: 0 0 100%; 81 | z-index: 5695845; 82 | color: #fff; 83 | font-size: 30px; 84 | display: grid; 85 | place-content: end center; 86 | overflow: hidden; 87 | transition: 99999s; 88 | } 89 | w:hover::before, 90 | w:hover::after{ 91 | inset: 0; 92 | transition: 0s; 93 | } 94 | 95 | /* The time from https://codepen.io/t_afif/pen/ExbRBPN*/ 96 | @property --n{ 97 | syntax: ''; 98 | inherits: true; 99 | initial-value: 0; 100 | } 101 | @property --t{ 102 | syntax: ''; 103 | inherits: true; 104 | initial-value: #000; 105 | } 106 | @property --r{ 107 | syntax: ''; 108 | inherits: true; 109 | initial-value: #000; 110 | } 111 | @property --b{ 112 | syntax: ''; 113 | inherits: true; 114 | initial-value: #000; 115 | } 116 | @property --l{ 117 | syntax: ''; 118 | inherits: true; 119 | initial-value: #000; 120 | } 121 | 122 | d { 123 | width: 40px; /* size */ 124 | display: inline-grid; 125 | aspect-ratio: .55; 126 | } 127 | d:before, 128 | d:after { 129 | content: ""; 130 | padding: 20%; 131 | background: 132 | conic-gradient(from -45deg at 50% 45%,var(--t) 90deg,#0000 0), 133 | conic-gradient(from 45deg at 55% 50%,var(--r) 90deg,#0000 0), 134 | conic-gradient(from 135deg at 50% 55%,var(--b) 90deg,#0000 0), 135 | conic-gradient(from 225deg at 45% 50%,var(--l) 90deg,#0000 0); 136 | --m: conic-gradient(#000 0 0) content-box,conic-gradient(#000 0 0); 137 | -webkit-mask: var(--m); 138 | mask: var(--m); 139 | -webkit-mask-composite: xor; 140 | mask-composite: exclude; 141 | clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); 142 | transition:--t .45s,--l .45s,--b .45s,--r .45s; 143 | } 144 | d:after { 145 | margin-top: -20%; 146 | --t: #0000; 147 | } 148 | d { 149 | --1:(var(--n) - 1)*(var(--n) - 1); 150 | --2:(var(--n) - 2)*(var(--n) - 2); 151 | --3:(var(--n) - 3)*(var(--n) - 3); 152 | --4:(var(--n) - 4)*(var(--n) - 4); 153 | --5:(var(--n) - 5)*(var(--n) - 5); 154 | --6:(var(--n) - 6)*(var(--n) - 6); 155 | --7:(var(--n) - 7)*(var(--n) - 7); 156 | --8:(var(--n) - 8)*(var(--n) - 8); 157 | --9:(var(--n) - 9)*(var(--n) - 9); 158 | } 159 | 160 | d:before { 161 | --t:rgb( 162 | clamp(30,var(--1)*var(--4)*999,250) 163 | clamp(30,var(--1)*var(--4)*999,250) 164 | 30); 165 | --r:rgb( 166 | clamp(30,var(--5)*var(--6)*999,250) 167 | clamp(30,var(--5)*var(--6)*999,250) 168 | 30); 169 | --b:rgb( 170 | clamp(30,var(--n)*var(--1)*var(--7)*999,250) 171 | clamp(30,var(--n)*var(--1)*var(--7)*999,250) 172 | 30); 173 | --l:rgb( 174 | clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250) 175 | clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250) 176 | 30); 177 | } 178 | d:after { 179 | --r:rgb( 180 | clamp(30,var(--2)*999,250) 181 | clamp(30,var(--2)*999,250) 182 | 30); 183 | --b:rgb( 184 | clamp(30,var(--1)*var(--4)*var(--7)*999,250) 185 | clamp(30,var(--1)*var(--4)*var(--7)*999,250) 186 | 30); 187 | --l:rgb( 188 | clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250) 189 | clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250) 190 | 30); 191 | } 192 | timer d:nth-of-type(1) {animation:d6 60s linear infinite} 193 | timer d:nth-of-type(2) {animation:d9 10s linear infinite} 194 | timer d:nth-of-type(3) {animation:d9 1s linear infinite;grid-column:4} 195 | timer d:nth-of-type(4) {animation:d9 .1s linear infinite} 196 | @keyframes d9 { 197 | 0%, 198 | 9.95%{--n:0} 199 | 10%, 200 | 19.95%{--n:1} 201 | 20%, 202 | 29.95%{--n:2} 203 | 30%, 204 | 39.95%{--n:3} 205 | 40%, 206 | 49.95%{--n:4} 207 | 50%, 208 | 59.95%{--n:5} 209 | 60%, 210 | 69.95%{--n:6} 211 | 70%, 212 | 79.95%{--n:7} 213 | 80%, 214 | 89.95%{--n:8} 215 | 90%, 216 | 99.95%{--n:9} 217 | } 218 | @keyframes d6 { 219 | 0%, 220 | 16.64%{--n:0} 221 | 16.67%, 222 | 33.30%{--n:1} 223 | 33.33%, 224 | 49.96%{--n:2} 225 | 50.00%, 226 | 66.63%{--n:3} 227 | 66.67%, 228 | 83.30%{--n:4} 229 | 83.33%, 230 | 99.97%{--n:5} 231 | } 232 | 233 | timer { 234 | position: absolute; 235 | display: grid; 236 | top: 50%; 237 | left: 100%; 238 | transform: translate(20%, -50%); 239 | grid-template-columns: 1fr 1fr 10px 1fr 1fr; 240 | grid-gap: 10px; 241 | pointer-events: none; 242 | background: 243 | linear-gradient(rgb(250 250 30) 0 0) 50% 30%/10px 10px no-repeat, 244 | linear-gradient(rgb(250 250 30) 0 0) 50% 70%/10px 10px no-repeat; 245 | } 246 | @media (max-width:900px) { 247 | timer { 248 | top: 100%; 249 | left: 50%; 250 | transform: translate(-50%, 10%); 251 | } 252 | } 253 | 254 | grid timer d:nth-child(n), 255 | grid result:hover ~ timer d:nth-child(n){ 256 | animation-play-state: paused; 257 | } 258 | grid:hover timer d:nth-child(n) { 259 | animation-play-state: running; 260 | } 261 | grid:hover timer { 262 | filter: hue-rotate(45deg); 263 | } 264 | 265 | body { 266 | min-height: 100vh; 267 | margin: 0; 268 | display: grid; 269 | place-content: start center; 270 | background: #000; 271 | color: #fff; 272 | font-family: system-ui, sans-serif; 273 | } 274 | h1,p { 275 | font-size: 2rem; 276 | margin:0; 277 | text-align:center; 278 | } 279 | p { 280 | font-size:1.2rem; 281 | } -------------------------------------------------------------------------------- /super-css-mario/style.sass: -------------------------------------------------------------------------------- 1 | /* Control the grid */ 2 | $n: 11; /* rows */ 3 | $m: 5; /* columns */ 4 | $s: 60px; /* size */ 5 | /* the number of coins (don't forget to update the html code) 6 | some coins may overlap but it's not a big deal 7 | */ 8 | $c: 20; 9 | /* keyboard sensitivity ]1 +infinity[ 10 | bigger values will get you a slower move 11 | */ 12 | $v: 3; 13 | 14 | @import url('https://fonts.cdnfonts.com/css/retro-mario'); 15 | @property --s1 { 16 | syntax: ''; 17 | inherits: true; 18 | initial-value: 0 19 | } 20 | @property --s2 { 21 | syntax: ''; 22 | inherits: true; 23 | initial-value: 0 24 | } 25 | @property --sum { 26 | syntax: ''; 27 | inherits: true; 28 | initial-value: 0 29 | } 30 | b { 31 | display: grid; 32 | grid-template-columns: repeat($n,1fr); 33 | grid-template-rows: repeat($m,1fr); 34 | width: ($n + 1)*$s; 35 | height: ($m + 2)*$s; 36 | position: sticky; 37 | border: solid #0000; 38 | border-width: $s/2 $s/2 1.5*$s; 39 | box-sizing: border-box; 40 | left: 0; 41 | top: 0; 42 | font-weight: initial; 43 | } 44 | m { 45 | content:""; 46 | position: absolute; 47 | left: 0; 48 | top: 0; 49 | translate: -50% -50%; 50 | width: $s; 51 | aspect-ratio:1; 52 | opacity:0; 53 | background: url(https://assets.codepen.io/1480814/mm.png) center/cover; 54 | animation: x linear,y linear; 55 | animation-timeline: scroll(nearest inline),scroll(nearest block); 56 | } 57 | @keyframes x{to {left: 100%}} 58 | @keyframes y{to {top: 100%}} 59 | c { 60 | position: absolute; 61 | inset: 0; 62 | animation-timeline: scroll(nearest inline),scroll(nearest block)!important; 63 | } 64 | c:before { 65 | content:""; 66 | position: absolute; 67 | width: #{100%/$n}; 68 | aspect-ratio: 1; 69 | border-radius: 50%; 70 | scale: .6; 71 | background: 72 | url(https://assets.codepen.io/1480814/ccc.png) 73 | 0 50%/600% auto no-repeat; 74 | } 75 | @keyframes b {to {background-position: 120% 50%}} 76 | @keyframes e {to {opacity:0;translate:0 -100%}} 77 | $sel: (""); 78 | @for $i from 1 to ($c+1) { 79 | c#{$sel}{ 80 | animation: c#{$i}-x linear,c#{$i}-y linear; 81 | container-name: c#{$i}; 82 | } 83 | $x:random($n); 84 | $y:random($m); 85 | c#{$sel}:before { 86 | left: #{($x - 1)*100%/$n}; 87 | top: #{($y - 1)*100%/$m}; 88 | animation: 89 | b .8s steps(6) infinite, 90 | e .05s forwards var(--e#{$i},paused); 91 | @container c#{$i} style(--c#{$i}-x: 1) and style(--c#{$i}-y: 1) {--e#{$i}: running} 92 | } 93 | @keyframes c#{$i}-x { 94 | 0%,#{($x - 1)*(100%/$n)},#{$x*(100%/$n)},to{--c#{$i}-x:0} 95 | #{($x - 1)*(100%/$n) + .1%},#{$x*(100%/$n) - .1%}{--c#{$i}-x:1} 96 | } 97 | @keyframes c#{$i}-y { 98 | 0%,#{($y - 1)*(100%/$m)},#{$y*(100%/$m)},to{--c#{$i}-y:0} 99 | #{($y - 1)*(100%/$m) + .1%},#{$y*(100%/$m) - .1%}{--c#{$i}-y:1} 100 | } 101 | $sel: append($sel,'>c',space); 102 | } 103 | r { 104 | color: #fefeff; 105 | font-size: 35px; 106 | visibility: hidden; 107 | $anim: (); 108 | @for $i from 1 to ($c+1) { 109 | --r#{$i}:0; 110 | $anim: append($anim,'r#{$i} .1s forwards var(--s-r#{$i},paused)',comma); 111 | @container c#{$i} style(--c#{$i}-x: 1) and style(--c#{$i}-y: 1) {--s-r#{$i}: running} 112 | @keyframes r#{$i} {1%,to {--r#{$i}:1}} 113 | } 114 | $sum: ("var(--r1)"); 115 | @for $i from 2 to ($c+1) { 116 | $sum: append($sum,'+ var(--r#{$i})' , space); 117 | } 118 | --sum: calc(#{$sum}); 119 | animation: #{$anim}; 120 | container-name: r; 121 | } 122 | r:before { 123 | content: "SCORE - " counter(r,decimal-leading-zero); 124 | position: absolute; 125 | right: $s/-2; 126 | bottom: -1.5*$s; 127 | padding: 8px 16px 8px 0; 128 | counter-reset: r var(--sum); 129 | } 130 | r:after { 131 | content: "TIME - " counter(s1,decimal-leading-zero) "s"; 132 | font-variant-numeric: tabular-nums; 133 | counter-reset: s1 var(--s1) s2 var(--s2); 134 | position: absolute; 135 | left: $s/-2; 136 | bottom: -1.5*$s; 137 | padding: 8px; 138 | animation: s1 60s linear forwards paused; 139 | background: url(https://assets.codepen.io/1480814/win_1.png) bottom/auto 0 no-repeat; 140 | @container r style(--sum: #{$c}) { 141 | content:"You did it in " counter(s1,decimal-leading-zero) "s"; 142 | background: 143 | url(https://assets.codepen.io/1480814/win_1.png) 50% 70%/auto 60% no-repeat 144 | var(--b) content-box; 145 | inset: $s/-2 $s/-2 -1.5*$s; 146 | padding-right: 6px; 147 | animation-play-state: paused !important; 148 | text-align: center; 149 | font-size: 55px; 150 | z-index: 99989; 151 | visibility: visible; 152 | } 153 | } 154 | @keyframes s1 {to{--s1:60}} 155 | g { 156 | display: block; 157 | width: ($n + 1)*$s*$v; 158 | height: ($m + 2)*$s*$v; 159 | } 160 | body { 161 | position: relative; 162 | margin: auto auto $s/2; 163 | overflow: auto; 164 | scrollbar-width: none; 165 | width: ($n + 1)*$s; 166 | height: ($m + 2)*$s; 167 | box-shadow: 168 | -6px 0 var(--c2), 169 | -6px 0 var(--c2) inset, 170 | 0 -6px var(--c2) inset; 171 | background: var(--b); 172 | cursor: pointer; 173 | } 174 | b:before { 175 | content:"Collect the Coins\aWith your keyboard!\a\a\a🖱️Click to start"; 176 | font-size: 40px; 177 | white-space: pre; 178 | text-align: center; 179 | position: absolute; 180 | inset: $s/-4 $s/-4 -1*$s; 181 | padding-top: $s/2; 182 | pointer-events: none; 183 | z-index: 5896; 184 | color: #fefeff; 185 | background: 186 | url(https://assets.codepen.io/1480814/mm.png) bottom/80px auto no-repeat, 187 | url(https://assets.codepen.io/1480814/k.png) 50% 43%/110px auto no-repeat var(--b); 188 | } 189 | body:focus-within { 190 | cursor: none; 191 | } 192 | body:focus-within b:before { 193 | opacity: 0; 194 | } 195 | body:focus-within m { 196 | opacity: 1; 197 | } 198 | body:focus-within r { 199 | visibility: visible; 200 | } 201 | body:focus-within r:after { 202 | animation-play-state: running; 203 | } 204 | html { 205 | font-family: 'Retro Mario', sans serif; 206 | min-height:100vh; 207 | overflow: hidden; 208 | display: grid; 209 | --c1: #954b0c; 210 | --c2: #000; 211 | --b: #6185f8; 212 | --g:conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0); 213 | background: 214 | var(--g) 50% 100%, 215 | var(--g) calc(50% + #{$s/2}) calc(100% + #{$s/2}) 216 | var(--c2); 217 | background-size: $s $s; 218 | } 219 | html:before { 220 | content: "Super CSS Mario"; 221 | position: absolute; 222 | inset: auto 0 ($m + 3)*$s; 223 | width: fit-content; 224 | margin: auto; 225 | color: #ffccc5; 226 | font-size: 50px; 227 | padding: 10px 25px; 228 | background: #994e00; 229 | text-shadow: 5px 5px #000; 230 | border: 3px solid; 231 | } 232 | @media (width < ($n + 1)*$s), (height < ($m + 4)*$s) { 233 | html:after { 234 | content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!"; 235 | white-space: pre-wrap; 236 | background: var(--b); 237 | position: absolute; 238 | inset: 0; 239 | z-index: calc(infinity); 240 | display: grid; 241 | place-content: center; 242 | text-align: center; 243 | font-size: 40px; 244 | padding: 40px; 245 | color: #fff; 246 | } 247 | } 248 | @supports not (animation-timeline: scroll()) { 249 | html:after { 250 | content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)"; 251 | white-space: pre-wrap; 252 | background: var(--b); 253 | position: absolute; 254 | inset: 0; 255 | z-index: calc(infinity); 256 | display: grid; 257 | place-content: center; 258 | text-align: center; 259 | font-size: 40px; 260 | padding: 40px; 261 | color: #fff; 262 | } 263 | } -------------------------------------------------------------------------------- /super-css-mario-2/style.sass: -------------------------------------------------------------------------------- 1 | /* Control the grid */ 2 | $n: 11; /* rows */ 3 | $m: 5; /* columns */ 4 | $s: 60px; /* size */ 5 | /* the number of coins (don't forget to update the html code) */ 6 | $c: 14; 7 | /* number of enemies (don't forget to update the html code) */ 8 | $e: 5; 9 | /* keyboard sensitivity ]1 +infinity[ 10 | bigger values will get you a slower move 11 | */ 12 | $v: 3; 13 | 14 | 15 | $odd: 1,3,5,7,9,11,13,15,17,19,21,23,25,27; 16 | $even:2,4,6,8,10,12,14,16,18,20,22,24,26; 17 | 18 | @import url('https://fonts.cdnfonts.com/css/retro-mario'); 19 | @property --s1 { 20 | syntax: ''; 21 | inherits: true; 22 | initial-value: 0 23 | } 24 | @property --s2 { 25 | syntax: ''; 26 | inherits: true; 27 | initial-value: 0 28 | } 29 | @property --sum { 30 | syntax: ''; 31 | inherits: true; 32 | initial-value: 0 33 | } 34 | @property --ee { 35 | syntax: ''; 36 | inherits: true; 37 | initial-value: 0 38 | } 39 | b { 40 | display: grid; 41 | grid-template-columns: repeat($n,1fr); 42 | grid-template-rows: repeat($m,1fr); 43 | width: ($n + 1)*$s; 44 | height: ($m + 2)*$s; 45 | position: sticky; 46 | border: solid #0000; 47 | border-width: $s/2 $s/2 1.5*$s; 48 | box-sizing: border-box; 49 | left: 0; 50 | top: 0; 51 | font-weight: initial; 52 | } 53 | m { 54 | content:""; 55 | position: absolute; 56 | left: 0; 57 | top: 0; 58 | translate: -50% -50%; 59 | width: $s; 60 | aspect-ratio:1; 61 | opacity:0; 62 | background: url(https://assets.codepen.io/1480814/mm.png) center/cover; 63 | animation: x linear,y linear; 64 | animation-timeline: scroll(nearest inline),scroll(nearest block); 65 | } 66 | @keyframes x{to {left: 100%}} 67 | @keyframes y{to {top: 100%}} 68 | c,e { 69 | position: absolute; 70 | inset: 0; 71 | animation-timeline: scroll(nearest inline),scroll(nearest block)!important; 72 | } 73 | :is(c,e):before { 74 | content:""; 75 | position: absolute; 76 | width: #{100%/$n}; 77 | aspect-ratio: 1; 78 | scale: .6; 79 | background: 80 | url(https://assets.codepen.io/1480814/ccc.png) 81 | 0 50%/600% auto no-repeat; 82 | } 83 | e:before { 84 | scale: .8; 85 | animation: g .4s steps(2) infinite; 86 | background: url(https://assets.codepen.io/1480814/goomba_1.png) 0 50%/200% auto no-repeat; 87 | } 88 | @keyframes b {to {background-position: 120% 50%}} 89 | @keyframes g {to {background-position: 200% 50%}} 90 | @keyframes e {to {opacity:0;translate:0 -100%}} 91 | $sel: (""); 92 | @for $i from 1 to ($c+1) { 93 | c#{$sel}{ 94 | animation: c#{$i}-x linear,c#{$i}-y linear; 95 | container-name: c#{$i}; 96 | } 97 | $x:nth($odd, random(ceil($n/2))); 98 | $y:random($m); 99 | c#{$sel}:before { 100 | left: #{($x - 1)*100%/$n}; 101 | top: #{($y - 1)*100%/$m}; 102 | animation: 103 | b .8s steps(6) infinite, 104 | e .05s forwards var(--e#{$i},paused); 105 | @container c#{$i} style(--c#{$i}-x: 1) and style(--c#{$i}-y: 1) {--e#{$i}: running} 106 | } 107 | @keyframes c#{$i}-x { 108 | 0%,#{($x - 1)*(100%/$n)},#{$x*(100%/$n)},to{--c#{$i}-x:0} 109 | #{($x - 1)*(100%/$n) + .1%},#{$x*(100%/$n) - .1%}{--c#{$i}-x:1} 110 | } 111 | @keyframes c#{$i}-y { 112 | 0%,#{($y - 1)*(100%/$m)},#{$y*(100%/$m)},to{--c#{$i}-y:0} 113 | #{($y - 1)*(100%/$m) + .1%},#{$y*(100%/$m) - .1%}{--c#{$i}-y:1} 114 | } 115 | $sel: append($sel,'>c',space); 116 | } 117 | $sel: (""); 118 | @for $i from 1 to ($e+1) { 119 | e#{$sel}{ 120 | animation: e#{$i}-x linear,e#{$i}-y linear; 121 | container-name: e#{$i}; 122 | } 123 | $x:nth($even, random(floor($n/2))); 124 | $y:random($m); 125 | e#{$sel}:before { 126 | left: #{($x - 1)*100%/$n}; 127 | top: #{($y - 1)*100%/$m}; 128 | } 129 | @keyframes e#{$i}-x { 130 | 0%,#{($x - 1)*(100%/$n)},#{$x*(100%/$n)},to{--e#{$i}-x:0} 131 | #{($x - 1)*(100%/$n) + .1%},#{$x*(100%/$n) - .1%}{--e#{$i}-x:1} 132 | } 133 | @keyframes e#{$i}-y { 134 | 0%,#{($y - 1)*(100%/$m)},#{$y*(100%/$m)},to{--e#{$i}-y:0} 135 | #{($y - 1)*(100%/$m) + .1%},#{$y*(100%/$m) - .1%}{--e#{$i}-y:1} 136 | } 137 | $sel: append($sel,'>e',space); 138 | } 139 | r { 140 | color: #fefeff; 141 | font-size: 35px; 142 | visibility: hidden; 143 | $anim: (); 144 | @for $i from 1 to ($c+1) { 145 | --r#{$i}:0; 146 | $anim: append($anim,'r#{$i} .1s forwards var(--s-r#{$i},paused)',comma); 147 | @container c#{$i} style(--c#{$i}-x: 1) and style(--c#{$i}-y: 1) {--s-r#{$i}: running} 148 | @keyframes r#{$i} {1%,to {--r#{$i}:1}} 149 | } 150 | $anim: append($anim,'eeee .1s forwards var(--eeee,paused)',comma); 151 | --ee: 0; 152 | @for $i from 1 to ($e+1) { 153 | @container e#{$i} style(--e#{$i}-x: 1) and style(--e#{$i}-y: 1) {--eeee: running} 154 | } 155 | @keyframes eeee {1%,to {--ee:1}} 156 | $sum: ("var(--r1)"); 157 | @for $i from 2 to ($c+1) { 158 | $sum: append($sum,'+ var(--r#{$i})' , space); 159 | } 160 | --sum: calc(#{$sum}); 161 | animation: #{$anim}; 162 | container-name: r; 163 | } 164 | r:before { 165 | content: "SCORE - " counter(r,decimal-leading-zero); 166 | position: absolute; 167 | right: $s/-2; 168 | bottom: -1.5*$s; 169 | padding: 8px 16px 8px 0; 170 | counter-reset: r var(--sum); 171 | } 172 | r:after { 173 | content: "TIME - " counter(s1,decimal-leading-zero) "s"; 174 | font-variant-numeric: tabular-nums; 175 | counter-reset: s1 var(--s1) s2 var(--s2); 176 | position: absolute; 177 | left: $s/-2; 178 | bottom: -1.5*$s; 179 | padding: 8px; 180 | animation: s1 60s linear forwards paused; 181 | background: url(https://assets.codepen.io/1480814/win_1.png) bottom/auto 0 no-repeat; 182 | @container r style(--sum: #{$c}) { 183 | content:"You did it in " counter(s1,decimal-leading-zero) "s"; 184 | background: 185 | url(https://assets.codepen.io/1480814/win_1.png) 50% 70%/auto 60% no-repeat 186 | var(--b) content-box; 187 | inset: $s/-2 $s/-2 -1.5*$s; 188 | padding-right: 6px; 189 | animation-play-state: paused !important; 190 | text-align: center; 191 | font-size: 55px; 192 | z-index: 99989; 193 | visibility: visible; 194 | } 195 | @container r style(--ee: 1) { 196 | content:"\aGame Over\a\a Refresh the page\a and try again "; 197 | white-space: pre-wrap; 198 | background: var(--b) content-box; 199 | inset: $s/-2 $s/-2 -1.5*$s; 200 | padding-right: 6px; 201 | animation-play-state: paused !important; 202 | text-align: center; 203 | font-size: 55px; 204 | z-index: 99989; 205 | visibility: visible; 206 | } 207 | } 208 | @keyframes s1 {to{--s1:60}} 209 | g { 210 | display: block; 211 | width: ($n + 1)*$s*$v; 212 | height: ($m + 2)*$s*$v; 213 | } 214 | body { 215 | position: relative; 216 | margin: auto auto $s/2; 217 | overflow: auto; 218 | scrollbar-width: none; 219 | width: ($n + 1)*$s; 220 | height: ($m + 2)*$s; 221 | box-shadow: 222 | -6px 0 var(--c2), 223 | -6px 0 var(--c2) inset, 224 | 0 -6px var(--c2) inset; 225 | background: var(--b); 226 | cursor: pointer; 227 | } 228 | b:before { 229 | content:"Collect the Coins\aWith your keyboard!\a\a\a🖱️Click to start"; 230 | font-size: 40px; 231 | white-space: pre; 232 | text-align: center; 233 | position: absolute; 234 | inset: $s/-4 $s/-4 -1*$s; 235 | padding-top: $s/2; 236 | pointer-events: none; 237 | z-index: 5896; 238 | color: #fefeff; 239 | background: 240 | url(https://assets.codepen.io/1480814/mm.png) bottom/80px auto no-repeat, 241 | url(https://assets.codepen.io/1480814/k.png) 50% 43%/110px auto no-repeat var(--b); 242 | } 243 | body:focus-within { 244 | cursor: none; 245 | } 246 | body:focus-within b:before { 247 | opacity: 0; 248 | } 249 | body:focus-within m { 250 | opacity: 1; 251 | } 252 | body:focus-within r { 253 | visibility: visible; 254 | } 255 | body:focus-within r:after { 256 | animation-play-state: running; 257 | } 258 | html { 259 | font-family: 'Retro Mario', sans serif; 260 | min-height:100vh; 261 | overflow: hidden; 262 | display: grid; 263 | --c1: #954b0c; 264 | --c2: #000; 265 | --b: #6185f8; 266 | --g:conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0); 267 | background: 268 | var(--g) 50% 100%, 269 | var(--g) calc(50% + #{$s/2}) calc(100% + #{$s/2}) 270 | var(--c2); 271 | background-size: $s $s; 272 | } 273 | html:before { 274 | content: "Super CSS Mario II"; 275 | position: absolute; 276 | inset: auto 0 ($m + 3)*$s; 277 | width: fit-content; 278 | margin: auto; 279 | color: #ffccc5; 280 | font-size: 50px; 281 | padding: 10px 25px; 282 | background: #994e00; 283 | text-shadow: 5px 5px #000; 284 | border: 3px solid; 285 | } 286 | @media (width < ($n + 1)*$s), (height < ($m + 4)*$s) { 287 | html:after { 288 | content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!"; 289 | white-space: pre-wrap; 290 | background: var(--b); 291 | position: absolute; 292 | inset: 0; 293 | z-index: calc(infinity); 294 | display: grid; 295 | place-content: center; 296 | text-align: center; 297 | font-size: 40px; 298 | padding: 40px; 299 | color: #fff; 300 | } 301 | } 302 | @supports not (animation-timeline: scroll()) { 303 | html:after { 304 | content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)"; 305 | white-space: pre-wrap; 306 | background: var(--b); 307 | position: absolute; 308 | inset: 0; 309 | z-index: calc(infinity); 310 | display: grid; 311 | place-content: center; 312 | text-align: center; 313 | font-size: 40px; 314 | padding: 40px; 315 | color: #fff; 316 | } 317 | } -------------------------------------------------------------------------------- /puzzle-v2/style.css: -------------------------------------------------------------------------------- 1 | g { 2 | --s: 70px; 3 | /* size of the puzzle */ 4 | --r: 12px; 5 | display: grid; 6 | width: fit-content; 7 | border: 1px solid; 8 | margin: auto; 9 | grid: auto-flow var(--s)/repeat(5, var(--s)); 10 | } 11 | 12 | g:before { 13 | content: "Original Image"; 14 | color: #fff; 15 | font-size: 25px; 16 | font-weight: bold; 17 | text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; 18 | position: fixed; 19 | top: 10px; 20 | left: 10px; 21 | width: calc(5*var(--s)*0.6); 22 | aspect-ratio: 1; 23 | -webkit-mask: repeating-linear-gradient(-45deg, #000 0 10%, #000d 0 20%); 24 | background: var(--i) 0/100% 100%; 25 | display: grid; 26 | place-content: center; 27 | } 28 | 29 | z { 30 | display: grid; 31 | position: relative; 32 | pointer-events: none; 33 | outline: 1px dashed; 34 | } 35 | 36 | a { 37 | grid-area: 1/1; 38 | width: 0; 39 | transition: 0s 0.2s; 40 | pointer-events: initial; 41 | } 42 | 43 | b { 44 | grid-area: 1/1; 45 | z-index: 2; 46 | display: grid; 47 | filter: drop-shadow(0 0 2px red) drop-shadow(0 0 2px red); 48 | cursor: grab; 49 | pointer-events: initial; 50 | height: calc(100% + var(--r)); 51 | width: calc(100% + var(--r)); 52 | place-self: start end; 53 | --m: 54 | radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0/100% var(--r) no-repeat, 55 | radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#000) var(--r) 50%/100% calc(100% - 2*var(--r)) no-repeat, 56 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 57 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000); 58 | } 59 | 60 | b:before { 61 | content: ""; 62 | background: var(--i) 0/calc(5*var(--s)) calc(5*var(--s)); 63 | -webkit-mask: var(--m); 64 | mask: var(--m); 65 | } 66 | 67 | z:first-child b { 68 | height: calc(100% + var(--r)); 69 | width: 100%; 70 | --m: 71 | radial-gradient(var(--r) at 100% calc(50% + var(--r)/2),#0000 98%,#000) 72 | 0 calc(-1*var(--r)) no-repeat, 73 | radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 98%,#0000) ; 74 | } 75 | 76 | z:nth-child(-n+4):not(:first-child) b { 77 | place-self: start end; 78 | height: calc(100% + var(--r)); 79 | width: calc(100% + var(--r)); 80 | --m: 81 | radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% + var(--r)/2),#0000 98%,#000) 82 | var(--r) calc(-1*var(--r)) no-repeat, 83 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 84 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) ; 85 | } 86 | 87 | z:nth-child(5) b { 88 | place-self: start end; 89 | height: calc(100% + var(--r)); 90 | width: calc(100% + var(--r)); 91 | --m: 92 | linear-gradient(#000 0 0) var(--r) calc(-1*var(--r)) no-repeat, 93 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 94 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) ; 95 | } 96 | 97 | z:nth-child(5n+1):not(:first-child):not(:nth-last-child(5)) b { 98 | height: calc(100% + var(--r)); 99 | width: 100%; 100 | --m: 101 | radial-gradient(var(--r) at 100% calc(50% - var(--r)/2),#0000 98%,#000) 50%/ 100% calc(100% - 2*var(--r)) no-repeat, 102 | radial-gradient(var(--r) at 50% 0,#0000 98%,#000) 0 0/ 100% var(--r) no-repeat, 103 | radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 98%,#0000) ; 104 | } 105 | 106 | z:nth-last-child(5) b { 107 | height: 100%; 108 | width: 100%; 109 | --m: 110 | radial-gradient(var(--r) at 100% calc(50% - var(--r)),#0000 98%,#000) 0 var(--r) no-repeat, 111 | radial-gradient(var(--r) at 50% 0,#0000 98%,#000) 0 0/ 100% var(--r) no-repeat; 112 | } 113 | 114 | z:nth-child(5n):not(:nth-child(5)):not(:last-child) b { 115 | place-self: start end; 116 | height: calc(100% + var(--r)); 117 | width: calc(100% + var(--r)); 118 | --m: 119 | radial-gradient(var(--r) at calc(50% - var(--r)/2) var(--r),#0000 98%,#000) var(--r) calc(-1*var(--r)) no-repeat, 120 | radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),#000 98%,#0000), 121 | radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),#000 98%,#0000) ; 122 | } 123 | 124 | z:last-child b { 125 | place-self: end; 126 | height: 100%; 127 | width: calc(100% + var(--r)); 128 | --m: 129 | radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0 no-repeat, 130 | radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000) ; 131 | } 132 | 133 | z:nth-last-child(-n+4):not(:last-child) b { 134 | place-self: end; 135 | height: 100%; 136 | width: calc(100% + var(--r)); 137 | --m: 138 | radial-gradient(var(--r) at calc(50% - var(--r)/2) 0,#0000 98%,#000) var(--r) 0/100% var(--r) no-repeat, 139 | radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#000) var(--r) 100%/100% calc(100% - var(--r)) no-repeat, 140 | radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000) ; 141 | } 142 | 143 | z:nth-of-type(1) b { 144 | transform: translate(200%, 200%) rotate(63deg) translate(422%) rotate(-60deg); 145 | } 146 | 147 | z:nth-of-type(1) b:before { 148 | background-position: 0% 0%; 149 | } 150 | 151 | z:nth-of-type(2) b { 152 | transform: translate(100%, 200%) rotate(67deg) translate(449%) rotate(-58deg); 153 | } 154 | 155 | z:nth-of-type(2) b:before { 156 | background-position: 25% 0%; 157 | } 158 | 159 | z:nth-of-type(3) b { 160 | transform: translate(0%, 200%) rotate(86deg) translate(412%) rotate(-81deg); 161 | } 162 | 163 | z:nth-of-type(3) b:before { 164 | background-position: 50% 0%; 165 | } 166 | 167 | z:nth-of-type(4) b { 168 | transform: translate(-100%, 200%) rotate(93deg) translate(403%) rotate(-98deg); 169 | } 170 | 171 | z:nth-of-type(4) b:before { 172 | background-position: 75% 0%; 173 | } 174 | 175 | z:nth-of-type(5) b { 176 | transform: translate(-200%, 200%) rotate(68deg) translate(404%) rotate(-67deg); 177 | } 178 | 179 | z:nth-of-type(5) b:before { 180 | background-position: 100% 0%; 181 | } 182 | 183 | z:nth-of-type(6) b { 184 | transform: translate(200%, 100%) rotate(54deg) translate(433%) rotate(-44deg); 185 | } 186 | 187 | z:nth-of-type(6) b:before { 188 | background-position: 0% 25%; 189 | } 190 | 191 | z:nth-of-type(7) b { 192 | transform: translate(100%, 100%) rotate(101deg) translate(470%) rotate(-98deg); 193 | } 194 | 195 | z:nth-of-type(7) b:before { 196 | background-position: 25% 25%; 197 | } 198 | 199 | z:nth-of-type(8) b { 200 | transform: translate(0%, 100%) rotate(93deg) translate(444%) rotate(-85deg); 201 | } 202 | 203 | z:nth-of-type(8) b:before { 204 | background-position: 50% 25%; 205 | } 206 | 207 | z:nth-of-type(9) b { 208 | transform: translate(-100%, 100%) rotate(3deg) translate(465%) rotate(0deg); 209 | } 210 | 211 | z:nth-of-type(9) b:before { 212 | background-position: 75% 25%; 213 | } 214 | 215 | z:nth-of-type(10) b { 216 | transform: translate(-200%, 100%) rotate(119deg) translate(448%) rotate(-112deg); 217 | } 218 | 219 | z:nth-of-type(10) b:before { 220 | background-position: 100% 25%; 221 | } 222 | 223 | z:nth-of-type(11) b { 224 | transform: translate(200%, 0%) rotate(22deg) translate(414%) rotate(-26deg); 225 | } 226 | 227 | z:nth-of-type(11) b:before { 228 | background-position: 0% 50%; 229 | } 230 | 231 | z:nth-of-type(12) b { 232 | transform: translate(100%, 0%) rotate(68deg) translate(401%) rotate(-63deg); 233 | } 234 | 235 | z:nth-of-type(12) b:before { 236 | background-position: 25% 50%; 237 | } 238 | 239 | z:nth-of-type(13) b { 240 | transform: translate(0%, 0%) rotate(126deg) translate(458%) rotate(-123deg); 241 | } 242 | 243 | z:nth-of-type(13) b:before { 244 | background-position: 50% 50%; 245 | } 246 | 247 | z:nth-of-type(14) b { 248 | transform: translate(-100%, 0%) rotate(37deg) translate(435%) rotate(-46deg); 249 | } 250 | 251 | z:nth-of-type(14) b:before { 252 | background-position: 75% 50%; 253 | } 254 | 255 | z:nth-of-type(15) b { 256 | transform: translate(-200%, 0%) rotate(10deg) translate(404%) rotate(-19deg); 257 | } 258 | 259 | z:nth-of-type(15) b:before { 260 | background-position: 100% 50%; 261 | } 262 | 263 | z:nth-of-type(16) b { 264 | transform: translate(200%, -100%) rotate(118deg) translate(461%) rotate(-111deg); 265 | } 266 | 267 | z:nth-of-type(16) b:before { 268 | background-position: 0% 75%; 269 | } 270 | 271 | z:nth-of-type(17) b { 272 | transform: translate(100%, -100%) rotate(60deg) translate(419%) rotate(-66deg); 273 | } 274 | 275 | z:nth-of-type(17) b:before { 276 | background-position: 25% 75%; 277 | } 278 | 279 | z:nth-of-type(18) b { 280 | transform: translate(0%, -100%) rotate(167deg) translate(423%) rotate(-170deg); 281 | } 282 | 283 | z:nth-of-type(18) b:before { 284 | background-position: 50% 75%; 285 | } 286 | 287 | z:nth-of-type(19) b { 288 | transform: translate(-100%, -100%) rotate(51deg) translate(444%) rotate(-50deg); 289 | } 290 | 291 | z:nth-of-type(19) b:before { 292 | background-position: 75% 75%; 293 | } 294 | 295 | z:nth-of-type(20) b { 296 | transform: translate(-200%, -100%) rotate(144deg) translate(454%) rotate(-151deg); 297 | } 298 | 299 | z:nth-of-type(20) b:before { 300 | background-position: 100% 75%; 301 | } 302 | 303 | z:nth-of-type(21) b { 304 | transform: translate(200%, -200%) rotate(88deg) translate(461%) rotate(-84deg); 305 | } 306 | 307 | z:nth-of-type(21) b:before { 308 | background-position: 0% 100%; 309 | } 310 | 311 | z:nth-of-type(22) b { 312 | transform: translate(100%, -200%) rotate(33deg) translate(453%) rotate(-36deg); 313 | } 314 | 315 | z:nth-of-type(22) b:before { 316 | background-position: 25% 100%; 317 | } 318 | 319 | z:nth-of-type(23) b { 320 | transform: translate(0%, -200%) rotate(9deg) translate(411%) rotate(-2deg); 321 | } 322 | 323 | z:nth-of-type(23) b:before { 324 | background-position: 50% 100%; 325 | } 326 | 327 | z:nth-of-type(24) b { 328 | transform: translate(-100%, -200%) rotate(67deg) translate(434%) rotate(-67deg); 329 | } 330 | 331 | z:nth-of-type(24) b:before { 332 | background-position: 75% 100%; 333 | } 334 | 335 | z:nth-of-type(25) b { 336 | transform: translate(-200%, -200%) rotate(179deg) translate(450%) rotate(-185deg); 337 | } 338 | 339 | z:nth-of-type(25) b:before { 340 | background-position: 100% 100%; 341 | } 342 | 343 | z b { 344 | transition: 9999s 9999s; 345 | } 346 | 347 | z:active a { 348 | width: 100%; 349 | transition: 0s; 350 | } 351 | 352 | z a:hover ~ b { 353 | transform: translate(0); 354 | filter: none; 355 | transition: 0s; 356 | } 357 | 358 | body { 359 | background: #547980; 360 | color: #fff; 361 | font-family: system-ui, sans-serif; 362 | } 363 | 364 | h1 { 365 | font-size: 2rem; 366 | margin: 0; 367 | text-align: center; 368 | } 369 | 370 | p { 371 | font-size: 0.8rem; 372 | text-align: center; 373 | } 374 | 375 | [data-ea-publisher] { 376 | position: absolute; 377 | top: 0; 378 | right: 0; 379 | z-index: 999; 380 | } 381 | [data-ea-publisher].loaded .ea-content, 382 | [data-ea-type].loaded .ea-content { 383 | background: rgb(255 255 255 / 80%)!important; 384 | } 385 | @media (max-width: 1024px) { 386 | [data-ea-publisher] { 387 | display: none!important; 388 | } 389 | } 390 | -------------------------------------------------------------------------------- /gem-catcher/style.css: -------------------------------------------------------------------------------- 1 | grid { 2 | display: grid; 3 | grid: 300px/400px; 4 | margin: 10px auto 0; 5 | position: relative; 6 | cursor: pointer; 7 | } 8 | grid > * { 9 | grid-area:1/1; 10 | } 11 | w:nth-of-type(1) { 12 | width:80%; 13 | height:20px; 14 | margin:0 0 auto auto; 15 | } 16 | w:nth-of-type(2) { 17 | width:80%; 18 | height:20px; 19 | margin:auto 0 0 auto; 20 | } 21 | w:nth-of-type(3) { 22 | width:20px; 23 | height:100%; 24 | margin-left:auto; 25 | } 26 | w:nth-of-type(4) { 27 | width:20px; 28 | height:40%; 29 | margin:0 auto auto 15%; 30 | } 31 | w:nth-of-type(5) { 32 | width:20px; 33 | height:40%; 34 | margin: auto auto 0 15%; 35 | } 36 | w:nth-of-type(6) { 37 | width: 15%; 38 | height: 20px; 39 | margin: 0; 40 | } 41 | w:nth-of-type(7) { 42 | width: 20%; 43 | height: 20px; 44 | margin: auto auto 28% 0; 45 | } 46 | w:nth-of-type(8) { 47 | width: 20px; 48 | height: 40%; 49 | margin: 15% 0 0 0; 50 | } 51 | s { 52 | aspect-ratio: 1; 53 | height: calc(100% - 40px); 54 | margin: auto 40px auto auto; 55 | display: grid; 56 | pointer-events: none; 57 | border-radius: 50%; 58 | clip-path: polygon(0 0,100% 100%,0 100%,100% 0); 59 | animation: r 6s infinite linear; 60 | } 61 | @keyframes r { 62 | to {transform:rotate(1turn)} 63 | } 64 | s:nth-of-type(2) { 65 | height: calc(100% - 80px); 66 | margin: auto 60px auto auto; 67 | animation: r 4s infinite linear reverse; 68 | } 69 | s:nth-of-type(3) { 70 | height: calc(100% - 120px); 71 | margin: auto 80px auto auto; 72 | animation: r 5s infinite alternate; 73 | } 74 | s:nth-of-type(4) { 75 | height: calc(100% - 160px); 76 | margin: auto 100px auto auto; 77 | animation: r 6s infinite alternate cubic-bezier(.85,.7,.95,1.5); 78 | } 79 | s:before { 80 | content: ""; 81 | background: grey; 82 | pointer-events: initial; 83 | clip-path: polygon(100% 50%, 99.35% 58.02%, 97.43% 65.83%, 94.27% 73.24%, 89.97% 80.04%, 84.64% 86.06%, 78.4% 91.15%, 71.43% 95.17%, 63.91% 98.03%, 56.03% 99.64%, 47.99% 99.96%, 40% 98.99%, 32.27% 96.75%, 25% 93.3%, 18.38% 88.73%, 12.57% 83.16%, 7.74% 76.72%, 4% 69.6%, 1.45% 61.97%, 0.16% 54.02%, 0.16% 45.98%, 1.45% 38.03%, 4% 30.4%, 7.74% 23.28%, 12.57% 16.84%, 18.38% 11.27%, 25% 6.7%, 32.27% 3.25%, 40% 1.01%, 47.99% 0.04%, 56.03% 0.36%, 63.91% 1.97%, 71.43% 4.83%, 78.4% 8.85%, 84.64% 13.94%, 89.97% 19.96%, 94.27% 26.76%, 97.43% 34.17%, 99.35% 41.98%, 100% 50%, calc(99.35% - 19.74px) calc(41.98% - -3.21px), calc(97.43% - 18.97px) calc(34.17% - -6.33px), calc(94.27% - 17.71px) calc(26.76% - -9.29px), calc(89.97% - 15.99px) calc(19.96% - -12.01px), calc(84.64% - 13.85px) calc(13.94% - -14.42px), calc(78.4% - 11.36px) calc(8.85% - -16.46px), calc(71.43% - 8.57px) calc(4.83% - -18.07px), calc(63.91% - 5.56px) calc(1.97% - -19.21px), calc(56.03% - 2.41px) calc(0.36% - -19.85px), calc(47.99% - -0.81px) calc(0.04% - -19.98px), calc(40% - -4px) calc(1.01% - -19.6px), calc(32.27% - -7.09px) calc(3.25% - -18.7px), calc(25% - -10px) calc(6.7% - -17.32px), calc(18.38% - -12.65px) calc(11.27% - -15.49px), calc(12.57% - -14.97px) calc(16.84% - -13.26px), calc(7.74% - -16.9px) calc(23.28% - -10.69px), calc(4% - -18.4px) calc(30.4% - -7.84px), calc(1.45% - -19.42px) calc(38.03% - -4.79px), calc(0.16% - -19.94px) calc(45.98% - -1.61px), calc(0.16% - -19.94px) calc(54.02% - 1.61px), calc(1.45% - -19.42px) calc(61.97% - 4.79px), calc(4% - -18.4px) calc(69.6% - 7.84px), calc(7.74% - -16.9px) calc(76.72% - 10.69px), calc(12.57% - -14.97px) calc(83.16% - 13.26px), calc(18.38% - -12.65px) calc(88.73% - 15.49px), calc(25% - -10px) calc(93.3% - 17.32px), calc(32.27% - -7.09px) calc(96.75% - 18.7px), calc(40% - -4px) calc(98.99% - 19.6px), calc(47.99% - -0.81px) calc(99.96% - 19.98px), calc(56.03% - 2.41px) calc(99.64% - 19.85px), calc(63.91% - 5.56px) calc(98.03% - 19.21px), calc(71.43% - 8.57px) calc(95.17% - 18.07px), calc(78.4% - 11.36px) calc(91.15% - 16.46px), calc(84.64% - 13.85px) calc(86.06% - 14.42px), calc(89.97% - 15.99px) calc(80.04% - 12.01px), calc(94.27% - 17.71px) calc(73.24% - 9.29px), calc(97.43% - 18.97px) calc(65.83% - 6.33px), calc(99.35% - 19.74px) calc(58.02% - 3.21px), calc(100% - 20px) calc(50% - 0px), calc(99.35% - 19.74px) calc(41.98% - -3.21px)); 84 | } 85 | g { 86 | width: 50px; 87 | aspect-ratio: 1; 88 | margin: auto; 89 | transform: translate(30px); 90 | background: 91 | conic-gradient(from 152deg at top,#ccf2fc 55deg,#0000 0) top/100% 30% no-repeat, 92 | conic-gradient(from -36deg at bottom,#104d87 22deg, #2de8f4 0 50deg, #0095d9 0 72deg,#0000 0) bottom/100% 70% no-repeat, 93 | linear-gradient(90deg,#0597de 50%,#2ed7f2 0) top/100% 30% no-repeat; 94 | clip-path: polygon(0 30%,21% 0,79% 0,100% 30%,100% 100%,0 100%); 95 | transition: 9999s 9999s; 96 | } 97 | result { 98 | position: absolute; 99 | inset: 0 0 0 100%; 100 | display:grid; 101 | place-content: center; 102 | font-size: 70px; 103 | color: #00b300; 104 | overflow: hidden; 105 | background: #fff9; 106 | transition: 9999s 9999s; 107 | } 108 | result:before { 109 | content: "Bravo!"; 110 | } 111 | g:hover { 112 | background-size: 0 0; 113 | transition: 0s; 114 | } 115 | g:hover ~ result, 116 | result:hover{ 117 | inset: 0 0 0 0; 118 | transition: 0s; 119 | } 120 | 121 | w { 122 | background: grey; 123 | } 124 | w::before { 125 | content: "Game Over"; 126 | position: fixed; 127 | inset: 0 0 100%; 128 | z-index: 5695845; 129 | background: #000; 130 | color: red; 131 | font-size: 80px; 132 | display: grid; 133 | place-content: center; 134 | overflow: hidden; 135 | transition: 99999s; 136 | } 137 | w::after { 138 | content: "Refresh the page to start a new game"; 139 | position: fixed; 140 | inset: 0 0 100%; 141 | z-index: 5695845; 142 | color: #fff; 143 | font-size: 30px; 144 | display: grid; 145 | place-content: end center; 146 | overflow: hidden; 147 | transition: 99999s; 148 | } 149 | s:hover ~ w::before, 150 | s:hover ~ w::after, 151 | w:hover::before, 152 | w:hover::after{ 153 | inset: 0; 154 | transition: 0s; 155 | } 156 | 157 | /* The time from https://codepen.io/t_afif/pen/ExbRBPN*/ 158 | @property --n{ 159 | syntax: ''; 160 | inherits: true; 161 | initial-value: 0; 162 | } 163 | @property --t{ 164 | syntax: ''; 165 | inherits: true; 166 | initial-value: #000; 167 | } 168 | @property --r{ 169 | syntax: ''; 170 | inherits: true; 171 | initial-value: #000; 172 | } 173 | @property --b{ 174 | syntax: ''; 175 | inherits: true; 176 | initial-value: #000; 177 | } 178 | @property --l{ 179 | syntax: ''; 180 | inherits: true; 181 | initial-value: #000; 182 | } 183 | 184 | d { 185 | width: 40px; /* size */ 186 | display: inline-grid; 187 | aspect-ratio: .55; 188 | } 189 | d:before, 190 | d:after { 191 | content: ""; 192 | padding: 20%; 193 | background: 194 | conic-gradient(from -45deg at 50% 45%,var(--t) 90deg,#0000 0), 195 | conic-gradient(from 45deg at 55% 50%,var(--r) 90deg,#0000 0), 196 | conic-gradient(from 135deg at 50% 55%,var(--b) 90deg,#0000 0), 197 | conic-gradient(from 225deg at 45% 50%,var(--l) 90deg,#0000 0); 198 | --m: conic-gradient(#000 0 0) content-box,conic-gradient(#000 0 0); 199 | -webkit-mask: var(--m); 200 | mask: var(--m); 201 | -webkit-mask-composite: xor; 202 | mask-composite: exclude; 203 | clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); 204 | transition:--t .45s,--l .45s,--b .45s,--r .45s; 205 | } 206 | d:after { 207 | margin-top: -20%; 208 | --t: #0000; 209 | } 210 | d { 211 | --1:(var(--n) - 1)*(var(--n) - 1); 212 | --2:(var(--n) - 2)*(var(--n) - 2); 213 | --3:(var(--n) - 3)*(var(--n) - 3); 214 | --4:(var(--n) - 4)*(var(--n) - 4); 215 | --5:(var(--n) - 5)*(var(--n) - 5); 216 | --6:(var(--n) - 6)*(var(--n) - 6); 217 | --7:(var(--n) - 7)*(var(--n) - 7); 218 | --8:(var(--n) - 8)*(var(--n) - 8); 219 | --9:(var(--n) - 9)*(var(--n) - 9); 220 | } 221 | 222 | d:before { 223 | --t:rgb( 224 | clamp(30,var(--1)*var(--4)*999,250) 225 | clamp(30,var(--1)*var(--4)*999,250) 226 | 30); 227 | --r:rgb( 228 | clamp(30,var(--5)*var(--6)*999,250) 229 | clamp(30,var(--5)*var(--6)*999,250) 230 | 30); 231 | --b:rgb( 232 | clamp(30,var(--n)*var(--1)*var(--7)*999,250) 233 | clamp(30,var(--n)*var(--1)*var(--7)*999,250) 234 | 30); 235 | --l:rgb( 236 | clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250) 237 | clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250) 238 | 30); 239 | } 240 | d:after { 241 | --r:rgb( 242 | clamp(30,var(--2)*999,250) 243 | clamp(30,var(--2)*999,250) 244 | 30); 245 | --b:rgb( 246 | clamp(30,var(--1)*var(--4)*var(--7)*999,250) 247 | clamp(30,var(--1)*var(--4)*var(--7)*999,250) 248 | 30); 249 | --l:rgb( 250 | clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250) 251 | clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250) 252 | 30); 253 | } 254 | timer d:nth-of-type(1) {animation:d6 60s linear infinite} 255 | timer d:nth-of-type(2) {animation:d9 10s linear infinite} 256 | timer d:nth-of-type(3) {animation:d9 1s linear infinite;grid-column:4} 257 | timer d:nth-of-type(4) {animation:d9 .1s linear infinite} 258 | @keyframes d9 { 259 | 0%, 260 | 9.95%{--n:0} 261 | 10%, 262 | 19.95%{--n:1} 263 | 20%, 264 | 29.95%{--n:2} 265 | 30%, 266 | 39.95%{--n:3} 267 | 40%, 268 | 49.95%{--n:4} 269 | 50%, 270 | 59.95%{--n:5} 271 | 60%, 272 | 69.95%{--n:6} 273 | 70%, 274 | 79.95%{--n:7} 275 | 80%, 276 | 89.95%{--n:8} 277 | 90%, 278 | 99.95%{--n:9} 279 | } 280 | @keyframes d6 { 281 | 0%, 282 | 16.64%{--n:0} 283 | 16.67%, 284 | 33.30%{--n:1} 285 | 33.33%, 286 | 49.96%{--n:2} 287 | 50.00%, 288 | 66.63%{--n:3} 289 | 66.67%, 290 | 83.30%{--n:4} 291 | 83.33%, 292 | 99.97%{--n:5} 293 | } 294 | 295 | timer { 296 | position: absolute; 297 | display: grid; 298 | top: 50%; 299 | left: 100%; 300 | transform: translate(20%, -50%); 301 | grid-template-columns: 1fr 1fr 10px 1fr 1fr; 302 | grid-gap: 10px; 303 | pointer-events: none; 304 | background: 305 | linear-gradient(rgb(250 250 30) 0 0) 50% 30%/10px 10px no-repeat, 306 | linear-gradient(rgb(250 250 30) 0 0) 50% 70%/10px 10px no-repeat; 307 | } 308 | @media (max-width:900px) { 309 | timer { 310 | top: 100%; 311 | left: 50%; 312 | transform: translate(-50%, 10%); 313 | } 314 | } 315 | 316 | grid timer d:nth-child(n), 317 | grid result:hover ~ timer d:nth-child(n){ 318 | animation-play-state: paused; 319 | } 320 | grid:hover timer d:nth-child(n) { 321 | animation-play-state: running; 322 | } 323 | grid:hover timer { 324 | filter: hue-rotate(45deg); 325 | } 326 | 327 | body { 328 | min-height: 100vh; 329 | margin: 0; 330 | display: grid; 331 | place-content: start center; 332 | background: #000; 333 | color: #fff; 334 | font-family: system-ui, sans-serif; 335 | } 336 | h1,p { 337 | font-size: 2rem; 338 | text-align:center; 339 | } 340 | p { 341 | font-size:1.2rem; 342 | margin:0; 343 | } 344 | 345 | @supports (-moz-appearance:none) { 346 | d { 347 | font-size: 65px; 348 | font-weight: bold; 349 | font-family: sans-serif; 350 | color:rgb(250 250 30); 351 | } 352 | d:before { 353 | padding:0; 354 | -webkit-mask:none; 355 | clip-path:none; 356 | } 357 | d:after { 358 | content: none; 359 | } 360 | timer d:nth-of-type(1):before {animation:d6 60s linear infinite} 361 | timer d:nth-of-type(2):before {animation:d9 10s linear infinite} 362 | timer d:nth-of-type(3):before {animation:d9 1s linear infinite} 363 | timer d:nth-of-type(4):before {animation:d9 .1s linear infinite} 364 | @keyframes d9 { 365 | 0%, 366 | 9.95%{content:'0'} 367 | 10%, 368 | 19.95%{content:'1'} 369 | 20%, 370 | 29.95%{content:'2'} 371 | 30%, 372 | 39.95%{content:'3'} 373 | 40%, 374 | 49.95%{content:'4'} 375 | 50%, 376 | 59.95%{content:'5'} 377 | 60%, 378 | 69.95%{content:'6'} 379 | 70%, 380 | 79.95%{content:'7'} 381 | 80%, 382 | 89.95%{content:'8'} 383 | 90%, 384 | 99.95%{content:'9'} 385 | } 386 | @keyframes d6 { 387 | 0%, 388 | 16.64%{content:'0'} 389 | 16.67%, 390 | 33.30%{content:'1'} 391 | 33.33%, 392 | 49.96%{content:'2'} 393 | 50.00%, 394 | 66.63%{content:'3'} 395 | 66.67%, 396 | 83.30%{content:'4'} 397 | 83.33%, 398 | 99.97%{content:'5'} 399 | } 400 | grid timer d:nth-child(n):before, 401 | grid result:hover ~ timer d:nth-child(n):before{ 402 | animation-play-state: paused; 403 | } 404 | grid:hover timer d:nth-child(n):before { 405 | animation-play-state: running; 406 | } 407 | } -------------------------------------------------------------------------------- /coin-collector/style.css: -------------------------------------------------------------------------------- 1 | grid { 2 | display: grid; 3 | grid: repeat(8, 1fr)/repeat(10, 1fr); 4 | margin: 10px auto 0; 5 | position: relative; 6 | cursor: pointer; 7 | } 8 | 9 | c, w { 10 | width: 40px; 11 | aspect-ratio: 1; 12 | } 13 | 14 | c { 15 | background: radial-gradient(#f7a011 34%, #f8ce00 35% 51%, #0000 52%) 0/100% 100% no-repeat; 16 | transition: 999s 999s; 17 | } 18 | 19 | c:hover { 20 | background-size: 0 0; 21 | transition: 0s; 22 | } 23 | 24 | @property --c1 { 25 | syntax: ""; 26 | inherits: true; 27 | initial-value: 0; 28 | } 29 | c:nth-of-type(1) ~ result { 30 | --c1: 0; 31 | --s1: paused ; 32 | } 33 | 34 | c:nth-of-type(1):hover ~ result { 35 | --s1: running; 36 | } 37 | 38 | @keyframes c1 { 39 | to { 40 | --c1:1; 41 | } 42 | } 43 | @property --c2 { 44 | syntax: ""; 45 | inherits: true; 46 | initial-value: 0; 47 | } 48 | c:nth-of-type(2) ~ result { 49 | --c2: 0; 50 | --s2: paused ; 51 | } 52 | 53 | c:nth-of-type(2):hover ~ result { 54 | --s2: running; 55 | } 56 | 57 | @keyframes c2 { 58 | to { 59 | --c2:1; 60 | } 61 | } 62 | @property --c3 { 63 | syntax: ""; 64 | inherits: true; 65 | initial-value: 0; 66 | } 67 | c:nth-of-type(3) ~ result { 68 | --c3: 0; 69 | --s3: paused ; 70 | } 71 | 72 | c:nth-of-type(3):hover ~ result { 73 | --s3: running; 74 | } 75 | 76 | @keyframes c3 { 77 | to { 78 | --c3:1; 79 | } 80 | } 81 | @property --c4 { 82 | syntax: ""; 83 | inherits: true; 84 | initial-value: 0; 85 | } 86 | c:nth-of-type(4) ~ result { 87 | --c4: 0; 88 | --s4: paused ; 89 | } 90 | 91 | c:nth-of-type(4):hover ~ result { 92 | --s4: running; 93 | } 94 | 95 | @keyframes c4 { 96 | to { 97 | --c4:1; 98 | } 99 | } 100 | @property --c5 { 101 | syntax: ""; 102 | inherits: true; 103 | initial-value: 0; 104 | } 105 | c:nth-of-type(5) ~ result { 106 | --c5: 0; 107 | --s5: paused ; 108 | } 109 | 110 | c:nth-of-type(5):hover ~ result { 111 | --s5: running; 112 | } 113 | 114 | @keyframes c5 { 115 | to { 116 | --c5:1; 117 | } 118 | } 119 | @property --c6 { 120 | syntax: ""; 121 | inherits: true; 122 | initial-value: 0; 123 | } 124 | c:nth-of-type(6) ~ result { 125 | --c6: 0; 126 | --s6: paused ; 127 | } 128 | 129 | c:nth-of-type(6):hover ~ result { 130 | --s6: running; 131 | } 132 | 133 | @keyframes c6 { 134 | to { 135 | --c6:1; 136 | } 137 | } 138 | @property --c7 { 139 | syntax: ""; 140 | inherits: true; 141 | initial-value: 0; 142 | } 143 | c:nth-of-type(7) ~ result { 144 | --c7: 0; 145 | --s7: paused ; 146 | } 147 | 148 | c:nth-of-type(7):hover ~ result { 149 | --s7: running; 150 | } 151 | 152 | @keyframes c7 { 153 | to { 154 | --c7:1; 155 | } 156 | } 157 | @property --c8 { 158 | syntax: ""; 159 | inherits: true; 160 | initial-value: 0; 161 | } 162 | c:nth-of-type(8) ~ result { 163 | --c8: 0; 164 | --s8: paused ; 165 | } 166 | 167 | c:nth-of-type(8):hover ~ result { 168 | --s8: running; 169 | } 170 | 171 | @keyframes c8 { 172 | to { 173 | --c8:1; 174 | } 175 | } 176 | @property --c9 { 177 | syntax: ""; 178 | inherits: true; 179 | initial-value: 0; 180 | } 181 | c:nth-of-type(9) ~ result { 182 | --c9: 0; 183 | --s9: paused ; 184 | } 185 | 186 | c:nth-of-type(9):hover ~ result { 187 | --s9: running; 188 | } 189 | 190 | @keyframes c9 { 191 | to { 192 | --c9:1; 193 | } 194 | } 195 | @property --c10 { 196 | syntax: ""; 197 | inherits: true; 198 | initial-value: 0; 199 | } 200 | c:nth-of-type(10) ~ result { 201 | --c10: 0; 202 | --s10: paused ; 203 | } 204 | 205 | c:nth-of-type(10):hover ~ result { 206 | --s10: running; 207 | } 208 | 209 | @keyframes c10 { 210 | to { 211 | --c10:1; 212 | } 213 | } 214 | @property --c11 { 215 | syntax: ""; 216 | inherits: true; 217 | initial-value: 0; 218 | } 219 | c:nth-of-type(11) ~ result { 220 | --c11: 0; 221 | --s11: paused ; 222 | } 223 | 224 | c:nth-of-type(11):hover ~ result { 225 | --s11: running; 226 | } 227 | 228 | @keyframes c11 { 229 | to { 230 | --c11:1; 231 | } 232 | } 233 | @property --c12 { 234 | syntax: ""; 235 | inherits: true; 236 | initial-value: 0; 237 | } 238 | c:nth-of-type(12) ~ result { 239 | --c12: 0; 240 | --s12: paused ; 241 | } 242 | 243 | c:nth-of-type(12):hover ~ result { 244 | --s12: running; 245 | } 246 | 247 | @keyframes c12 { 248 | to { 249 | --c12:1; 250 | } 251 | } 252 | @property --c13 { 253 | syntax: ""; 254 | inherits: true; 255 | initial-value: 0; 256 | } 257 | c:nth-of-type(13) ~ result { 258 | --c13: 0; 259 | --s13: paused ; 260 | } 261 | 262 | c:nth-of-type(13):hover ~ result { 263 | --s13: running; 264 | } 265 | 266 | @keyframes c13 { 267 | to { 268 | --c13:1; 269 | } 270 | } 271 | @property --c14 { 272 | syntax: ""; 273 | inherits: true; 274 | initial-value: 0; 275 | } 276 | c:nth-of-type(14) ~ result { 277 | --c14: 0; 278 | --s14: paused ; 279 | } 280 | 281 | c:nth-of-type(14):hover ~ result { 282 | --s14: running; 283 | } 284 | 285 | @keyframes c14 { 286 | to { 287 | --c14:1; 288 | } 289 | } 290 | @property --c15 { 291 | syntax: ""; 292 | inherits: true; 293 | initial-value: 0; 294 | } 295 | c:nth-of-type(15) ~ result { 296 | --c15: 0; 297 | --s15: paused ; 298 | } 299 | 300 | c:nth-of-type(15):hover ~ result { 301 | --s15: running; 302 | } 303 | 304 | @keyframes c15 { 305 | to { 306 | --c15:1; 307 | } 308 | } 309 | @property --c16 { 310 | syntax: ""; 311 | inherits: true; 312 | initial-value: 0; 313 | } 314 | c:nth-of-type(16) ~ result { 315 | --c16: 0; 316 | --s16: paused ; 317 | } 318 | 319 | c:nth-of-type(16):hover ~ result { 320 | --s16: running; 321 | } 322 | 323 | @keyframes c16 { 324 | to { 325 | --c16:1; 326 | } 327 | } 328 | @property --c17 { 329 | syntax: ""; 330 | inherits: true; 331 | initial-value: 0; 332 | } 333 | c:nth-of-type(17) ~ result { 334 | --c17: 0; 335 | --s17: paused ; 336 | } 337 | 338 | c:nth-of-type(17):hover ~ result { 339 | --s17: running; 340 | } 341 | 342 | @keyframes c17 { 343 | to { 344 | --c17:1; 345 | } 346 | } 347 | @property --c18 { 348 | syntax: ""; 349 | inherits: true; 350 | initial-value: 0; 351 | } 352 | c:nth-of-type(18) ~ result { 353 | --c18: 0; 354 | --s18: paused ; 355 | } 356 | 357 | c:nth-of-type(18):hover ~ result { 358 | --s18: running; 359 | } 360 | 361 | @keyframes c18 { 362 | to { 363 | --c18:1; 364 | } 365 | } 366 | @property --c19 { 367 | syntax: ""; 368 | inherits: true; 369 | initial-value: 0; 370 | } 371 | c:nth-of-type(19) ~ result { 372 | --c19: 0; 373 | --s19: paused ; 374 | } 375 | 376 | c:nth-of-type(19):hover ~ result { 377 | --s19: running; 378 | } 379 | 380 | @keyframes c19 { 381 | to { 382 | --c19:1; 383 | } 384 | } 385 | @property --c20 { 386 | syntax: ""; 387 | inherits: true; 388 | initial-value: 0; 389 | } 390 | c:nth-of-type(20) ~ result { 391 | --c20: 0; 392 | --s20: paused ; 393 | } 394 | 395 | c:nth-of-type(20):hover ~ result { 396 | --s20: running; 397 | } 398 | 399 | @keyframes c20 { 400 | to { 401 | --c20:1; 402 | } 403 | } 404 | @property --c21 { 405 | syntax: ""; 406 | inherits: true; 407 | initial-value: 0; 408 | } 409 | c:nth-of-type(21) ~ result { 410 | --c21: 0; 411 | --s21: paused ; 412 | } 413 | 414 | c:nth-of-type(21):hover ~ result { 415 | --s21: running; 416 | } 417 | 418 | @keyframes c21 { 419 | to { 420 | --c21:1; 421 | } 422 | } 423 | @property --c22 { 424 | syntax: ""; 425 | inherits: true; 426 | initial-value: 0; 427 | } 428 | c:nth-of-type(22) ~ result { 429 | --c22: 0; 430 | --s22: paused ; 431 | } 432 | 433 | c:nth-of-type(22):hover ~ result { 434 | --s22: running; 435 | } 436 | 437 | @keyframes c22 { 438 | to { 439 | --c22:1; 440 | } 441 | } 442 | @property --c23 { 443 | syntax: ""; 444 | inherits: true; 445 | initial-value: 0; 446 | } 447 | c:nth-of-type(23) ~ result { 448 | --c23: 0; 449 | --s23: paused ; 450 | } 451 | 452 | c:nth-of-type(23):hover ~ result { 453 | --s23: running; 454 | } 455 | 456 | @keyframes c23 { 457 | to { 458 | --c23:1; 459 | } 460 | } 461 | @property --c24 { 462 | syntax: ""; 463 | inherits: true; 464 | initial-value: 0; 465 | } 466 | c:nth-of-type(24) ~ result { 467 | --c24: 0; 468 | --s24: paused ; 469 | } 470 | 471 | c:nth-of-type(24):hover ~ result { 472 | --s24: running; 473 | } 474 | 475 | @keyframes c24 { 476 | to { 477 | --c24:1; 478 | } 479 | } 480 | @property --c25 { 481 | syntax: ""; 482 | inherits: true; 483 | initial-value: 0; 484 | } 485 | c:nth-of-type(25) ~ result { 486 | --c25: 0; 487 | --s25: paused ; 488 | } 489 | 490 | c:nth-of-type(25):hover ~ result { 491 | --s25: running; 492 | } 493 | 494 | @keyframes c25 { 495 | to { 496 | --c25:1; 497 | } 498 | } 499 | @property --c26 { 500 | syntax: ""; 501 | inherits: true; 502 | initial-value: 0; 503 | } 504 | c:nth-of-type(26) ~ result { 505 | --c26: 0; 506 | --s26: paused ; 507 | } 508 | 509 | c:nth-of-type(26):hover ~ result { 510 | --s26: running; 511 | } 512 | 513 | @keyframes c26 { 514 | to { 515 | --c26:1; 516 | } 517 | } 518 | @property --c27 { 519 | syntax: ""; 520 | inherits: true; 521 | initial-value: 0; 522 | } 523 | c:nth-of-type(27) ~ result { 524 | --c27: 0; 525 | --s27: paused ; 526 | } 527 | 528 | c:nth-of-type(27):hover ~ result { 529 | --s27: running; 530 | } 531 | 532 | @keyframes c27 { 533 | to { 534 | --c27:1; 535 | } 536 | } 537 | @property --c28 { 538 | syntax: ""; 539 | inherits: true; 540 | initial-value: 0; 541 | } 542 | c:nth-of-type(28) ~ result { 543 | --c28: 0; 544 | --s28: paused ; 545 | } 546 | 547 | c:nth-of-type(28):hover ~ result { 548 | --s28: running; 549 | } 550 | 551 | @keyframes c28 { 552 | to { 553 | --c28:1; 554 | } 555 | } 556 | @property --c29 { 557 | syntax: ""; 558 | inherits: true; 559 | initial-value: 0; 560 | } 561 | c:nth-of-type(29) ~ result { 562 | --c29: 0; 563 | --s29: paused ; 564 | } 565 | 566 | c:nth-of-type(29):hover ~ result { 567 | --s29: running; 568 | } 569 | 570 | @keyframes c29 { 571 | to { 572 | --c29:1; 573 | } 574 | } 575 | @property --c30 { 576 | syntax: ""; 577 | inherits: true; 578 | initial-value: 0; 579 | } 580 | c:nth-of-type(30) ~ result { 581 | --c30: 0; 582 | --s30: paused ; 583 | } 584 | 585 | c:nth-of-type(30):hover ~ result { 586 | --s30: running; 587 | } 588 | 589 | @keyframes c30 { 590 | to { 591 | --c30:1; 592 | } 593 | } 594 | @property --c31 { 595 | syntax: ""; 596 | inherits: true; 597 | initial-value: 0; 598 | } 599 | c:nth-of-type(31) ~ result { 600 | --c31: 0; 601 | --s31: paused ; 602 | } 603 | 604 | c:nth-of-type(31):hover ~ result { 605 | --s31: running; 606 | } 607 | 608 | @keyframes c31 { 609 | to { 610 | --c31:1; 611 | } 612 | } 613 | @property --c32 { 614 | syntax: ""; 615 | inherits: true; 616 | initial-value: 0; 617 | } 618 | c:nth-of-type(32) ~ result { 619 | --c32: 0; 620 | --s32: paused ; 621 | } 622 | 623 | c:nth-of-type(32):hover ~ result { 624 | --s32: running; 625 | } 626 | 627 | @keyframes c32 { 628 | to { 629 | --c32:1; 630 | } 631 | } 632 | @property --c33 { 633 | syntax: ""; 634 | inherits: true; 635 | initial-value: 0; 636 | } 637 | c:nth-of-type(33) ~ result { 638 | --c33: 0; 639 | --s33: paused ; 640 | } 641 | 642 | c:nth-of-type(33):hover ~ result { 643 | --s33: running; 644 | } 645 | 646 | @keyframes c33 { 647 | to { 648 | --c33:1; 649 | } 650 | } 651 | @property --c34 { 652 | syntax: ""; 653 | inherits: true; 654 | initial-value: 0; 655 | } 656 | c:nth-of-type(34) ~ result { 657 | --c34: 0; 658 | --s34: paused ; 659 | } 660 | 661 | c:nth-of-type(34):hover ~ result { 662 | --s34: running; 663 | } 664 | 665 | @keyframes c34 { 666 | to { 667 | --c34:1; 668 | } 669 | } 670 | @property --c35 { 671 | syntax: ""; 672 | inherits: true; 673 | initial-value: 0; 674 | } 675 | c:nth-of-type(35) ~ result { 676 | --c35: 0; 677 | --s35: paused ; 678 | } 679 | 680 | c:nth-of-type(35):hover ~ result { 681 | --s35: running; 682 | } 683 | 684 | @keyframes c35 { 685 | to { 686 | --c35:1; 687 | } 688 | } 689 | result { 690 | --sum:calc(0 + var(--c1) + var(--c2) + var(--c3) + var(--c4) + var(--c5) + var(--c6) + var(--c7) + var(--c8) + var(--c9) + var(--c10) + var(--c11) + var(--c12) + var(--c13) + var(--c14) + var(--c15) + var(--c16) + var(--c17) + var(--c18) + var(--c19) + var(--c20) + var(--c21) + var(--c22) + var(--c23) + var(--c24) + var(--c25) + var(--c26) + var(--c27) + var(--c28) + var(--c29) + var(--c30) + var(--c31) + var(--c32) + var(--c33) + var(--c34) + var(--c35)); 691 | animation: c1 var(--s1) forwards 0.01s, c2 var(--s2) forwards 0.01s, c3 var(--s3) forwards 0.01s, c4 var(--s4) forwards 0.01s, c5 var(--s5) forwards 0.01s, c6 var(--s6) forwards 0.01s, c7 var(--s7) forwards 0.01s, c8 var(--s8) forwards 0.01s, c9 var(--s9) forwards 0.01s, c10 var(--s10) forwards 0.01s, c11 var(--s11) forwards 0.01s, c12 var(--s12) forwards 0.01s, c13 var(--s13) forwards 0.01s, c14 var(--s14) forwards 0.01s, c15 var(--s15) forwards 0.01s, c16 var(--s16) forwards 0.01s, c17 var(--s17) forwards 0.01s, c18 var(--s18) forwards 0.01s, c19 var(--s19) forwards 0.01s, c20 var(--s20) forwards 0.01s, c21 var(--s21) forwards 0.01s, c22 var(--s22) forwards 0.01s, c23 var(--s23) forwards 0.01s, c24 var(--s24) forwards 0.01s, c25 var(--s25) forwards 0.01s, c26 var(--s26) forwards 0.01s, c27 var(--s27) forwards 0.01s, c28 var(--s28) forwards 0.01s, c29 var(--s29) forwards 0.01s, c30 var(--s30) forwards 0.01s, c31 var(--s31) forwards 0.01s, c32 var(--s32) forwards 0.01s, c33 var(--s33) forwards 0.01s, c34 var(--s34) forwards 0.01s, c35 var(--s35) forwards 0.01s; 692 | position: absolute; 693 | inset: 0 0 clamp(0%, (35 - var(--sum))*9999% ,100%) 0; 694 | display: grid; 695 | place-content: center; 696 | font-size: 70px; 697 | color: #00b300; 698 | overflow: hidden; 699 | background: #fff9; 700 | } 701 | 702 | result:before { 703 | content: "Bravo!"; 704 | } 705 | 706 | w { 707 | background: linear-gradient(#a49d83 50%, #0000 0) 75% 0/2px 50% repeat-y, linear-gradient(#0000 50%, #a49d83 0) 25% 0/2px 50% repeat-y, linear-gradient(#966042 calc(100% - 2px), #a49d83 0) 0 0/100% calc(100%/4); 708 | } 709 | 710 | w::before { 711 | content: "Game Over"; 712 | position: fixed; 713 | inset: 0 0 100%; 714 | z-index: 5695845; 715 | background: #000; 716 | color: red; 717 | font-size: 80px; 718 | display: grid; 719 | place-content: center; 720 | overflow: hidden; 721 | transition: 99999s; 722 | } 723 | 724 | w::after { 725 | content: "Refresh the page to start a new game"; 726 | position: fixed; 727 | inset: 0 0 100%; 728 | z-index: 5695845; 729 | color: #fff; 730 | font-size: 30px; 731 | display: grid; 732 | place-content: end center; 733 | overflow: hidden; 734 | transition: 99999s; 735 | } 736 | 737 | w:hover::before, 738 | w:hover::after { 739 | inset: 0; 740 | transition: 0s; 741 | } 742 | 743 | /* The time from https://codepen.io/t_afif/pen/ExbRBPN*/ 744 | @property --n { 745 | syntax: ""; 746 | inherits: true; 747 | initial-value: 0; 748 | } 749 | @property --t { 750 | syntax: ""; 751 | inherits: true; 752 | initial-value: #000; 753 | } 754 | @property --r { 755 | syntax: ""; 756 | inherits: true; 757 | initial-value: #000; 758 | } 759 | @property --b { 760 | syntax: ""; 761 | inherits: true; 762 | initial-value: #000; 763 | } 764 | @property --l { 765 | syntax: ""; 766 | inherits: true; 767 | initial-value: #000; 768 | } 769 | d { 770 | width: 40px; 771 | /* size */ 772 | display: inline-grid; 773 | aspect-ratio: 0.55; 774 | } 775 | 776 | d:before, 777 | d:after { 778 | content: ""; 779 | padding: 20%; 780 | background: conic-gradient(from -45deg at 50% 45%, var(--t) 90deg, #0000 0), conic-gradient(from 45deg at 55% 50%, var(--r) 90deg, #0000 0), conic-gradient(from 135deg at 50% 55%, var(--b) 90deg, #0000 0), conic-gradient(from 225deg at 45% 50%, var(--l) 90deg, #0000 0); 781 | --m: conic-gradient(#000 0 0) content-box,conic-gradient(#000 0 0); 782 | -webkit-mask: var(--m); 783 | mask: var(--m); 784 | -webkit-mask-composite: xor; 785 | mask-composite: exclude; 786 | clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); 787 | transition: --t 0.45s, --l 0.45s, --b 0.45s, --r 0.45s; 788 | } 789 | 790 | d:after { 791 | margin-top: -20%; 792 | --t: #0000; 793 | } 794 | 795 | d { 796 | --1:(var(--n) - 1)*(var(--n) - 1); 797 | --2:(var(--n) - 2)*(var(--n) - 2); 798 | --3:(var(--n) - 3)*(var(--n) - 3); 799 | --4:(var(--n) - 4)*(var(--n) - 4); 800 | --5:(var(--n) - 5)*(var(--n) - 5); 801 | --6:(var(--n) - 6)*(var(--n) - 6); 802 | --7:(var(--n) - 7)*(var(--n) - 7); 803 | --8:(var(--n) - 8)*(var(--n) - 8); 804 | --9:(var(--n) - 9)*(var(--n) - 9); 805 | } 806 | 807 | d:before { 808 | --t:rgb( 809 | clamp(30,var(--1)*var(--4)*999,250) 810 | clamp(30,var(--1)*var(--4)*999,250) 811 | 30); 812 | --r:rgb( 813 | clamp(30,var(--5)*var(--6)*999,250) 814 | clamp(30,var(--5)*var(--6)*999,250) 815 | 30); 816 | --b:rgb( 817 | clamp(30,var(--n)*var(--1)*var(--7)*999,250) 818 | clamp(30,var(--n)*var(--1)*var(--7)*999,250) 819 | 30); 820 | --l:rgb( 821 | clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250) 822 | clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250) 823 | 30); 824 | } 825 | 826 | d:after { 827 | --r:rgb( 828 | clamp(30,var(--2)*999,250) 829 | clamp(30,var(--2)*999,250) 830 | 30); 831 | --b:rgb( 832 | clamp(30,var(--1)*var(--4)*var(--7)*999,250) 833 | clamp(30,var(--1)*var(--4)*var(--7)*999,250) 834 | 30); 835 | --l:rgb( 836 | clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250) 837 | clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250) 838 | 30); 839 | } 840 | 841 | timer d:nth-of-type(1) { 842 | animation: d6 60s linear infinite; 843 | } 844 | 845 | timer d:nth-of-type(2) { 846 | animation: d9 10s linear infinite; 847 | } 848 | 849 | timer d:nth-of-type(3) { 850 | animation: d9 1s linear infinite; 851 | grid-column: 4; 852 | } 853 | 854 | timer d:nth-of-type(4) { 855 | animation: d9 0.1s linear infinite; 856 | } 857 | 858 | @keyframes d9 { 859 | 0%, 9.95% { 860 | --n:0; 861 | } 862 | 10%, 19.95% { 863 | --n:1; 864 | } 865 | 20%, 29.95% { 866 | --n:2; 867 | } 868 | 30%, 39.95% { 869 | --n:3; 870 | } 871 | 40%, 49.95% { 872 | --n:4; 873 | } 874 | 50%, 59.95% { 875 | --n:5; 876 | } 877 | 60%, 69.95% { 878 | --n:6; 879 | } 880 | 70%, 79.95% { 881 | --n:7; 882 | } 883 | 80%, 89.95% { 884 | --n:8; 885 | } 886 | 90%, 99.95% { 887 | --n:9; 888 | } 889 | } 890 | @keyframes d6 { 891 | 0%, 16.64% { 892 | --n:0; 893 | } 894 | 16.67%, 33.30% { 895 | --n:1; 896 | } 897 | 33.33%, 49.96% { 898 | --n:2; 899 | } 900 | 50.00%, 66.63% { 901 | --n:3; 902 | } 903 | 66.67%, 83.30% { 904 | --n:4; 905 | } 906 | 83.33%, 99.97% { 907 | --n:5; 908 | } 909 | } 910 | timer { 911 | position: absolute; 912 | display: grid; 913 | top: 50%; 914 | left: 100%; 915 | transform: translate(20%, -50%); 916 | grid-template-columns: 1fr 1fr 10px 1fr 1fr; 917 | grid-gap: 10px; 918 | pointer-events: none; 919 | background: linear-gradient(#fafa1e 0 0) 50% 30%/10px 10px no-repeat, linear-gradient(#fafa1e 0 0) 50% 70%/10px 10px no-repeat; 920 | } 921 | 922 | @media (max-width: 900px) { 923 | timer { 924 | top: 100%; 925 | left: 50%; 926 | transform: translate(-50%, 10%); 927 | } 928 | } 929 | grid timer d:nth-child(n), 930 | grid result:hover ~ timer d:nth-child(n) { 931 | animation-play-state: paused; 932 | } 933 | 934 | grid:hover timer d:nth-child(n) { 935 | animation-play-state: running; 936 | } 937 | 938 | grid:hover timer { 939 | filter: hue-rotate(45deg); 940 | } 941 | 942 | body { 943 | min-height: 100vh; 944 | margin: 0; 945 | display: grid; 946 | place-content: start center; 947 | background: #000; 948 | color: #fff; 949 | font-family: system-ui, sans-serif; 950 | } 951 | 952 | h1, p { 953 | font-size: 2rem; 954 | text-align: center; 955 | } 956 | 957 | p { 958 | font-size: 1.2rem; 959 | margin: 0; 960 | } -------------------------------------------------------------------------------- /super-css-mario-2/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.cdnfonts.com/css/retro-mario"); 2 | @property --s1 { 3 | syntax: ""; 4 | inherits: true; 5 | initial-value: 0; 6 | } 7 | @property --s2 { 8 | syntax: ""; 9 | inherits: true; 10 | initial-value: 0; 11 | } 12 | @property --sum { 13 | syntax: ""; 14 | inherits: true; 15 | initial-value: 0; 16 | } 17 | @property --ee { 18 | syntax: ""; 19 | inherits: true; 20 | initial-value: 0; 21 | } 22 | b { 23 | display: grid; 24 | grid-template-columns: repeat(11, 1fr); 25 | grid-template-rows: repeat(5, 1fr); 26 | width: 720px; 27 | height: 420px; 28 | position: sticky; 29 | border: solid #0000; 30 | border-width: 30px 30px 90px; 31 | box-sizing: border-box; 32 | left: 0; 33 | top: 0; 34 | font-weight: initial; 35 | } 36 | 37 | m { 38 | content: ""; 39 | position: absolute; 40 | left: 0; 41 | top: 0; 42 | translate: -50% -50%; 43 | width: 60px; 44 | aspect-ratio: 1; 45 | opacity: 0; 46 | background: url(https://assets.codepen.io/1480814/mm.png) center/cover; 47 | animation: x linear, y linear; 48 | animation-timeline: scroll(nearest inline), scroll(nearest block); 49 | } 50 | 51 | @keyframes x { 52 | to { 53 | left: 100%; 54 | } 55 | } 56 | @keyframes y { 57 | to { 58 | top: 100%; 59 | } 60 | } 61 | c, e { 62 | position: absolute; 63 | inset: 0; 64 | animation-timeline: scroll(nearest inline), scroll(nearest block) !important; 65 | } 66 | 67 | :is(c,e):before { 68 | content: ""; 69 | position: absolute; 70 | width: 9.0909090909%; 71 | aspect-ratio: 1; 72 | scale: 0.6; 73 | background: url(https://assets.codepen.io/1480814/ccc.png) 0 50%/600% auto no-repeat; 74 | } 75 | 76 | e:before { 77 | scale: 0.8; 78 | animation: g 0.4s steps(2) infinite; 79 | background: url(https://assets.codepen.io/1480814/goomba_1.png) 0 50%/200% auto no-repeat; 80 | } 81 | 82 | @keyframes b { 83 | to { 84 | background-position: 120% 50%; 85 | } 86 | } 87 | @keyframes g { 88 | to { 89 | background-position: 200% 50%; 90 | } 91 | } 92 | @keyframes e { 93 | to { 94 | opacity: 0; 95 | translate: 0 -100%; 96 | } 97 | } 98 | c { 99 | animation: c1-x linear, c1-y linear; 100 | container-name: c1; 101 | } 102 | 103 | c:before { 104 | left: 0%; 105 | top: 20%; 106 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e1, paused); 107 | } 108 | @container c1 style(--c1-x: 1) and style(--c1-y: 1) { 109 | c:before { 110 | --e1: running; 111 | } 112 | } 113 | 114 | @keyframes c1-x { 115 | 0%, 0%, 9.0909090909%, to { 116 | --c1-x:0; 117 | } 118 | 0.1%, 8.9909090909% { 119 | --c1-x:1; 120 | } 121 | } 122 | @keyframes c1-y { 123 | 0%, 20%, 40%, to { 124 | --c1-y:0; 125 | } 126 | 20.1%, 39.9% { 127 | --c1-y:1; 128 | } 129 | } 130 | c > c { 131 | animation: c2-x linear, c2-y linear; 132 | container-name: c2; 133 | } 134 | 135 | c > c:before { 136 | left: 72.7272727273%; 137 | top: 60%; 138 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e2, paused); 139 | } 140 | @container c2 style(--c2-x: 1) and style(--c2-y: 1) { 141 | c > c:before { 142 | --e2: running; 143 | } 144 | } 145 | 146 | @keyframes c2-x { 147 | 0%, 72.7272727273%, 81.8181818182%, to { 148 | --c2-x:0; 149 | } 150 | 72.8272727273%, 81.7181818182% { 151 | --c2-x:1; 152 | } 153 | } 154 | @keyframes c2-y { 155 | 0%, 60%, 80%, to { 156 | --c2-y:0; 157 | } 158 | 60.1%, 79.9% { 159 | --c2-y:1; 160 | } 161 | } 162 | c > c > c { 163 | animation: c3-x linear, c3-y linear; 164 | container-name: c3; 165 | } 166 | 167 | c > c > c:before { 168 | left: 18.1818181818%; 169 | top: 40%; 170 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e3, paused); 171 | } 172 | @container c3 style(--c3-x: 1) and style(--c3-y: 1) { 173 | c > c > c:before { 174 | --e3: running; 175 | } 176 | } 177 | 178 | @keyframes c3-x { 179 | 0%, 18.1818181818%, 27.2727272727%, to { 180 | --c3-x:0; 181 | } 182 | 18.2818181818%, 27.1727272727% { 183 | --c3-x:1; 184 | } 185 | } 186 | @keyframes c3-y { 187 | 0%, 40%, 60%, to { 188 | --c3-y:0; 189 | } 190 | 40.1%, 59.9% { 191 | --c3-y:1; 192 | } 193 | } 194 | c > c > c > c { 195 | animation: c4-x linear, c4-y linear; 196 | container-name: c4; 197 | } 198 | 199 | c > c > c > c:before { 200 | left: 36.3636363636%; 201 | top: 60%; 202 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e4, paused); 203 | } 204 | @container c4 style(--c4-x: 1) and style(--c4-y: 1) { 205 | c > c > c > c:before { 206 | --e4: running; 207 | } 208 | } 209 | 210 | @keyframes c4-x { 211 | 0%, 36.3636363636%, 45.4545454545%, to { 212 | --c4-x:0; 213 | } 214 | 36.4636363636%, 45.3545454545% { 215 | --c4-x:1; 216 | } 217 | } 218 | @keyframes c4-y { 219 | 0%, 60%, 80%, to { 220 | --c4-y:0; 221 | } 222 | 60.1%, 79.9% { 223 | --c4-y:1; 224 | } 225 | } 226 | c > c > c > c > c { 227 | animation: c5-x linear, c5-y linear; 228 | container-name: c5; 229 | } 230 | 231 | c > c > c > c > c:before { 232 | left: 54.5454545455%; 233 | top: 0%; 234 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e5, paused); 235 | } 236 | @container c5 style(--c5-x: 1) and style(--c5-y: 1) { 237 | c > c > c > c > c:before { 238 | --e5: running; 239 | } 240 | } 241 | 242 | @keyframes c5-x { 243 | 0%, 54.5454545455%, 63.6363636364%, to { 244 | --c5-x:0; 245 | } 246 | 54.6454545455%, 63.5363636364% { 247 | --c5-x:1; 248 | } 249 | } 250 | @keyframes c5-y { 251 | 0%, 0%, 20%, to { 252 | --c5-y:0; 253 | } 254 | 0.1%, 19.9% { 255 | --c5-y:1; 256 | } 257 | } 258 | c > c > c > c > c > c { 259 | animation: c6-x linear, c6-y linear; 260 | container-name: c6; 261 | } 262 | 263 | c > c > c > c > c > c:before { 264 | left: 18.1818181818%; 265 | top: 80%; 266 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e6, paused); 267 | } 268 | @container c6 style(--c6-x: 1) and style(--c6-y: 1) { 269 | c > c > c > c > c > c:before { 270 | --e6: running; 271 | } 272 | } 273 | 274 | @keyframes c6-x { 275 | 0%, 18.1818181818%, 27.2727272727%, to { 276 | --c6-x:0; 277 | } 278 | 18.2818181818%, 27.1727272727% { 279 | --c6-x:1; 280 | } 281 | } 282 | @keyframes c6-y { 283 | 0%, 80%, 100%, to { 284 | --c6-y:0; 285 | } 286 | 80.1%, 99.9% { 287 | --c6-y:1; 288 | } 289 | } 290 | c > c > c > c > c > c > c { 291 | animation: c7-x linear, c7-y linear; 292 | container-name: c7; 293 | } 294 | 295 | c > c > c > c > c > c > c:before { 296 | left: 36.3636363636%; 297 | top: 40%; 298 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e7, paused); 299 | } 300 | @container c7 style(--c7-x: 1) and style(--c7-y: 1) { 301 | c > c > c > c > c > c > c:before { 302 | --e7: running; 303 | } 304 | } 305 | 306 | @keyframes c7-x { 307 | 0%, 36.3636363636%, 45.4545454545%, to { 308 | --c7-x:0; 309 | } 310 | 36.4636363636%, 45.3545454545% { 311 | --c7-x:1; 312 | } 313 | } 314 | @keyframes c7-y { 315 | 0%, 40%, 60%, to { 316 | --c7-y:0; 317 | } 318 | 40.1%, 59.9% { 319 | --c7-y:1; 320 | } 321 | } 322 | c > c > c > c > c > c > c > c { 323 | animation: c8-x linear, c8-y linear; 324 | container-name: c8; 325 | } 326 | 327 | c > c > c > c > c > c > c > c:before { 328 | left: 90.9090909091%; 329 | top: 80%; 330 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e8, paused); 331 | } 332 | @container c8 style(--c8-x: 1) and style(--c8-y: 1) { 333 | c > c > c > c > c > c > c > c:before { 334 | --e8: running; 335 | } 336 | } 337 | 338 | @keyframes c8-x { 339 | 0%, 90.9090909091%, 100%, to { 340 | --c8-x:0; 341 | } 342 | 91.0090909091%, 99.9% { 343 | --c8-x:1; 344 | } 345 | } 346 | @keyframes c8-y { 347 | 0%, 80%, 100%, to { 348 | --c8-y:0; 349 | } 350 | 80.1%, 99.9% { 351 | --c8-y:1; 352 | } 353 | } 354 | c > c > c > c > c > c > c > c > c { 355 | animation: c9-x linear, c9-y linear; 356 | container-name: c9; 357 | } 358 | 359 | c > c > c > c > c > c > c > c > c:before { 360 | left: 18.1818181818%; 361 | top: 80%; 362 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e9, paused); 363 | } 364 | @container c9 style(--c9-x: 1) and style(--c9-y: 1) { 365 | c > c > c > c > c > c > c > c > c:before { 366 | --e9: running; 367 | } 368 | } 369 | 370 | @keyframes c9-x { 371 | 0%, 18.1818181818%, 27.2727272727%, to { 372 | --c9-x:0; 373 | } 374 | 18.2818181818%, 27.1727272727% { 375 | --c9-x:1; 376 | } 377 | } 378 | @keyframes c9-y { 379 | 0%, 80%, 100%, to { 380 | --c9-y:0; 381 | } 382 | 80.1%, 99.9% { 383 | --c9-y:1; 384 | } 385 | } 386 | c > c > c > c > c > c > c > c > c > c { 387 | animation: c10-x linear, c10-y linear; 388 | container-name: c10; 389 | } 390 | 391 | c > c > c > c > c > c > c > c > c > c:before { 392 | left: 54.5454545455%; 393 | top: 20%; 394 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e10, paused); 395 | } 396 | @container c10 style(--c10-x: 1) and style(--c10-y: 1) { 397 | c > c > c > c > c > c > c > c > c > c:before { 398 | --e10: running; 399 | } 400 | } 401 | 402 | @keyframes c10-x { 403 | 0%, 54.5454545455%, 63.6363636364%, to { 404 | --c10-x:0; 405 | } 406 | 54.6454545455%, 63.5363636364% { 407 | --c10-x:1; 408 | } 409 | } 410 | @keyframes c10-y { 411 | 0%, 20%, 40%, to { 412 | --c10-y:0; 413 | } 414 | 20.1%, 39.9% { 415 | --c10-y:1; 416 | } 417 | } 418 | c > c > c > c > c > c > c > c > c > c > c { 419 | animation: c11-x linear, c11-y linear; 420 | container-name: c11; 421 | } 422 | 423 | c > c > c > c > c > c > c > c > c > c > c:before { 424 | left: 90.9090909091%; 425 | top: 20%; 426 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e11, paused); 427 | } 428 | @container c11 style(--c11-x: 1) and style(--c11-y: 1) { 429 | c > c > c > c > c > c > c > c > c > c > c:before { 430 | --e11: running; 431 | } 432 | } 433 | 434 | @keyframes c11-x { 435 | 0%, 90.9090909091%, 100%, to { 436 | --c11-x:0; 437 | } 438 | 91.0090909091%, 99.9% { 439 | --c11-x:1; 440 | } 441 | } 442 | @keyframes c11-y { 443 | 0%, 20%, 40%, to { 444 | --c11-y:0; 445 | } 446 | 20.1%, 39.9% { 447 | --c11-y:1; 448 | } 449 | } 450 | c > c > c > c > c > c > c > c > c > c > c > c { 451 | animation: c12-x linear, c12-y linear; 452 | container-name: c12; 453 | } 454 | 455 | c > c > c > c > c > c > c > c > c > c > c > c:before { 456 | left: 36.3636363636%; 457 | top: 0%; 458 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e12, paused); 459 | } 460 | @container c12 style(--c12-x: 1) and style(--c12-y: 1) { 461 | c > c > c > c > c > c > c > c > c > c > c > c:before { 462 | --e12: running; 463 | } 464 | } 465 | 466 | @keyframes c12-x { 467 | 0%, 36.3636363636%, 45.4545454545%, to { 468 | --c12-x:0; 469 | } 470 | 36.4636363636%, 45.3545454545% { 471 | --c12-x:1; 472 | } 473 | } 474 | @keyframes c12-y { 475 | 0%, 0%, 20%, to { 476 | --c12-y:0; 477 | } 478 | 0.1%, 19.9% { 479 | --c12-y:1; 480 | } 481 | } 482 | c > c > c > c > c > c > c > c > c > c > c > c > c { 483 | animation: c13-x linear, c13-y linear; 484 | container-name: c13; 485 | } 486 | 487 | c > c > c > c > c > c > c > c > c > c > c > c > c:before { 488 | left: 18.1818181818%; 489 | top: 40%; 490 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e13, paused); 491 | } 492 | @container c13 style(--c13-x: 1) and style(--c13-y: 1) { 493 | c > c > c > c > c > c > c > c > c > c > c > c > c:before { 494 | --e13: running; 495 | } 496 | } 497 | 498 | @keyframes c13-x { 499 | 0%, 18.1818181818%, 27.2727272727%, to { 500 | --c13-x:0; 501 | } 502 | 18.2818181818%, 27.1727272727% { 503 | --c13-x:1; 504 | } 505 | } 506 | @keyframes c13-y { 507 | 0%, 40%, 60%, to { 508 | --c13-y:0; 509 | } 510 | 40.1%, 59.9% { 511 | --c13-y:1; 512 | } 513 | } 514 | c > c > c > c > c > c > c > c > c > c > c > c > c > c { 515 | animation: c14-x linear, c14-y linear; 516 | container-name: c14; 517 | } 518 | 519 | c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 520 | left: 90.9090909091%; 521 | top: 0%; 522 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e14, paused); 523 | } 524 | @container c14 style(--c14-x: 1) and style(--c14-y: 1) { 525 | c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 526 | --e14: running; 527 | } 528 | } 529 | 530 | @keyframes c14-x { 531 | 0%, 90.9090909091%, 100%, to { 532 | --c14-x:0; 533 | } 534 | 91.0090909091%, 99.9% { 535 | --c14-x:1; 536 | } 537 | } 538 | @keyframes c14-y { 539 | 0%, 0%, 20%, to { 540 | --c14-y:0; 541 | } 542 | 0.1%, 19.9% { 543 | --c14-y:1; 544 | } 545 | } 546 | e { 547 | animation: e1-x linear, e1-y linear; 548 | container-name: e1; 549 | } 550 | 551 | e:before { 552 | left: 27.2727272727%; 553 | top: 0%; 554 | } 555 | 556 | @keyframes e1-x { 557 | 0%, 27.2727272727%, 36.3636363636%, to { 558 | --e1-x:0; 559 | } 560 | 27.3727272727%, 36.2636363636% { 561 | --e1-x:1; 562 | } 563 | } 564 | @keyframes e1-y { 565 | 0%, 0%, 20%, to { 566 | --e1-y:0; 567 | } 568 | 0.1%, 19.9% { 569 | --e1-y:1; 570 | } 571 | } 572 | e > e { 573 | animation: e2-x linear, e2-y linear; 574 | container-name: e2; 575 | } 576 | 577 | e > e:before { 578 | left: 81.8181818182%; 579 | top: 0%; 580 | } 581 | 582 | @keyframes e2-x { 583 | 0%, 81.8181818182%, 90.9090909091%, to { 584 | --e2-x:0; 585 | } 586 | 81.9181818182%, 90.8090909091% { 587 | --e2-x:1; 588 | } 589 | } 590 | @keyframes e2-y { 591 | 0%, 0%, 20%, to { 592 | --e2-y:0; 593 | } 594 | 0.1%, 19.9% { 595 | --e2-y:1; 596 | } 597 | } 598 | e > e > e { 599 | animation: e3-x linear, e3-y linear; 600 | container-name: e3; 601 | } 602 | 603 | e > e > e:before { 604 | left: 81.8181818182%; 605 | top: 40%; 606 | } 607 | 608 | @keyframes e3-x { 609 | 0%, 81.8181818182%, 90.9090909091%, to { 610 | --e3-x:0; 611 | } 612 | 81.9181818182%, 90.8090909091% { 613 | --e3-x:1; 614 | } 615 | } 616 | @keyframes e3-y { 617 | 0%, 40%, 60%, to { 618 | --e3-y:0; 619 | } 620 | 40.1%, 59.9% { 621 | --e3-y:1; 622 | } 623 | } 624 | e > e > e > e { 625 | animation: e4-x linear, e4-y linear; 626 | container-name: e4; 627 | } 628 | 629 | e > e > e > e:before { 630 | left: 81.8181818182%; 631 | top: 80%; 632 | } 633 | 634 | @keyframes e4-x { 635 | 0%, 81.8181818182%, 90.9090909091%, to { 636 | --e4-x:0; 637 | } 638 | 81.9181818182%, 90.8090909091% { 639 | --e4-x:1; 640 | } 641 | } 642 | @keyframes e4-y { 643 | 0%, 80%, 100%, to { 644 | --e4-y:0; 645 | } 646 | 80.1%, 99.9% { 647 | --e4-y:1; 648 | } 649 | } 650 | e > e > e > e > e { 651 | animation: e5-x linear, e5-y linear; 652 | container-name: e5; 653 | } 654 | 655 | e > e > e > e > e:before { 656 | left: 45.4545454545%; 657 | top: 60%; 658 | } 659 | 660 | @keyframes e5-x { 661 | 0%, 45.4545454545%, 54.5454545455%, to { 662 | --e5-x:0; 663 | } 664 | 45.5545454545%, 54.4454545455% { 665 | --e5-x:1; 666 | } 667 | } 668 | @keyframes e5-y { 669 | 0%, 60%, 80%, to { 670 | --e5-y:0; 671 | } 672 | 60.1%, 79.9% { 673 | --e5-y:1; 674 | } 675 | } 676 | r { 677 | color: #fefeff; 678 | font-size: 35px; 679 | visibility: hidden; 680 | --r1:0; 681 | --r2:0; 682 | --r3:0; 683 | --r4:0; 684 | --r5:0; 685 | --r6:0; 686 | --r7:0; 687 | --r8:0; 688 | --r9:0; 689 | --r10:0; 690 | --r11:0; 691 | --r12:0; 692 | --r13:0; 693 | --r14:0; 694 | --ee: 0; 695 | --sum: calc(var(--r1) + var(--r2) + var(--r3) + var(--r4) + var(--r5) + var(--r6) + var(--r7) + var(--r8) + var(--r9) + var(--r10) + var(--r11) + var(--r12) + var(--r13) + var(--r14)); 696 | animation: r1 .1s forwards var(--s-r1,paused), r2 .1s forwards var(--s-r2,paused), r3 .1s forwards var(--s-r3,paused), r4 .1s forwards var(--s-r4,paused), r5 .1s forwards var(--s-r5,paused), r6 .1s forwards var(--s-r6,paused), r7 .1s forwards var(--s-r7,paused), r8 .1s forwards var(--s-r8,paused), r9 .1s forwards var(--s-r9,paused), r10 .1s forwards var(--s-r10,paused), r11 .1s forwards var(--s-r11,paused), r12 .1s forwards var(--s-r12,paused), r13 .1s forwards var(--s-r13,paused), r14 .1s forwards var(--s-r14,paused), eeee .1s forwards var(--eeee,paused); 697 | container-name: r; 698 | } 699 | @container c1 style(--c1-x: 1) and style(--c1-y: 1) { 700 | r { 701 | --s-r1: running; 702 | } 703 | } 704 | @keyframes r1 { 705 | 1%, to { 706 | --r1:1; 707 | } 708 | } 709 | @container c2 style(--c2-x: 1) and style(--c2-y: 1) { 710 | r { 711 | --s-r2: running; 712 | } 713 | } 714 | @keyframes r2 { 715 | 1%, to { 716 | --r2:1; 717 | } 718 | } 719 | @container c3 style(--c3-x: 1) and style(--c3-y: 1) { 720 | r { 721 | --s-r3: running; 722 | } 723 | } 724 | @keyframes r3 { 725 | 1%, to { 726 | --r3:1; 727 | } 728 | } 729 | @container c4 style(--c4-x: 1) and style(--c4-y: 1) { 730 | r { 731 | --s-r4: running; 732 | } 733 | } 734 | @keyframes r4 { 735 | 1%, to { 736 | --r4:1; 737 | } 738 | } 739 | @container c5 style(--c5-x: 1) and style(--c5-y: 1) { 740 | r { 741 | --s-r5: running; 742 | } 743 | } 744 | @keyframes r5 { 745 | 1%, to { 746 | --r5:1; 747 | } 748 | } 749 | @container c6 style(--c6-x: 1) and style(--c6-y: 1) { 750 | r { 751 | --s-r6: running; 752 | } 753 | } 754 | @keyframes r6 { 755 | 1%, to { 756 | --r6:1; 757 | } 758 | } 759 | @container c7 style(--c7-x: 1) and style(--c7-y: 1) { 760 | r { 761 | --s-r7: running; 762 | } 763 | } 764 | @keyframes r7 { 765 | 1%, to { 766 | --r7:1; 767 | } 768 | } 769 | @container c8 style(--c8-x: 1) and style(--c8-y: 1) { 770 | r { 771 | --s-r8: running; 772 | } 773 | } 774 | @keyframes r8 { 775 | 1%, to { 776 | --r8:1; 777 | } 778 | } 779 | @container c9 style(--c9-x: 1) and style(--c9-y: 1) { 780 | r { 781 | --s-r9: running; 782 | } 783 | } 784 | @keyframes r9 { 785 | 1%, to { 786 | --r9:1; 787 | } 788 | } 789 | @container c10 style(--c10-x: 1) and style(--c10-y: 1) { 790 | r { 791 | --s-r10: running; 792 | } 793 | } 794 | @keyframes r10 { 795 | 1%, to { 796 | --r10:1; 797 | } 798 | } 799 | @container c11 style(--c11-x: 1) and style(--c11-y: 1) { 800 | r { 801 | --s-r11: running; 802 | } 803 | } 804 | @keyframes r11 { 805 | 1%, to { 806 | --r11:1; 807 | } 808 | } 809 | @container c12 style(--c12-x: 1) and style(--c12-y: 1) { 810 | r { 811 | --s-r12: running; 812 | } 813 | } 814 | @keyframes r12 { 815 | 1%, to { 816 | --r12:1; 817 | } 818 | } 819 | @container c13 style(--c13-x: 1) and style(--c13-y: 1) { 820 | r { 821 | --s-r13: running; 822 | } 823 | } 824 | @keyframes r13 { 825 | 1%, to { 826 | --r13:1; 827 | } 828 | } 829 | @container c14 style(--c14-x: 1) and style(--c14-y: 1) { 830 | r { 831 | --s-r14: running; 832 | } 833 | } 834 | @keyframes r14 { 835 | 1%, to { 836 | --r14:1; 837 | } 838 | } 839 | @container e1 style(--e1-x: 1) and style(--e1-y: 1) { 840 | r { 841 | --eeee: running; 842 | } 843 | } 844 | @container e2 style(--e2-x: 1) and style(--e2-y: 1) { 845 | r { 846 | --eeee: running; 847 | } 848 | } 849 | @container e3 style(--e3-x: 1) and style(--e3-y: 1) { 850 | r { 851 | --eeee: running; 852 | } 853 | } 854 | @container e4 style(--e4-x: 1) and style(--e4-y: 1) { 855 | r { 856 | --eeee: running; 857 | } 858 | } 859 | @container e5 style(--e5-x: 1) and style(--e5-y: 1) { 860 | r { 861 | --eeee: running; 862 | } 863 | } 864 | @keyframes eeee { 865 | 1%, to { 866 | --ee:1; 867 | } 868 | } 869 | 870 | r:before { 871 | content: "SCORE - " counter(r, decimal-leading-zero); 872 | position: absolute; 873 | right: -30px; 874 | bottom: -90px; 875 | padding: 8px 16px 8px 0; 876 | counter-reset: r var(--sum); 877 | } 878 | 879 | r:after { 880 | content: "TIME - " counter(s1, decimal-leading-zero) "s"; 881 | font-variant-numeric: tabular-nums; 882 | counter-reset: s1 var(--s1) s2 var(--s2); 883 | position: absolute; 884 | left: -30px; 885 | bottom: -90px; 886 | padding: 8px; 887 | animation: s1 60s linear forwards paused; 888 | background: url(https://assets.codepen.io/1480814/win_1.png) bottom/auto 0 no-repeat; 889 | } 890 | @container r style(--sum: 14) { 891 | r:after { 892 | content: "You did it in " counter(s1, decimal-leading-zero) "s"; 893 | background: url(https://assets.codepen.io/1480814/win_1.png) 50% 70%/auto 60% no-repeat var(--b) content-box; 894 | inset: -30px -30px -90px; 895 | padding-right: 6px; 896 | animation-play-state: paused !important; 897 | text-align: center; 898 | font-size: 55px; 899 | z-index: 99989; 900 | visibility: visible; 901 | } 902 | } 903 | @container r style(--ee: 1) { 904 | r:after { 905 | content: "\aGame Over\a\aRefresh the page\a and try again "; 906 | white-space: pre-wrap; 907 | background: var(--b) content-box; 908 | inset: -30px -30px -90px; 909 | padding-right: 6px; 910 | animation-play-state: paused !important; 911 | text-align: center; 912 | font-size: 55px; 913 | z-index: 99989; 914 | visibility: visible; 915 | } 916 | } 917 | 918 | @keyframes s1 { 919 | to { 920 | --s1:60; 921 | } 922 | } 923 | g { 924 | display: block; 925 | width: 2160px; 926 | height: 1260px; 927 | } 928 | 929 | body { 930 | position: relative; 931 | margin: auto auto 60px; 932 | overflow: auto; 933 | scrollbar-width: none; 934 | width: 720px; 935 | height: 420px; 936 | box-shadow: -6px 0 var(--c2), -6px 0 var(--c2) inset, 0 -6px var(--c2) inset; 937 | background: var(--b); 938 | cursor: pointer; 939 | } 940 | 941 | b:before { 942 | content: "Collect the Coins\aWith your keyboard!\a\a\a🖱️Click to start"; 943 | font-size: 40px; 944 | white-space: pre; 945 | text-align: center; 946 | position: absolute; 947 | inset: -15px -15px -60px; 948 | padding-top: 30px; 949 | pointer-events: none; 950 | z-index: 5896; 951 | color: #fefeff; 952 | background: url(https://assets.codepen.io/1480814/mm.png) bottom/80px auto no-repeat, url(https://assets.codepen.io/1480814/k.png) 50% 43%/110px auto no-repeat var(--b); 953 | } 954 | 955 | body:focus-within { 956 | cursor: none; 957 | } 958 | 959 | body:focus-within b:before { 960 | opacity: 0; 961 | } 962 | 963 | body:focus-within m { 964 | opacity: 1; 965 | } 966 | 967 | body:focus-within r { 968 | visibility: visible; 969 | } 970 | 971 | body:focus-within r:after { 972 | animation-play-state: running; 973 | } 974 | 975 | html { 976 | font-family: "Retro Mario", sans serif; 977 | min-height: 100vh; 978 | overflow: hidden; 979 | display: grid; 980 | --c1: #954b0c; 981 | --c2: #000; 982 | --b: #6185f8; 983 | --g:conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0); 984 | background: var(--g) 50% 100%, var(--g) calc(50% + 30px) calc(100% + 30px) var(--c2); 985 | background-size: 60px 60px; 986 | } 987 | 988 | html:before { 989 | content: "Super CSS Mario II"; 990 | position: absolute; 991 | inset: auto 0 520px; 992 | width: fit-content; 993 | margin: auto; 994 | color: #ffccc5; 995 | font-size: 50px; 996 | padding: 10px 25px; 997 | background: #994e00; 998 | text-shadow: 5px 5px #000; 999 | border: 3px solid; 1000 | } 1001 | 1002 | @media (width < 720px), (height < 540px) { 1003 | html:after { 1004 | content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!"; 1005 | white-space: pre-wrap; 1006 | background: var(--b); 1007 | position: absolute; 1008 | inset: 0; 1009 | z-index: calc(infinity); 1010 | display: grid; 1011 | place-content: center; 1012 | text-align: center; 1013 | font-size: 40px; 1014 | padding: 40px; 1015 | color: #fff; 1016 | } 1017 | } 1018 | @supports not (animation-timeline: scroll()) { 1019 | html:after { 1020 | content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)"; 1021 | white-space: pre-wrap; 1022 | background: var(--b); 1023 | position: absolute; 1024 | inset: 0; 1025 | z-index: calc(infinity); 1026 | display: grid; 1027 | place-content: center; 1028 | text-align: center; 1029 | font-size: 40px; 1030 | padding: 40px; 1031 | color: #fff; 1032 | } 1033 | } -------------------------------------------------------------------------------- /super-css-mario/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.cdnfonts.com/css/retro-mario"); 2 | @property --s1 { 3 | syntax: ""; 4 | inherits: true; 5 | initial-value: 0; 6 | } 7 | @property --s2 { 8 | syntax: ""; 9 | inherits: true; 10 | initial-value: 0; 11 | } 12 | @property --sum { 13 | syntax: ""; 14 | inherits: true; 15 | initial-value: 0; 16 | } 17 | b { 18 | display: grid; 19 | grid-template-columns: repeat(11, 1fr); 20 | grid-template-rows: repeat(5, 1fr); 21 | width: 720px; 22 | height: 420px; 23 | position: sticky; 24 | border: solid #0000; 25 | border-width: 30px 30px 90px; 26 | box-sizing: border-box; 27 | left: 0; 28 | top: 0; 29 | font-weight: initial; 30 | } 31 | 32 | m { 33 | content: ""; 34 | position: absolute; 35 | left: 0; 36 | top: 0; 37 | translate: -50% -50%; 38 | width: 60px; 39 | aspect-ratio: 1; 40 | opacity: 0; 41 | background: url(https://assets.codepen.io/1480814/mm.png) center/cover; 42 | animation: x linear, y linear; 43 | animation-timeline: scroll(nearest inline), scroll(nearest block); 44 | } 45 | 46 | @keyframes x { 47 | to { 48 | left: 100%; 49 | } 50 | } 51 | @keyframes y { 52 | to { 53 | top: 100%; 54 | } 55 | } 56 | c { 57 | position: absolute; 58 | inset: 0; 59 | animation-timeline: scroll(nearest inline), scroll(nearest block) !important; 60 | } 61 | 62 | c:before { 63 | content: ""; 64 | position: absolute; 65 | width: 9.0909090909%; 66 | aspect-ratio: 1; 67 | border-radius: 50%; 68 | scale: 0.6; 69 | background: url(https://assets.codepen.io/1480814/ccc.png) 0 50%/600% auto no-repeat; 70 | } 71 | 72 | @keyframes b { 73 | to { 74 | background-position: 120% 50%; 75 | } 76 | } 77 | @keyframes e { 78 | to { 79 | opacity: 0; 80 | translate: 0 -100%; 81 | } 82 | } 83 | c { 84 | animation: c1-x linear, c1-y linear; 85 | container-name: c1; 86 | } 87 | 88 | c:before { 89 | left: 27.2727272727%; 90 | top: 20%; 91 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e1, paused); 92 | } 93 | @container c1 style(--c1-x: 1) and style(--c1-y: 1) { 94 | c:before { 95 | --e1: running; 96 | } 97 | } 98 | 99 | @keyframes c1-x { 100 | 0%, 27.2727272727%, 36.3636363636%, to { 101 | --c1-x:0; 102 | } 103 | 27.3727272727%, 36.2636363636% { 104 | --c1-x:1; 105 | } 106 | } 107 | @keyframes c1-y { 108 | 0%, 20%, 40%, to { 109 | --c1-y:0; 110 | } 111 | 20.1%, 39.9% { 112 | --c1-y:1; 113 | } 114 | } 115 | c > c { 116 | animation: c2-x linear, c2-y linear; 117 | container-name: c2; 118 | } 119 | 120 | c > c:before { 121 | left: 81.8181818182%; 122 | top: 40%; 123 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e2, paused); 124 | } 125 | @container c2 style(--c2-x: 1) and style(--c2-y: 1) { 126 | c > c:before { 127 | --e2: running; 128 | } 129 | } 130 | 131 | @keyframes c2-x { 132 | 0%, 81.8181818182%, 90.9090909091%, to { 133 | --c2-x:0; 134 | } 135 | 81.9181818182%, 90.8090909091% { 136 | --c2-x:1; 137 | } 138 | } 139 | @keyframes c2-y { 140 | 0%, 40%, 60%, to { 141 | --c2-y:0; 142 | } 143 | 40.1%, 59.9% { 144 | --c2-y:1; 145 | } 146 | } 147 | c > c > c { 148 | animation: c3-x linear, c3-y linear; 149 | container-name: c3; 150 | } 151 | 152 | c > c > c:before { 153 | left: 27.2727272727%; 154 | top: 40%; 155 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e3, paused); 156 | } 157 | @container c3 style(--c3-x: 1) and style(--c3-y: 1) { 158 | c > c > c:before { 159 | --e3: running; 160 | } 161 | } 162 | 163 | @keyframes c3-x { 164 | 0%, 27.2727272727%, 36.3636363636%, to { 165 | --c3-x:0; 166 | } 167 | 27.3727272727%, 36.2636363636% { 168 | --c3-x:1; 169 | } 170 | } 171 | @keyframes c3-y { 172 | 0%, 40%, 60%, to { 173 | --c3-y:0; 174 | } 175 | 40.1%, 59.9% { 176 | --c3-y:1; 177 | } 178 | } 179 | c > c > c > c { 180 | animation: c4-x linear, c4-y linear; 181 | container-name: c4; 182 | } 183 | 184 | c > c > c > c:before { 185 | left: 72.7272727273%; 186 | top: 60%; 187 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e4, paused); 188 | } 189 | @container c4 style(--c4-x: 1) and style(--c4-y: 1) { 190 | c > c > c > c:before { 191 | --e4: running; 192 | } 193 | } 194 | 195 | @keyframes c4-x { 196 | 0%, 72.7272727273%, 81.8181818182%, to { 197 | --c4-x:0; 198 | } 199 | 72.8272727273%, 81.7181818182% { 200 | --c4-x:1; 201 | } 202 | } 203 | @keyframes c4-y { 204 | 0%, 60%, 80%, to { 205 | --c4-y:0; 206 | } 207 | 60.1%, 79.9% { 208 | --c4-y:1; 209 | } 210 | } 211 | c > c > c > c > c { 212 | animation: c5-x linear, c5-y linear; 213 | container-name: c5; 214 | } 215 | 216 | c > c > c > c > c:before { 217 | left: 36.3636363636%; 218 | top: 40%; 219 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e5, paused); 220 | } 221 | @container c5 style(--c5-x: 1) and style(--c5-y: 1) { 222 | c > c > c > c > c:before { 223 | --e5: running; 224 | } 225 | } 226 | 227 | @keyframes c5-x { 228 | 0%, 36.3636363636%, 45.4545454545%, to { 229 | --c5-x:0; 230 | } 231 | 36.4636363636%, 45.3545454545% { 232 | --c5-x:1; 233 | } 234 | } 235 | @keyframes c5-y { 236 | 0%, 40%, 60%, to { 237 | --c5-y:0; 238 | } 239 | 40.1%, 59.9% { 240 | --c5-y:1; 241 | } 242 | } 243 | c > c > c > c > c > c { 244 | animation: c6-x linear, c6-y linear; 245 | container-name: c6; 246 | } 247 | 248 | c > c > c > c > c > c:before { 249 | left: 90.9090909091%; 250 | top: 60%; 251 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e6, paused); 252 | } 253 | @container c6 style(--c6-x: 1) and style(--c6-y: 1) { 254 | c > c > c > c > c > c:before { 255 | --e6: running; 256 | } 257 | } 258 | 259 | @keyframes c6-x { 260 | 0%, 90.9090909091%, 100%, to { 261 | --c6-x:0; 262 | } 263 | 91.0090909091%, 99.9% { 264 | --c6-x:1; 265 | } 266 | } 267 | @keyframes c6-y { 268 | 0%, 60%, 80%, to { 269 | --c6-y:0; 270 | } 271 | 60.1%, 79.9% { 272 | --c6-y:1; 273 | } 274 | } 275 | c > c > c > c > c > c > c { 276 | animation: c7-x linear, c7-y linear; 277 | container-name: c7; 278 | } 279 | 280 | c > c > c > c > c > c > c:before { 281 | left: 45.4545454545%; 282 | top: 20%; 283 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e7, paused); 284 | } 285 | @container c7 style(--c7-x: 1) and style(--c7-y: 1) { 286 | c > c > c > c > c > c > c:before { 287 | --e7: running; 288 | } 289 | } 290 | 291 | @keyframes c7-x { 292 | 0%, 45.4545454545%, 54.5454545455%, to { 293 | --c7-x:0; 294 | } 295 | 45.5545454545%, 54.4454545455% { 296 | --c7-x:1; 297 | } 298 | } 299 | @keyframes c7-y { 300 | 0%, 20%, 40%, to { 301 | --c7-y:0; 302 | } 303 | 20.1%, 39.9% { 304 | --c7-y:1; 305 | } 306 | } 307 | c > c > c > c > c > c > c > c { 308 | animation: c8-x linear, c8-y linear; 309 | container-name: c8; 310 | } 311 | 312 | c > c > c > c > c > c > c > c:before { 313 | left: 90.9090909091%; 314 | top: 80%; 315 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e8, paused); 316 | } 317 | @container c8 style(--c8-x: 1) and style(--c8-y: 1) { 318 | c > c > c > c > c > c > c > c:before { 319 | --e8: running; 320 | } 321 | } 322 | 323 | @keyframes c8-x { 324 | 0%, 90.9090909091%, 100%, to { 325 | --c8-x:0; 326 | } 327 | 91.0090909091%, 99.9% { 328 | --c8-x:1; 329 | } 330 | } 331 | @keyframes c8-y { 332 | 0%, 80%, 100%, to { 333 | --c8-y:0; 334 | } 335 | 80.1%, 99.9% { 336 | --c8-y:1; 337 | } 338 | } 339 | c > c > c > c > c > c > c > c > c { 340 | animation: c9-x linear, c9-y linear; 341 | container-name: c9; 342 | } 343 | 344 | c > c > c > c > c > c > c > c > c:before { 345 | left: 9.0909090909%; 346 | top: 80%; 347 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e9, paused); 348 | } 349 | @container c9 style(--c9-x: 1) and style(--c9-y: 1) { 350 | c > c > c > c > c > c > c > c > c:before { 351 | --e9: running; 352 | } 353 | } 354 | 355 | @keyframes c9-x { 356 | 0%, 9.0909090909%, 18.1818181818%, to { 357 | --c9-x:0; 358 | } 359 | 9.1909090909%, 18.0818181818% { 360 | --c9-x:1; 361 | } 362 | } 363 | @keyframes c9-y { 364 | 0%, 80%, 100%, to { 365 | --c9-y:0; 366 | } 367 | 80.1%, 99.9% { 368 | --c9-y:1; 369 | } 370 | } 371 | c > c > c > c > c > c > c > c > c > c { 372 | animation: c10-x linear, c10-y linear; 373 | container-name: c10; 374 | } 375 | 376 | c > c > c > c > c > c > c > c > c > c:before { 377 | left: 36.3636363636%; 378 | top: 20%; 379 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e10, paused); 380 | } 381 | @container c10 style(--c10-x: 1) and style(--c10-y: 1) { 382 | c > c > c > c > c > c > c > c > c > c:before { 383 | --e10: running; 384 | } 385 | } 386 | 387 | @keyframes c10-x { 388 | 0%, 36.3636363636%, 45.4545454545%, to { 389 | --c10-x:0; 390 | } 391 | 36.4636363636%, 45.3545454545% { 392 | --c10-x:1; 393 | } 394 | } 395 | @keyframes c10-y { 396 | 0%, 20%, 40%, to { 397 | --c10-y:0; 398 | } 399 | 20.1%, 39.9% { 400 | --c10-y:1; 401 | } 402 | } 403 | c > c > c > c > c > c > c > c > c > c > c { 404 | animation: c11-x linear, c11-y linear; 405 | container-name: c11; 406 | } 407 | 408 | c > c > c > c > c > c > c > c > c > c > c:before { 409 | left: 18.1818181818%; 410 | top: 0%; 411 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e11, paused); 412 | } 413 | @container c11 style(--c11-x: 1) and style(--c11-y: 1) { 414 | c > c > c > c > c > c > c > c > c > c > c:before { 415 | --e11: running; 416 | } 417 | } 418 | 419 | @keyframes c11-x { 420 | 0%, 18.1818181818%, 27.2727272727%, to { 421 | --c11-x:0; 422 | } 423 | 18.2818181818%, 27.1727272727% { 424 | --c11-x:1; 425 | } 426 | } 427 | @keyframes c11-y { 428 | 0%, 0%, 20%, to { 429 | --c11-y:0; 430 | } 431 | 0.1%, 19.9% { 432 | --c11-y:1; 433 | } 434 | } 435 | c > c > c > c > c > c > c > c > c > c > c > c { 436 | animation: c12-x linear, c12-y linear; 437 | container-name: c12; 438 | } 439 | 440 | c > c > c > c > c > c > c > c > c > c > c > c:before { 441 | left: 45.4545454545%; 442 | top: 40%; 443 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e12, paused); 444 | } 445 | @container c12 style(--c12-x: 1) and style(--c12-y: 1) { 446 | c > c > c > c > c > c > c > c > c > c > c > c:before { 447 | --e12: running; 448 | } 449 | } 450 | 451 | @keyframes c12-x { 452 | 0%, 45.4545454545%, 54.5454545455%, to { 453 | --c12-x:0; 454 | } 455 | 45.5545454545%, 54.4454545455% { 456 | --c12-x:1; 457 | } 458 | } 459 | @keyframes c12-y { 460 | 0%, 40%, 60%, to { 461 | --c12-y:0; 462 | } 463 | 40.1%, 59.9% { 464 | --c12-y:1; 465 | } 466 | } 467 | c > c > c > c > c > c > c > c > c > c > c > c > c { 468 | animation: c13-x linear, c13-y linear; 469 | container-name: c13; 470 | } 471 | 472 | c > c > c > c > c > c > c > c > c > c > c > c > c:before { 473 | left: 54.5454545455%; 474 | top: 40%; 475 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e13, paused); 476 | } 477 | @container c13 style(--c13-x: 1) and style(--c13-y: 1) { 478 | c > c > c > c > c > c > c > c > c > c > c > c > c:before { 479 | --e13: running; 480 | } 481 | } 482 | 483 | @keyframes c13-x { 484 | 0%, 54.5454545455%, 63.6363636364%, to { 485 | --c13-x:0; 486 | } 487 | 54.6454545455%, 63.5363636364% { 488 | --c13-x:1; 489 | } 490 | } 491 | @keyframes c13-y { 492 | 0%, 40%, 60%, to { 493 | --c13-y:0; 494 | } 495 | 40.1%, 59.9% { 496 | --c13-y:1; 497 | } 498 | } 499 | c > c > c > c > c > c > c > c > c > c > c > c > c > c { 500 | animation: c14-x linear, c14-y linear; 501 | container-name: c14; 502 | } 503 | 504 | c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 505 | left: 72.7272727273%; 506 | top: 40%; 507 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e14, paused); 508 | } 509 | @container c14 style(--c14-x: 1) and style(--c14-y: 1) { 510 | c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 511 | --e14: running; 512 | } 513 | } 514 | 515 | @keyframes c14-x { 516 | 0%, 72.7272727273%, 81.8181818182%, to { 517 | --c14-x:0; 518 | } 519 | 72.8272727273%, 81.7181818182% { 520 | --c14-x:1; 521 | } 522 | } 523 | @keyframes c14-y { 524 | 0%, 40%, 60%, to { 525 | --c14-y:0; 526 | } 527 | 40.1%, 59.9% { 528 | --c14-y:1; 529 | } 530 | } 531 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c { 532 | animation: c15-x linear, c15-y linear; 533 | container-name: c15; 534 | } 535 | 536 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 537 | left: 45.4545454545%; 538 | top: 20%; 539 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e15, paused); 540 | } 541 | @container c15 style(--c15-x: 1) and style(--c15-y: 1) { 542 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 543 | --e15: running; 544 | } 545 | } 546 | 547 | @keyframes c15-x { 548 | 0%, 45.4545454545%, 54.5454545455%, to { 549 | --c15-x:0; 550 | } 551 | 45.5545454545%, 54.4454545455% { 552 | --c15-x:1; 553 | } 554 | } 555 | @keyframes c15-y { 556 | 0%, 20%, 40%, to { 557 | --c15-y:0; 558 | } 559 | 20.1%, 39.9% { 560 | --c15-y:1; 561 | } 562 | } 563 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c { 564 | animation: c16-x linear, c16-y linear; 565 | container-name: c16; 566 | } 567 | 568 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 569 | left: 27.2727272727%; 570 | top: 0%; 571 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e16, paused); 572 | } 573 | @container c16 style(--c16-x: 1) and style(--c16-y: 1) { 574 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 575 | --e16: running; 576 | } 577 | } 578 | 579 | @keyframes c16-x { 580 | 0%, 27.2727272727%, 36.3636363636%, to { 581 | --c16-x:0; 582 | } 583 | 27.3727272727%, 36.2636363636% { 584 | --c16-x:1; 585 | } 586 | } 587 | @keyframes c16-y { 588 | 0%, 0%, 20%, to { 589 | --c16-y:0; 590 | } 591 | 0.1%, 19.9% { 592 | --c16-y:1; 593 | } 594 | } 595 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c { 596 | animation: c17-x linear, c17-y linear; 597 | container-name: c17; 598 | } 599 | 600 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 601 | left: 45.4545454545%; 602 | top: 60%; 603 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e17, paused); 604 | } 605 | @container c17 style(--c17-x: 1) and style(--c17-y: 1) { 606 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 607 | --e17: running; 608 | } 609 | } 610 | 611 | @keyframes c17-x { 612 | 0%, 45.4545454545%, 54.5454545455%, to { 613 | --c17-x:0; 614 | } 615 | 45.5545454545%, 54.4454545455% { 616 | --c17-x:1; 617 | } 618 | } 619 | @keyframes c17-y { 620 | 0%, 60%, 80%, to { 621 | --c17-y:0; 622 | } 623 | 60.1%, 79.9% { 624 | --c17-y:1; 625 | } 626 | } 627 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c { 628 | animation: c18-x linear, c18-y linear; 629 | container-name: c18; 630 | } 631 | 632 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 633 | left: 18.1818181818%; 634 | top: 60%; 635 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e18, paused); 636 | } 637 | @container c18 style(--c18-x: 1) and style(--c18-y: 1) { 638 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 639 | --e18: running; 640 | } 641 | } 642 | 643 | @keyframes c18-x { 644 | 0%, 18.1818181818%, 27.2727272727%, to { 645 | --c18-x:0; 646 | } 647 | 18.2818181818%, 27.1727272727% { 648 | --c18-x:1; 649 | } 650 | } 651 | @keyframes c18-y { 652 | 0%, 60%, 80%, to { 653 | --c18-y:0; 654 | } 655 | 60.1%, 79.9% { 656 | --c18-y:1; 657 | } 658 | } 659 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c { 660 | animation: c19-x linear, c19-y linear; 661 | container-name: c19; 662 | } 663 | 664 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 665 | left: 54.5454545455%; 666 | top: 60%; 667 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e19, paused); 668 | } 669 | @container c19 style(--c19-x: 1) and style(--c19-y: 1) { 670 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 671 | --e19: running; 672 | } 673 | } 674 | 675 | @keyframes c19-x { 676 | 0%, 54.5454545455%, 63.6363636364%, to { 677 | --c19-x:0; 678 | } 679 | 54.6454545455%, 63.5363636364% { 680 | --c19-x:1; 681 | } 682 | } 683 | @keyframes c19-y { 684 | 0%, 60%, 80%, to { 685 | --c19-y:0; 686 | } 687 | 60.1%, 79.9% { 688 | --c19-y:1; 689 | } 690 | } 691 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c { 692 | animation: c20-x linear, c20-y linear; 693 | container-name: c20; 694 | } 695 | 696 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 697 | left: 63.6363636364%; 698 | top: 0%; 699 | animation: b 0.8s steps(6) infinite, e 0.05s forwards var(--e20, paused); 700 | } 701 | @container c20 style(--c20-x: 1) and style(--c20-y: 1) { 702 | c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c > c:before { 703 | --e20: running; 704 | } 705 | } 706 | 707 | @keyframes c20-x { 708 | 0%, 63.6363636364%, 72.7272727273%, to { 709 | --c20-x:0; 710 | } 711 | 63.7363636364%, 72.6272727273% { 712 | --c20-x:1; 713 | } 714 | } 715 | @keyframes c20-y { 716 | 0%, 0%, 20%, to { 717 | --c20-y:0; 718 | } 719 | 0.1%, 19.9% { 720 | --c20-y:1; 721 | } 722 | } 723 | r { 724 | color: #fefeff; 725 | font-size: 35px; 726 | visibility: hidden; 727 | --r1:0; 728 | --r2:0; 729 | --r3:0; 730 | --r4:0; 731 | --r5:0; 732 | --r6:0; 733 | --r7:0; 734 | --r8:0; 735 | --r9:0; 736 | --r10:0; 737 | --r11:0; 738 | --r12:0; 739 | --r13:0; 740 | --r14:0; 741 | --r15:0; 742 | --r16:0; 743 | --r17:0; 744 | --r18:0; 745 | --r19:0; 746 | --r20:0; 747 | --sum: calc(var(--r1) + var(--r2) + var(--r3) + var(--r4) + var(--r5) + var(--r6) + var(--r7) + var(--r8) + var(--r9) + var(--r10) + var(--r11) + var(--r12) + var(--r13) + var(--r14) + var(--r15) + var(--r16) + var(--r17) + var(--r18) + var(--r19) + var(--r20)); 748 | animation: r1 .1s forwards var(--s-r1,paused), r2 .1s forwards var(--s-r2,paused), r3 .1s forwards var(--s-r3,paused), r4 .1s forwards var(--s-r4,paused), r5 .1s forwards var(--s-r5,paused), r6 .1s forwards var(--s-r6,paused), r7 .1s forwards var(--s-r7,paused), r8 .1s forwards var(--s-r8,paused), r9 .1s forwards var(--s-r9,paused), r10 .1s forwards var(--s-r10,paused), r11 .1s forwards var(--s-r11,paused), r12 .1s forwards var(--s-r12,paused), r13 .1s forwards var(--s-r13,paused), r14 .1s forwards var(--s-r14,paused), r15 .1s forwards var(--s-r15,paused), r16 .1s forwards var(--s-r16,paused), r17 .1s forwards var(--s-r17,paused), r18 .1s forwards var(--s-r18,paused), r19 .1s forwards var(--s-r19,paused), r20 .1s forwards var(--s-r20,paused); 749 | container-name: r; 750 | } 751 | @container c1 style(--c1-x: 1) and style(--c1-y: 1) { 752 | r { 753 | --s-r1: running; 754 | } 755 | } 756 | @keyframes r1 { 757 | 1%, to { 758 | --r1:1; 759 | } 760 | } 761 | @container c2 style(--c2-x: 1) and style(--c2-y: 1) { 762 | r { 763 | --s-r2: running; 764 | } 765 | } 766 | @keyframes r2 { 767 | 1%, to { 768 | --r2:1; 769 | } 770 | } 771 | @container c3 style(--c3-x: 1) and style(--c3-y: 1) { 772 | r { 773 | --s-r3: running; 774 | } 775 | } 776 | @keyframes r3 { 777 | 1%, to { 778 | --r3:1; 779 | } 780 | } 781 | @container c4 style(--c4-x: 1) and style(--c4-y: 1) { 782 | r { 783 | --s-r4: running; 784 | } 785 | } 786 | @keyframes r4 { 787 | 1%, to { 788 | --r4:1; 789 | } 790 | } 791 | @container c5 style(--c5-x: 1) and style(--c5-y: 1) { 792 | r { 793 | --s-r5: running; 794 | } 795 | } 796 | @keyframes r5 { 797 | 1%, to { 798 | --r5:1; 799 | } 800 | } 801 | @container c6 style(--c6-x: 1) and style(--c6-y: 1) { 802 | r { 803 | --s-r6: running; 804 | } 805 | } 806 | @keyframes r6 { 807 | 1%, to { 808 | --r6:1; 809 | } 810 | } 811 | @container c7 style(--c7-x: 1) and style(--c7-y: 1) { 812 | r { 813 | --s-r7: running; 814 | } 815 | } 816 | @keyframes r7 { 817 | 1%, to { 818 | --r7:1; 819 | } 820 | } 821 | @container c8 style(--c8-x: 1) and style(--c8-y: 1) { 822 | r { 823 | --s-r8: running; 824 | } 825 | } 826 | @keyframes r8 { 827 | 1%, to { 828 | --r8:1; 829 | } 830 | } 831 | @container c9 style(--c9-x: 1) and style(--c9-y: 1) { 832 | r { 833 | --s-r9: running; 834 | } 835 | } 836 | @keyframes r9 { 837 | 1%, to { 838 | --r9:1; 839 | } 840 | } 841 | @container c10 style(--c10-x: 1) and style(--c10-y: 1) { 842 | r { 843 | --s-r10: running; 844 | } 845 | } 846 | @keyframes r10 { 847 | 1%, to { 848 | --r10:1; 849 | } 850 | } 851 | @container c11 style(--c11-x: 1) and style(--c11-y: 1) { 852 | r { 853 | --s-r11: running; 854 | } 855 | } 856 | @keyframes r11 { 857 | 1%, to { 858 | --r11:1; 859 | } 860 | } 861 | @container c12 style(--c12-x: 1) and style(--c12-y: 1) { 862 | r { 863 | --s-r12: running; 864 | } 865 | } 866 | @keyframes r12 { 867 | 1%, to { 868 | --r12:1; 869 | } 870 | } 871 | @container c13 style(--c13-x: 1) and style(--c13-y: 1) { 872 | r { 873 | --s-r13: running; 874 | } 875 | } 876 | @keyframes r13 { 877 | 1%, to { 878 | --r13:1; 879 | } 880 | } 881 | @container c14 style(--c14-x: 1) and style(--c14-y: 1) { 882 | r { 883 | --s-r14: running; 884 | } 885 | } 886 | @keyframes r14 { 887 | 1%, to { 888 | --r14:1; 889 | } 890 | } 891 | @container c15 style(--c15-x: 1) and style(--c15-y: 1) { 892 | r { 893 | --s-r15: running; 894 | } 895 | } 896 | @keyframes r15 { 897 | 1%, to { 898 | --r15:1; 899 | } 900 | } 901 | @container c16 style(--c16-x: 1) and style(--c16-y: 1) { 902 | r { 903 | --s-r16: running; 904 | } 905 | } 906 | @keyframes r16 { 907 | 1%, to { 908 | --r16:1; 909 | } 910 | } 911 | @container c17 style(--c17-x: 1) and style(--c17-y: 1) { 912 | r { 913 | --s-r17: running; 914 | } 915 | } 916 | @keyframes r17 { 917 | 1%, to { 918 | --r17:1; 919 | } 920 | } 921 | @container c18 style(--c18-x: 1) and style(--c18-y: 1) { 922 | r { 923 | --s-r18: running; 924 | } 925 | } 926 | @keyframes r18 { 927 | 1%, to { 928 | --r18:1; 929 | } 930 | } 931 | @container c19 style(--c19-x: 1) and style(--c19-y: 1) { 932 | r { 933 | --s-r19: running; 934 | } 935 | } 936 | @keyframes r19 { 937 | 1%, to { 938 | --r19:1; 939 | } 940 | } 941 | @container c20 style(--c20-x: 1) and style(--c20-y: 1) { 942 | r { 943 | --s-r20: running; 944 | } 945 | } 946 | @keyframes r20 { 947 | 1%, to { 948 | --r20:1; 949 | } 950 | } 951 | 952 | r:before { 953 | content: "SCORE - " counter(r, decimal-leading-zero); 954 | position: absolute; 955 | right: -30px; 956 | bottom: -90px; 957 | padding: 8px 16px 8px 0; 958 | counter-reset: r var(--sum); 959 | } 960 | 961 | r:after { 962 | content: "TIME - " counter(s1, decimal-leading-zero) "s"; 963 | font-variant-numeric: tabular-nums; 964 | counter-reset: s1 var(--s1) s2 var(--s2); 965 | position: absolute; 966 | left: -30px; 967 | bottom: -90px; 968 | padding: 8px; 969 | animation: s1 60s linear forwards paused; 970 | background: url(https://assets.codepen.io/1480814/win_1.png) bottom/auto 0 no-repeat; 971 | } 972 | @container r style(--sum: 20) { 973 | r:after { 974 | content: "You did it in " counter(s1, decimal-leading-zero) "s"; 975 | background: url(https://assets.codepen.io/1480814/win_1.png) 50% 70%/auto 60% no-repeat var(--b) content-box; 976 | inset: -30px -30px -90px; 977 | padding-right: 6px; 978 | animation-play-state: paused !important; 979 | text-align: center; 980 | font-size: 55px; 981 | z-index: 99989; 982 | visibility: visible; 983 | } 984 | } 985 | 986 | @keyframes s1 { 987 | to { 988 | --s1:60; 989 | } 990 | } 991 | g { 992 | display: block; 993 | width: 2160px; 994 | height: 1260px; 995 | } 996 | 997 | body { 998 | position: relative; 999 | margin: auto auto 60px; 1000 | overflow: auto; 1001 | scrollbar-width: none; 1002 | width: 720px; 1003 | height: 420px; 1004 | box-shadow: -6px 0 var(--c2), -6px 0 var(--c2) inset, 0 -6px var(--c2) inset; 1005 | background: var(--b); 1006 | cursor: pointer; 1007 | } 1008 | 1009 | b:before { 1010 | content: "Collect the Coins\aWith your keyboard!\a\a\a🖱️Click to start"; 1011 | font-size: 40px; 1012 | white-space: pre; 1013 | text-align: center; 1014 | position: absolute; 1015 | inset: -15px -15px -60px; 1016 | padding-top: 30px; 1017 | pointer-events: none; 1018 | z-index: 5896; 1019 | color: #fefeff; 1020 | background: url(https://assets.codepen.io/1480814/mm.png) bottom/80px auto no-repeat, url(https://assets.codepen.io/1480814/k.png) 50% 43%/110px auto no-repeat var(--b); 1021 | } 1022 | 1023 | body:focus-within { 1024 | cursor: none; 1025 | } 1026 | 1027 | body:focus-within b:before { 1028 | opacity: 0; 1029 | } 1030 | 1031 | body:focus-within m { 1032 | opacity: 1; 1033 | } 1034 | 1035 | body:focus-within r { 1036 | visibility: visible; 1037 | } 1038 | 1039 | body:focus-within r:after { 1040 | animation-play-state: running; 1041 | } 1042 | 1043 | html { 1044 | font-family: "Retro Mario", sans serif; 1045 | min-height: 100vh; 1046 | overflow: hidden; 1047 | display: grid; 1048 | --c1: #954b0c; 1049 | --c2: #000; 1050 | --b: #6185f8; 1051 | --g:conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0); 1052 | background: var(--g) 50% 100%, var(--g) calc(50% + 30px) calc(100% + 30px) var(--c2); 1053 | background-size: 60px 60px; 1054 | } 1055 | 1056 | html:before { 1057 | content: "Super CSS Mario"; 1058 | position: absolute; 1059 | inset: auto 0 510px; 1060 | width: fit-content; 1061 | margin: auto; 1062 | color: #ffccc5; 1063 | font-size: 50px; 1064 | padding: 10px 25px; 1065 | background: #994e00; 1066 | text-shadow: 5px 5px #000; 1067 | border: 3px solid; 1068 | } 1069 | 1070 | @media (width < 720px), (height < 540px) { 1071 | html:after { 1072 | content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!"; 1073 | white-space: pre-wrap; 1074 | background: var(--b); 1075 | position: absolute; 1076 | inset: 0; 1077 | z-index: calc(infinity); 1078 | display: grid; 1079 | place-content: center; 1080 | text-align: center; 1081 | font-size: 40px; 1082 | padding: 40px; 1083 | color: #fff; 1084 | } 1085 | } 1086 | @supports not (animation-timeline: scroll()) { 1087 | html:after { 1088 | content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)"; 1089 | white-space: pre-wrap; 1090 | background: var(--b); 1091 | position: absolute; 1092 | inset: 0; 1093 | z-index: calc(infinity); 1094 | display: grid; 1095 | place-content: center; 1096 | text-align: center; 1097 | font-size: 40px; 1098 | padding: 40px; 1099 | color: #fff; 1100 | } 1101 | } --------------------------------------------------------------------------------