“This is the 21st day of my participation in the Gengwen Challenge. For more details, see” Gengwen Challenge “.

Smoking hot weather, the temperature has become unreasonable.

Si Cong children’s shoes can not bear the heat of summer, “heart” ready to move.

But the end became the talk of the streets, finally stumble, happy to hear the music was killed.

If I could say ice cream:

  • Si Cong: You can’t laugh when you eat ice cream
  • Yining: Why?
  • Si Cong: It melts when you laugh.

Would it have ended the same way?

Whatever, it’s not as smart as it sounds, but let’s make our own ice cream with CSS, which might actually please our target at a critical moment

Ice cream main structure

Basic HTML structure:

<div class="container">
  <div class="icecream">
    <div class="cream">
      <div class="texture"></div>
    </div>
    <div class="stick"></div>
  </div>
</div>
Copy the code

Basic CSS styles:

body.html { height: 100%; }

/* Background container */
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #33485F;
}

Cream / * * /
.cream {
  position: relative;
  width: 190px;
  height: 260px;
  border-radius: 80px 80px 10px 10px;
  overflow: hidden;  
  background-color: #efc531;  
}

/* Cream the left side with */
.cream:after {
    content: ' ';
    position: absolute;
    left: 21px;
    bottom: 20px;
    width: 20px;
    height: 170px;
    border-radius: 50px;
    background: rgba(255.255.255.0.5); 
}

/ * * / stick
.stick {
  width: 57px;
  height: 86px;
  background: #E09C5F;
  border-radius: 0 0 25px 25px;
  display: block;
  margin: 0 auto;
}

/* Stick embellishes */
.stick:before {
  display: block;
  content: ' ';
  width: 100%;
  height: 24px;
  background: #8D613B;
}
Copy the code

The results are as follows:

Ice cream grain

The CSS texture effect is added, mainly using repeating-linear-gradient.

/ * * / grain
.texture {
  position: relative;
  top: 0%;
  left: -40%;
  width: 180%;
  height: 120%;
  
  background-image: 
    repeating-linear-gradient(
      #30dcf6 0%.#30dcf6 25%.#f2d200 25%.#f2d200 50%
    );
}
Copy the code

The CSS function repeating-linear-gradient() creates an consisting of repeated linear gradients. This function is similar to linear-gradient and takes the same parameters, but it repeats gradients in all directions to cover its entire container. The result of this function is an object of the

data type, which is of a special
type.

Repeating-linear-gradient you can try the effect online with the repeating-linear-gradient link.

In this example, the default is to repeat the gradient vertically, with an gradient taking 50% of the vertical height (meaning it can be repeated twice) and each inner color block (#30dcf6, #f2d200) taking 25% each. So without the.cream parent element over-flow: hidden CSS, the preview would look like this.

Ice cream Animation

/ * * / grain
.texture {
  /* 略 */
  animation: flavours 100s linear infinite;
  transform: rotate(155deg);
}

@keyframes flavours {
  to {
    background-position: 0 -1000vh; }}Copy the code

As you can see, the main principle is to rotate the lines and open up an infinite loop by changing the background position. The effect is as follows:

Attached codepen source code, CSS icecream, CSS icecream

The last

Writing is not easy, welcome to like, collection, attention. Other articles that might interest you.

  • How many top-paying 40K jobs are there, and where are they located?
  • The front interviewer asked, “Can you build rockets?” I said, “Yes.”
  • Learn about Proxy’s good friend – Reflect, why Reflect

Welcome to follow the public account of the same name [Playing piano to Horse].