The Power of Pure CSS - No JavaScript Needed

41

Pure CSS Table Highlight (vertical & horizontal)

By: pixeldev

:root {
  --bg-color: #fff;
  --wave-color: #2c3e50;
  --animation-time: 8s;
  --max-height: 200px;
  --circle-offset: -1.5%;
  --wave-width: 55%;
  --height-wave-up: 109%;
  --height-wave-down: 100%;
  --top-wave-up: 60%;
  --top-wave-down: 40%;
  --border-radius-right-up: 100% 50%;
  --border-radius-left-up: 50% 100%; 
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--wave-color);
}

.container {
  position: relative;
  height: 50vh;
  background: var(--bg-color);
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--max-height);
  background: var(--bg-color);
  animation: beWavy var(--animation-time) infinite linear;
}

.wave::before, .wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: var(--border-radius-right-up);
  width: var(--wave-width);
}

.wave::before {
  height: var(--height-wave-up);
  background-color: var(--wave-color);
  right: var(--circle-offset);
  top: var(--top-wave-up);
  animation: beWavyBefore var(--animation-time) infinite step-end;
}
.wave::after {
  height: var(--height-wave-down);
  background-color: var(--bg-color);
  left: var(--circle-offset);
  top: var(--top-wave-down);
  animation: beWavyAfter var(--animation-time) infinite step-end;
}

@keyframes beWavy {
  0% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  25% {
    animation-timing-function: ease-out;
    height: 0;
  }
  50% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  75% {
    animation-timing-function: ease-out;
    height: 0;
  }
  100% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
}

@keyframes beWavyBefore {
  25% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-right-up);
  }
}

@keyframes beWavyAfter {
  25% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-right-up);
  }
}

41

Pure CSS Animated Wave

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;
  }
}

41

BeeSoft (Pure CSS Loading Animation)

By: pixeldev

<div class="pricing-table clearfix">
	<ul class="highlight-low">
		<li class="heading">Free</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
	</ul>
	<ul class="highlight-high">
		<li class="heading">Premium</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
  </ul>
	<ul class="highlight-medium">
		<li class="heading">Free</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
	</ul>
</div>

.pricing-table {
  width: 700px;
  margin: 30px auto 30px auto;
  font-family:"Arial";
}
.pricing-table ul {
  width: 33%;
  text-align: center;
  background: #fff;
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
  position: relative;
}
.pricing-table ul.highlight-low {
  margin-right: -5px;
}
.pricing-table ul.highlight-low .heading {
  font-size: 22px;
  padding: 15px 0;
  border: 5px solid #cfcfcf;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #e3e3e3;
  background-image: -moz-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#cfcfcf));
  background-image: -webkit-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: -o-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: linear-gradient(to bottom, #f0f0f0, #cfcfcf);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#ffcfcfcf', GradientType=0);
}
.pricing-table ul.highlight-low .price {
  background: #dfe9f0;
  border-left: 5px solid #cfcfcf;
  border-right: 5px solid #cfcfcf;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-low .feature {
  border-left: 5px solid #cfcfcf;
  border-right: 5px solid #cfcfcf;
}
.pricing-table ul.highlight-low .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-low .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-low .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #cfcfcf;
  border-top: 0px;
  padding: 15px 0;
  font-size: 22px;
}
.pricing-table ul.highlight-high {
  z-index: 100;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  margin-top: -12px;
}
.pricing-table ul.highlight-high .heading {
  font-size: 22px;
  padding: 24px 0;
  border: 5px solid #21507d;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #2c5d8e;
  background-image: -moz-linear-gradient(top, #336699, #21507d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#336699), to(#21507d));
  background-image: -webkit-linear-gradient(top, #336699, #21507d);
  background-image: -o-linear-gradient(top, #336699, #21507d);
  background-image: linear-gradient(to bottom, #336699, #21507d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff336699', endColorstr='#ff21507d', GradientType=0);
  color: #fff;
}
.pricing-table ul.highlight-high .price {
  background: #dfe9f0;
  border-left: 5px solid #21507d;
  border-right: 5px solid #21507d;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-high .feature {
  border-left: 5px solid #21507d;
  border-right: 5px solid #21507d;
}
.pricing-table ul.highlight-high .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-high .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-high .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #21507d;
  border-top: 0px;
  padding: 24px 0;
  font-size: 22px;
}
.pricing-table ul.highlight-medium {
  margin-left: -5px;
}
.pricing-table ul.highlight-medium .heading {
  font-size: 22px;
  padding: 15px 0;
  border: 5px solid #589f0c;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #6abc12;
  background-image: -moz-linear-gradient(top, #76cf16, #589f0c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#76cf16), to(#589f0c));
  background-image: -webkit-linear-gradient(top, #76cf16, #589f0c);
  background-image: -o-linear-gradient(top, #76cf16, #589f0c);
  background-image: linear-gradient(to bottom, #76cf16, #589f0c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff76cf16', endColorstr='#ff589f0c', GradientType=0);
  color: #fff;
}
.pricing-table ul.highlight-medium .price {
  background: #dfe9f0;
  border-left: 5px solid #589f0c;
  border-right: 5px solid #589f0c;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-medium .feature {
  border-left: 5px solid #589f0c;
  border-right: 5px solid #589f0c;
}
.pricing-table ul.highlight-medium .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-medium .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-medium .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #589f0c;
  border-top: 0px;
  padding: 15px 0;
  font-size: 22px;
}

41

Pure CSS Pricing Table

By: pixeldev

html,body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#FFCDD2, #F48FB1);
}

.👋 {
    width: 400px;
    height: 400px;
    background-color: whitesmoke;
    background-image: linear-gradient(
        darkblue,
        rgba(255, 255, 255, 0) 80%,
        rgba(255, 255, 255, 0.5)
    );
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow:hidden;
}

.👋 .title {
    color: white;
    font-size: 24px;
    font-family: serif;
    text-align: center;
    text-transform: uppercase;
    line-height: 250px;
    letter-spacing: 0.4em;
    z-index: 1;
    position: absolute;
    width: 100%;
}

.👋 .wave {
    width: 600px;
    height: 600px;
    position: absolute;
    background-color: #039BE5;
    top: -250px;
    left: -100px;
    filter: opacity(0.4);
    border-radius: 43%;
    animation: drift linear infinite;
    transform-origin: 50% 48%;
}
.sp{
   width:100px;
   height:100px;
   background-color:red;
}
.👋 .wave:nth-of-type(1) {
    animation-duration: 5s;
}

.👋 .wave:nth-of-type(2) {
    animation-duration: 7s;
}

.👋 .wave:nth-of-type(3) {
    animation-duration: 9s;
    background-color: red;
    filter: opacity(0.1);
}

@keyframes drift {
    from {
        transform: rotate(360deg);
    }
}

41

Waves animation Pure CSS

By: pixeldev

<li class="body">
     
		<ul class="main">
        
			<li><a><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li>
        
			<li class="projects"><a><i class="fa fa-tasks" aria-hidden="true"></i>  ANIMATION 1 ↓</a>
				<ul class="ul" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li>
        
			<li class="about"><a><i class="fa fa-tasks" aria-hidden="true"></i> ANIMATION 2 ↓</a>
				<ul class="ul1" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li> 
        
			<li class="about"><a><i class="fa fa-tasks" aria-hidden="true"></i> ANIMATION 3 ↓</a>
				<ul class="ul2" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li>

body{
font-family: 'Cormorant Garamond', serif;
font-size:15px;
 font-weight: bold;
}

ul{
position:absolute;
list-style-type:none;
background:#CE93D8;
margin:0px;
padding:0px;
margin-top:-90px;
}

li{
display:inline-block;
padding:20px;
cursor:pointer;
}

a{
text-decoration:none;
color:black;
}

.ul{
position:absolute;
display:none;
background:#b3d4fc;

-webkit-animation:mymove .3s linear ;
}

.ul:hover .ul{
display:block;
}

li ul li:hover a{
color:white;
}

.projects:hover ul{
display:block;
margin-top:20px;
}

.projects:hover .ul li{
display:block;
}

.projects .ul li a{
padding:10px;
color:black;
}

.projects .ul li:hover a{
color:white;
}

li ul li{
transition:all .2s;
}

li ul li:hover{
background:#795548;
}

@-webkit-keyframes mymove {
    0%  {transform:translate3d(0px,50px,0px)}
    
    25% {transform:translate3d(0,0px,0)}
  
   50% {transform:translate3d(0,25px,0)}
  
   100% {transform:translate3d(0,0,0)}
}

div{
background:#80CBC4;

height:70px;
 box-shadow: 
        0px 11px 8px -10px #CCC,
        0px -11px 8px -10px #CCC; 
}
.ul1{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move .3s linear alternate ;
}
.about .ul1 li a{
  color:black;
}
.about .ul1 li:hover a{
  color:white;
}
.about:hover .ul1{
display:block;
margin-top:20px;
}
.about:hover .ul1 li{
display:block;
}
.ul1:hover .ul1 {
display:block;
}
@-webkit-keyframes move {
   0%   {transform:translate3d(50px,0,0)}
    
    25% {transform:translate3d(0,0,0)}
  
   50% {transform:translate3d(25px,0,0)}
  
   100% {transform:translate3d(0,0,0)}
}

.ul2{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move1 .2s linear alternate ;
}
.about .ul2 li a{
  color:black;
}
.about .ul1 li:hover a{
  color:white;
}
.about:hover .ul2{
display:block;
margin-top:20px;
}
.about:hover .ul2 li{
display:block;
}
.ul2:hover .ul2 {
display:block;
}
@-webkit-keyframes move1 {
   0%   {transform:  scale(.5);}
    50% {transform:scale(1.2);}
  100% {transform:scale(1);}
}

.ul li:hover{
  background:#689F38;
}
.ul1 li:hover{
  background:#689F38;
}
.ul2 li:hover{
  background:#689F38;
}

41

Pure CSS Dropdown Menubar with animations

By: pixeldev

body {
	font-family: 'Montserrat', sans-serif;
}
.textContainer {
	width: 100%;
	height: 100vh;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}
h1 {
	position: relative;
	text-transform: uppercase;
	font-size: 50px;
	letter-spacing: 2px;
	margin-bottom: 20px;
	color: red;
	justify-content: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
span {
	display: inline-block; 
	position: relative; 
}
.bouncingAnim {
	justify-content: center;
	align-items: flex-end;
}
.bouncingAnim span.ml_25 {margin-left: 25px;}
.bouncingAnim span:nth-child(1) {animation: bounce 2.3s ease-in-out infinite; }
.bouncingAnim span:nth-child(2) {animation: bounce 2.3s ease-in-out .33s infinite; }
.bouncingAnim span:nth-child(3) {animation: bounce 2.3s ease-in-out 0.66s infinite; }
.bouncingAnim span:nth-child(4) {animation: bounce 2.3s ease-in-out 0.99s infinite; }
.bouncingAnim span:nth-child(5) {animation: bounce 2.3s ease-in-out 1.33s infinite; }
.bouncingAnim span:nth-child(6) {animation: bounce 2.3s ease-in-out 1.66s infinite; }
.bouncingAnim span:nth-child(7) {animation: bounce 2.3s ease-in-out 1.99s infinite; }
.bouncingAnim span:nth-child(8) {animation: bounce 2.3s ease-in-out 2.33s infinite; }
.bouncingAnim span:nth-child(9) {animation: bounce 2.3s ease-in-out 2.66s infinite; }
.bouncingAnim span:nth-child(10) {animation: bounce 2.3s ease-in-out 2.99s infinite; }

@-webkit-keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

25%{
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
    opacity: .5;
  }
}
@keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

25%{
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
    opacity: .5;
  }
}

40

Wave Text Animation Pure CSS

By: pixeldev

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #D97A2B 20%, #C44A3A 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

40

Wave Animation Using .png

By: pixeldev

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid rgb(118, 218, 255);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}

.wave {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgb(118, 218, 255);
  border-radius: 50%;
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45%;
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 6s linear infinite;
  z-index: 1;
}

.wave::after {
  border-radius: 47%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 10s linear -5s infinite;
  z-index: 2;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #000;
  z-index: 10;
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}

40

Pure Css Wave Progress bar

By: pixeldev

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #FFCC00;
}

@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

@keyframes typing {
  from { width: 100%; }
  90%, to { width: 0; }
}

@keyframes slide {
  33.3333% {
    font-size: 3rem;
    letter-spacing: 3px;
  }
  to {
    font-size: 0;
    letter-spacing: 0;
  }
}

.typing-slider {
  font-family: Consolas, monospace;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.typing-slider p {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide 15s step-start infinite;
}

.typing-slider p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid black;
  background-color: #FFCC00;
  animation: typing 5s infinite, cursor 1s infinite;
}

/* Slide 1 (16 characters) */
.typing-slider p:nth-child(1) {
  animation-delay: 0s;
}
.typing-slider p:nth-child(1)::after {
  animation-delay: 0s;
  animation-timing-function: steps(16), step-end;
}

/* Slide 2 (23 characters) */
.typing-slider p:nth-child(2) {
  animation-delay: 5s;
}
.typing-slider p:nth-child(2)::after {
  animation-delay: 5s;
  animation-timing-function: steps(23), step-end;
}

/* Slide 3 (12 characters) */
.typing-slider p:nth-child(3) {
  animation-delay: 10s;
}
.typing-slider p:nth-child(3)::after {
  animation-delay: 10s;
  animation-timing-function: steps(12), step-end;
}

40

Text slider with typing animation in pure CSS

By: pixeldev

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 10rem;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0cf;
  border-radius: 10rem;
  z-index: -2;
}

.button:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #0099cc; /* manually darkened #0cf */
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
}

.button:hover {
  color: #fff;
}

.button:hover:before {
  width: 100%;
}

/* Optional reset for presentation */
* {
  font-family: Arial;
  text-decoration: none;
  font-size: 20px;
}

.container {
  padding-top: 50px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 2rem;
  color: #777;
}

40

Pure Css Button Hover effect

By: pixeldev

<h1>Pure CSS Scrollable Table with Fixed Header</h1>
<h2>Using CSS to allow scrolling within a single HTML table</h2>

<h2>The Big 4 Version</h2>
<h3>Basic CSS Browser Filtering</h3>

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
	<tr>
		<th width="20%">Header 1</th>
		<th width="30%">Header 2</th>
		<th width="50%">Header 3</th>
	</tr>
</thead>
<tbody class="scrollContent">
	<tr>
		<td width="20%">Cell Content 1</td>
		<td width="30%">Cell Content 2</td>
		<td width="48%">Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
</tbody>
</table>
</div>

<div>
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
done.
</div>

body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h2 {
	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h3 {
	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008000;
	margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 285px;
	overflow: auto;
	width: 900px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 900px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	/* width: 740px */
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	/* width: 756px */
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */

thead.fixedHeader tr {
	position: relative;
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

html>body tbody.scrollContent {
	display: block;
	height: 262px;
	overflow: auto;
	width: 100%
}

html>body thead.fixedHeader {
	display: table;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

40