[css] sah

Viewer

  1. *, *::before, *::after {
  2.   padding: 0;
  3.   margin: 0 auto;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   background-color: #111;
  8.   color: #fff;
  9.   min-height: 100vh;
  10.   display: flex;
  11.   justify-content: center;
  12.   align-items: center;
  13. }
  14. .penrose {
  15.   position: relative;
  16.   filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 50px #43300a);
  17. }
  18. .triangle {
  19.   position: absolute;
  20. }
  21. .triangle:nth-child(-n + 3) {
  22.   width: 146px;
  23.   height: 36px;
  24.   transform: translate(-50%, -50%) rotate(var(--aAngle)) translateX(31.4px) translateY(36px) skewX(-30deg);
  25.   background-image: linear-gradient(to right, #000a, #0000 50%);
  26.   animation: triangleZ1 20s infinite step-end;
  27. }
  28. @keyframes triangleZ1 {
  29.   0%, 85% {
  30.     z-index: 2;
  31.   }
  32.   25% {
  33.     z-index: -2;
  34.   }
  35. }
  36. .triangle:nth-child(n + 4) {
  37.   width: 50px;
  38.   height: 205px;
  39.   transform: translate(-50%, -50%) rotate(var(--aAngle)) translateX(59.2px) translateY(-48.5px) skewX(30deg);
  40.   background-image: linear-gradient(#000a, #0000 50%);
  41.   animation: triangleZ2 20s infinite step-end;
  42. }
  43. @keyframes triangleZ2 {
  44.   0%, 50% {
  45.     z-index: 2;
  46.   }
  47.   33.333% {
  48.     z-index: -2;
  49.   }
  50. }
  51. .triangle:nth-child(3n) {
  52.   background-color: #df9f20;
  53.   --aAngle: 0;
  54.   animation-delay: -6.6666666667s;
  55. }
  56. .triangle:nth-child(3n + 1) {
  57.   background-color: #59400d;
  58.   --aAngle: 120deg;
  59.   animation-delay: 0s;
  60. }
  61. .triangle:nth-child(3n + 2) {
  62.   background-color: #b3801a;
  63.   --aAngle: 240deg;
  64.   animation-delay: -13.3333333333s;
  65. }
  66. .ball {
  67.   position: absolute;
  68.   width: 30px;
  69.   height: 30px;
  70.   animation: ball 20s infinite ease-in-out;
  71. }
  72. @keyframes ball {
  73.   0%, 100% {
  74.     transform: translate(-50%, -50%) translateX(0px) translateY(-171px);
  75.   }
  76.   8.333% {
  77.     transform: translate(-50%, -50%) translateX(110px) translateY(20px);
  78.   }
  79.   16.666% {
  80.     transform: translate(-50%, -50%) translateX(-30px) translateY(20px);
  81.   }
  82.   25% {
  83.     transform: translate(-50%, -50%) translateX(35px) translateY(-125px);
  84.   }
  85.   33.333% {
  86.     transform: translate(-50%, -50%) translateX(148px) translateY(90px);
  87.   }
  88.   41.666% {
  89.     transform: translate(-50%, -50%) translateX(-80px) translateY(90px);
  90.   }
  91.   50% {
  92.     transform: translate(-50%, -50%) translateX(0px) translateY(-50px);
  93.   }
  94.   58.333% {
  95.     transform: translate(-50%, -50%) translateX(110px) translateY(90px);
  96.   }
  97.   66.666% {
  98.     transform: translate(-50%, -50%) translateX(-148px) translateY(90px);
  99.   }
  100.   75% {
  101.     transform: translate(-50%, -50%) translateX(-25px) translateY(-115px);
  102.   }
  103.   83.333% {
  104.     transform: translate(-50%, -50%) translateX(50px) translateY(12px);
  105.   }
  106.   91.666% {
  107.     transform: translate(-50%, -50%) translateX(-110px) translateY(12px);
  108.   }
  109. }
  110. .ball::before {
  111.   content: '';
  112.   position: absolute;
  113.   top: -50%;
  114.   left: -100%;
  115.   width: 300%;
  116.   height: 200%;
  117.   background-image: radial-gradient(#0005, #0000 50%);
  118.   animation: shadowDir 20s infinite step-end;
  119. }
  120. @keyframes shadowDir {
  121.   0% {
  122.     transform: rotate(0deg) skewX(30deg);
  123.   }
  124.   33.333% {
  125.     transform: rotate(120deg) skewX(30deg);
  126.   }
  127.   66.666% {
  128.     transform: rotate(60deg) skewX(30deg);
  129.   }
  130. }
  131. .ball::after {
  132.   content: '';
  133.   position: absolute;
  134.   width: 100%;
  135.   height: 100%;
  136.   border-radius: 50%;
  137.   background-image: radial-gradient(circle at top, lightblue, #000 100%);
  138. }
  139.  

Editor

You can edit this paste and save as new:


File Description
  • sah
  • Paste Code
  • 30 Jun-2022
  • 3.27 Kb
You can Share it: