Pure CSS Santa Claus for Christmas

by huynguyen2015

HTML

<div id="app"></div>

CSS

.header {
  font-size: 24px;
  padding-top: 24px;
}
.header h1 {
  font-size: 38px;
  font-weight: 600;
}

/* Xmas santa claud */
#splash-xmas-santa {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #f6f7ff !important;
}

#splash-xmas-santa ::selection {
  background: rgba(255, 255, 0, 0.5);
}

#splash-xmas-santa .message h1,
#splash-xmas-santa .message h2 {
  color: #2f3d70 !important;
}

#splash-xmas-santa .window {
  width: 340px;
  height: 340px;
  background: #a0d5d3;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  margin-top: -60px;
  transform: translate(-50%, -50%);
  border: 10px solid #f8e7dc;
  overflow: hidden;
}

#splash-xmas-santa .santa {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

#splash-xmas-santa .santa .body {
  width: 190px;
  height: 210px;
  background: #de2f32;
  position: relative;
  border-radius: 50%;
  top: 0;
  animation: bodyLaugh 4s linear infinite;
  transform: translateY(50%);
}

#splash-xmas-santa .santa .body:before {
  content: ' ';
  width: 7px;
  height: 7px;
  background: #f7be10;
  border-radius: 50%;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10;
}

#splash-xmas-santa .santa .head {
  z-index: 2;
  position: absolute;
  bottom: 90px;
  left: 50%;
  animation: headLaugh 4s linear infinite;
  transform: translateX(-50%);
}

#splash-xmas-santa .santa .head .face {
  width: 120px;
  height: 130px;
  background: #edcab0;
  background: radial-gradient(#edcab0, #e9a982);
  border-radius: 50%;
  border: 3px solid #f8e7dc;
}

#splash-xmas-santa .santa .head .face .redhat .whitepart {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 90%;
  height: 32px;
  background: #f8e7dc;
  border-radius: 50px;
  z-index: 4;
  box-shadow: 0px 6px 0px -4px rgba(0, 0, 0,...

React

const XmasSantaComponent = () => {
  return (<div className="wrap-content">
    <header className="header">
     <h1>Css Santa Claus for Christmas</h1>
     <p>Find more tips at <a href="https://www.1hour.dev/posts/top-3-beautiful-css-animation-for-christmas-season" title="1hour.dev beautiful css animation for Christmas" target="_blank">1hour.dev</a></p>
     <p>
       <a href="https://www.1hour.dev/posts/top-3-beautiful-css-animation-for-christmas-season">See original post</a>
     </p>
    </header>
    <div id="splash-xmas-santa" className="splash-xmas">
      <div className="window">
        <div className="santa">
          <div className="head">
            <div className="face">
              <div className="redhat">
                <div className="whitepart"></div>
                <div className="redpart"></div>
                <div className="hatball"></div>
              </div>
              <div className="eyes"></div>
              <div className="beard">
                <div className="nouse"></div>
                <div className="mouth"></div>
              </div>
            </div>
            <div className="ears"></div>
          </div>
          <div className="body"></div>
        </div>
      </div>
    </div>
    </div>
  )
}


ReactDOM.render(<XmasSantaComponent />, document.querySelector("#app"))