The Power of Pure CSS - No JavaScript Needed

<main>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Paleo_food.jpg">
      <h3>1) All of These Headlines Are Not Exactly The Same</h3>
      <p>In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Indian_bengali_food.jpg">
      <h3>2) Some Are Short</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Food_in_Miyajima.jpg">
      <h3>3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point</h3>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P1-Food_with_love.jpg">
      <h3>4) Also, Why Are We Using Fake Content? Let's Make Some Real-ish Content.</h3>
      <p>By using real content, we can see the variation inherent in what this site might present. And we can design for those real world needs.
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Beautiful_Chaldean_Food_for_Everyone.jpg">
      <h3>5) Look At That</h3>
      <p>Doesn't that look yummy?</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Birds_on_stick_Shanghai_Qibao.jpg">
      <h3>6) See how this layout is broken?</h3>
      <p>That's because floats are really crap at handling layout. We've been using a screwdriver as a hammer. It sort of works, but badly.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Restaurant_food_Kunming_Yunnan.jpg">
      <h3>7) The New CSS Will Fix Things</h3>
      <p>Finally we get some real hammers.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Bunter_Teller.jpg">
      <h3>8) Several Kinds of Hammers</h3>
      <p>Grid, Flexbox, Alignment, Shapes, .</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P3-Egyptian_food_Koshary.jpg">
      <h3>9) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Mexican_food.jpg">
      <h3>10) All of These Headlines</h3>
      <p>Always three lines of text, which fits exactly in the available space. Describing where you will go when you click.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P2-Arepitas_Food_Macro.jpg">
      <h3>11) Are Exactly the Same</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Ravenna_food.jpg">
      <h3>12) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
</main>

75

CSS Grid: Columns (Pure CSS Masonry Layout)

By: pixeldev

body{
  background: #333642;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 250px;
  height:600px;
}

.cog-one {
  --cog-color: #898888;
  --cog-accent-color: #A5A2A2;
  --cog-inner-size: 30px;
  --cog-outer-size: 50px;
  
  --start-rotation: 360deg;
  --end-rotation: 0deg;
}

.cog-two {
  --cog-color: #A16036;
  --cog-accent-color: #BC7F60;
  --cog-inner-size: 15px;
  --cog-outer-size: 40px;
  
  --start-rotation: 16deg;
  --end-rotation: 376deg;
  
  left: 120px;
  top: 110px;
  
  transform: rotate(var(--start-rotation));
}

.cog-three {
  --cog-color: #F1B72E;
  --cog-accent-color: #FFD100;
  --cog-inner-size: 20px;
  --cog-outer-size: 50px;
  
  --start-rotation: 300deg;
  --end-rotation: -60deg;
  
  left: 33px;
  top: 210px;
  
  transform: rotate(var(--start-rotation));
  
}

.cog {
  position: absolute;
  width: var(--cog-inner-size);
  height: var(--cog-inner-size);
  background: transparent;
  border-radius: 50%;
  border: var(--cog-outer-size) solid var(--cog-color);
  
  animation: 5s cogRotate infinite linear;
}

@keyframes cogRotate {
  0% {
    transform: rotate(var(--start-rotation));
  }
  
  100% {
    transform: rotate(var(--end-rotation))
  }
}

/* Inner circle accent */
.cog::before {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + 10px);
  height: calc(var(--cog-inner-size) + 10px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Outer circle accent */
.cog::after {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.teeth.vertical {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Top and bottom teeth */
.cog-one .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
  top: -70px;
}

.cog-two .teeth.vertical {
  width: 15px;
  height: 125px;
  top: -55px;
  
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  
}

.cog-three .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
  top: -70px;
}

.teeth.vertical::after {
  content: '';
  position: absolute;
  transform:rotate(45deg);
}

/* Top right and bottom left teeth */
.cog-one .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
}

.cog-two .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  width: 15px;
  height: 125px;
}

.cog-three .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
}

.teeth.horizontal {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

/* Left and right teeth */
.cog-one .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
  left: -55px;
}

.cog-three .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

.teeth.horizontal::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
}

/* Top left and bottom right teeth */
.cog-one .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
}

.cog-three .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

75

Cogs Animation

By: pixeldev

75

Hexagon to Square

By: pixeldev

75

Bouncing text

By: pixeldev

<div id="wrapper">

<div id="SVGWrap">
      <div id="svgA"></div>
      <div id="svgB"></div>
      <div id="svgC"></div>
    </div>

<a id="logo" href="#wrapper">
      <h1>BeeSoft</h1>
    </a>

<div id="intro">

<h1 id="s1">
        <span>
          Making digital
          brand, product
          elegent.
        </span>
      </h1>

<h1 id="s2">
        <span>
          Lorem ipsum dolor sit amet te tur adi.
        </span>
      </h1>

</div>

<nav>
      <span>
        <a href="#s1"></a>
        <a href="#s2"></a>
      </span>
    </nav>

<footer>
      <span id="insta">
        <a href=""></a>
      </span>

<h1 id="copyright">© 2021 BeeSoft</h1>
      <a id="codeby" target="_blank" href="https://icodeayush.github.io/">Code By <span>iCodeAyush</span></a>

</footer>

<div id="Lang">
      <span>
        <a href="#Ru">Ru</a>
        <a href="#En">En</a>
      </span>
    </div>

</div>

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
:root {
  /*-------------Colors------------- */
  --ColorDarkA: rgb(0, 0, 0);
  --ColorWhiteA: rgb(255, 255, 255);
  /*-------------FontSize -- Perfect Fifth (1.500) Base Size 22px------------- */
  --FontH1: 233.25px;
  --FontH2: 144.16px;
  --FontH3: 89.10px;
  --FontH4: 55.07px;
  --FontH5: 34.03px;
  --FontParagraph: 21.03px;
  --FontSubtitle: 13px;
  /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
  --GoldenRatio1: 1920px;
  --GoldenRatio2: 1186.65px;
  --GoldenRatio3: 733.41px;
  --GoldenRatio4: 453.28px;
  --GoldenRatio5: 280.15px;
  --GoldenRatio6: 173.15px;
  --GoldenRatio7: 107.01px;
  --GoldenRatio8: 66.14px;
  --GoldenRatio9: 40.88px;
  --GoldenRatio10: 25.27px;
  --GoldenRatio11: 15.62px;
  --GoldenRatio12: 9.65px;
  --GoldenRatio13: 5.96px;
  /*-------------Animation Timing Function------------- */
  --EaseInPower1: cubic-bezier(0.165, 0.84, 0.44, 1);
  --EaseInPower2: cubic-bezier(0.215, 0.610, 0.355, 1);
  --EaseInPower3: cubic-bezier(0.77, 0, 0.175, 1);
}

::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  color: var(--ColorWhiteA);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lexend', sans-serif;
  background: var(--ColorDarkA);
  height: 100vh;
}

#wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#wrapper #SVGWrap {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
}

#wrapper #SVGWrap div {
  position: absolute;
}

#wrapper #SVGWrap #svgA {
  background: url(https://icodeayush.github.io/BeeSoft/svg/s21.svg) no-repeat center;
  top: 55vw;
  left: -40vw;
  height: 60vw;
  width: 60vw;
}

#wrapper #SVGWrap #svgB {
  background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  width: 10vw;
  height: 10vw;
  left: 35vw;
  top: 57vw;
}

#wrapper #SVGWrap #svgC {
  background: url(https://icodeayush.github.io/BeeSoft/svg/so2.svg) no-repeat center;
  width: 70vw;
  height: 60vw;
  top: 52vw;
  right: -30vw;
}

#wrapper #logo {
  position: absolute;
  z-index: 2;
  width: fit-content;
  top: var(--GoldenRatio7);
  right: var(--GoldenRatio7);
  text-decoration: none;
  overflow: hidden;
}

#wrapper #logo h1 {
  font-size: var(--FontH5);
  font-weight: 600;
  color: var(--ColorWhiteA);
  opacity: 0;
}

#wrapper #intro {
  position: absolute;
  width: var(--GoldenRatio1);
  height: 100vh;
  display: flex;
  overflow: scroll;
  scroll-behavior: smooth;
}

#wrapper #intro h1 {
  display: flex;
  align-items: center;
  width: var(--GoldenRatio1);
  height: 100vh;
  flex-shrink: 0;
  cursor: default;
}

#wrapper #intro h1 span {
  font-size: var(--FontH3);
  font-weight: 600;
  width: var(--GoldenRatio3);
  color: var(--ColorWhiteA);
  margin-left: var(--GoldenRatio7);
  opacity: 0;
}

#wrapper nav {
  position: absolute;
  right: var(--GoldenRatio7);
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#wrapper nav span {
  display: flex;
  justify-content: space-between;
  display: block;
}

#wrapper nav span a:nth-child(1) {
  display: block;
  background: url(https://icodeayush.github.io/BeeSoft/svg/ChevronLeft.svg) no-repeat right;
  background-size: contain;
  height: var(--FontH5);
  width: var(--FontH5);
  margin-bottom: var(--GoldenRatio11);
  opacity: 0;
}

#wrapper nav span a:nth-child(2) {
  display: block;
  background: url(https://icodeayush.github.io/BeeSoft/svg/ChevronRight.svg) no-repeat right;
  background-size: contain;
  height: var(--FontH5);
  width: var(--FontH5);
  opacity: 0;
}

#wrapper footer {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: var(--GoldenRatio7);
  width: var(--GoldenRatio1);
  height: var(--FontH4);
}

#wrapper footer #insta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  margin-left: var(--GoldenRatio7);
  border: 2px solid rgb(255, 255, 255);
  opacity: 0;
}

#wrapper footer #insta a {
  display: block;
  width: var(--FontParagraph);
  height: var(--FontParagraph);
  background: url(https://icodeayush.github.io/BeeSoft/svg/Instagram.svg) no-repeat center;
  background-size: contain;
}

#wrapper footer #Behance {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  margin-left: var(--GoldenRatio11);
  border: 2px solid rgb(255, 255, 255);
  opacity: 0;
}

#wrapper footer #Behance a {
  display: block;
  width: var(--FontH5);
  height: var(--FontParagraph);
  background: url(https://icodeayush.github.io/BeeSoft/svg/Behance.svg) no-repeat center;
  background-size: cover;
}

#wrapper footer #copyright, #wrapper footer #codeby {
  font-size: var(--FontParagraph);
  font-weight: 500;
  color: var(--ColorWhiteA);
  margin-left: var(--GoldenRatio9);
  opacity: 0;
}

#wrapper footer #copyright {
  cursor: default;
}

#wrapper footer #codeby {
  text-decoration: none;
  margin-left: var(--GoldenRatio11);
}

#wrapper footer #codeby span {
  font-weight: 600;
  opacity: 0;
}

#wrapper #Lang {
  position: absolute;
  bottom: var(--GoldenRatio7);
  right: var(--GoldenRatio7);
  height: var(--FontH4);
  display: flex;
  align-items: center;
}

#wrapper #Lang span {
  display: flex;
}

#wrapper #Lang span a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  border: 2px solid rgb(255, 255, 255);
  margin-left: var(--GoldenRatio11);
  font-size: var(--FontParagraph);
  font-weight: 500;
  color: var(--ColorWhiteA);
  text-decoration: none;
  opacity: 0;
}

#wrapper #Lang span a:nth-child(2) {
  background: var(--ColorWhiteA);
  color: var(--ColorDarkA);
  opacity: 0;
}

/*-------------Animation Timeline------------- */

body {
  animation: BGAni 4s 0s ease-in-out infinite alternate-reverse;
}

#wrapper {
  animation: BGFadeAni 1.5s 6.1s ease forwards;
  background: black;
}

#wrapper #SVGWrap {
  animation: SVGFadeAni 3.3s 6.3s ease forwards;
  opacity: 0;
}

#wrapper #SVGWrap #svgA {
  animation: svgA 5.7s 4.9s ease-in-out infinite alternate-reverse;
}

#wrapper #SVGWrap #svgB {
  animation: svgB 5.2s 6.1s ease-in-out infinite alternate-reverse;
}

#wrapper #SVGWrap #svgC {
  animation: svgC 5.2s 6.3s ease-in-out infinite alternate-reverse;
}

#wrapper #intro h1 span {
  animation: LoadAniY 3s 1s var(--EaseInPower3) forwards;
}

#wrapper #logo h1 {
  animation: LoadAniY 2.2s 2.3s var(--EaseInPower2) forwards;
}

#wrapper footer #insta {
  animation: LoadAniOpacityY 1.5s 3.4s var(--EaseInPower2) forwards;
}

#wrapper footer #Behance {
  animation: LoadAniOpacityY 1.5s 3.6s var(--EaseInPower2) forwards;
}

#wrapper footer #copyright {
  animation: LoadAniOpacityY 1.5s 3.8s var(--EaseInPower2) forwards;
}

#wrapper footer #codeby {
  animation: LoadAniOpacityY 1.5s 4.2s var(--EaseInPower2) forwards;
}

#wrapper footer #codeby span {
  animation: LoadAniOpacityY 1.5s 4.4s var(--EaseInPower2) forwards;
}

#wrapper #Lang span a {
  animation: LoadAniOpacityXR 1.5s 4.8s var(--EaseInPower3) forwards;
}

#wrapper #Lang span a:nth-child(2) {
  animation: LoadAniOpacityXL 1.5s 5s var(--EaseInPower3) forwards;
}

#wrapper nav span a:nth-child(1) {
  animation: LoadAniXL 1.5s 6s var(--EaseInPower1) forwards;
}

#wrapper nav span a:nth-child(2) {
  animation: LoadAniXR 1.5s 6.2s var(--EaseInPower1) forwards;
}

/*-------------Animation Keyframes------------- */

@keyframes BGFadeAni {
  from {
    background: black;
  }
  to {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes SVGFadeAni {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes BGAni {
  from {
    background-image: linear-gradient(to top left, #FFC796 0%, #FF6B95 100%);
  }
  to {
    background-image: linear-gradient(to top left, #b721ff 0%, #21d4fd 100%);
  }
}

@keyframes svgA {
  0% {
    width: 20vw;
    height: 20vw;
    left: 10vw;
    top: 25vh;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s21.svg) no-repeat center;
  }
  20% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/s11.svg) no-repeat center;
  }
  100% {
    top: 55vw;
    left: -40vw;
    height: 60vw;
    width: 60vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s11.svg) no-repeat center;
  }
}

@keyframes svgB {
  0% {
    right: 6vw;
    top: 6vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  }
  20% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/s12.svg) no-repeat center;
  }
  100% {
    height: 30vw;
    width: 30vw;
    top: 56vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  }
}

@keyframes svgC {
  0% {
    width: 40vw;
    height: 30vw;
    right: 6vw;
    top: 6vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
  40% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/so2.svg) no-repeat center;
  }
  80% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
  100% {
    width: 70vw;
    height: 60vw;
    top: 52vw;
    right: -30vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
}

@keyframes LoadAniY {
  from {
    opacity: 0;
    transform: translateY(3.1vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniXL {
  from {
    opacity: 0;
    transform: translateX(1.5vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniXR {
  from {
    opacity: 0;
    transform: translateX(-1.5vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityY {
  from {
    opacity: 0;
    transform: translateY(0.7vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityXL {
  from {
    opacity: 0;
    transform: translateX(0.3vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityXR {
  from {
    opacity: 0;
    transform: translateX(-0.3vw);
  }
  to {
    opacity: 1;
  }
}

/*-------------@media (max-width: 1920px)------------- */

@media (max-width: 1920px) {
  :root {
    --FontH1: 12.148vw;
    --FontH2: 7.508vw;
    --FontH3: 4.641vw;
    --FontH4: 2.868vw;
    --FontH5: 1.772vw;
    --FontParagraph: 1.095vw;
    --FontSubtitle: 0.677vw;
    /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
    --GoldenRatio1: 100vw;
    --GoldenRatio2: 61.805vw;
    --GoldenRatio3: 38.198vw;
    --GoldenRatio4: 23.608vw;
    --GoldenRatio5: 14.591vw;
    --GoldenRatio6: 9.018vw;
    --GoldenRatio7: 5.573vw;
    --GoldenRatio8: 3.445vw;
    --GoldenRatio9: 2.129vw;
    --GoldenRatio10: 1.316vw;
    --GoldenRatio11: 0.814vw;
    --GoldenRatio12: 0.503vw;
    --GoldenRatio13: 0.310vw;
  }
}

74

BeeSoft (Pure CSS Loading Animation)

By: pixeldev

74

Wavy text animation

By: pixeldev

73

Pendulum Wave

By: pixeldev

73

Pure CSS using Flexbox CSS Gallery

By: pixeldev

73

Button – Shadow Pulse Animation

By: pixeldev

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #050801;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
a{
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
   
}
a:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
a:nth-child(1){
    filter: hue-rotate(270deg);
}
a:nth-child(2){
    filter: hue-rotate(110deg);
}
a span{
    position: absolute;
    display: block;
}
a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

All

CSS Grid: Columns (Pure CSS Masonry Layout)

By: pixeldev

Cogs Animation

By: pixeldev

Hexagon to Square

By: pixeldev

Bouncing text

By: pixeldev

BeeSoft (Pure CSS Loading Animation)

By: pixeldev

Wavy text animation

By: pixeldev

Pendulum Wave

By: pixeldev

Pure CSS using Flexbox CSS Gallery

By: pixeldev

Button – Shadow Pulse Animation

By: pixeldev

Glowing buttons

By: pixeldev

Button hover with card

By: pixeldev

Flickering Animation

By: pixeldev