用css弄根夏日冰棒

“我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”

夏天就应该吹着空调来一根冰棒

div布局

<div class="ice_container">
    <div class="ice_header"></div>
    <div class="ice_bar"></div>
</div>

用渐变色来填充冰棒的背景色，每一种颜色代表一种口味， 冰棍加个阴影，最后加上一个晃动的动画。 用到的知识点

一般渐变

• 如果未设置角度，则默认为180deg（从上到下）
• 如果设置了角度，则0deg为竖直向上，然后顺时针旋转 这里我没有设置旋转

overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

:after

:after 选择器向选定元素的最后子元素后面插入内容。

animation属性

• animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义。
• animation-duration: 整个动画需要的时长。
• animation-timing-function: 动画进行中的时速控制，比如 ease 或 linear.
• animation-delay: 动画延迟时间。
• animation-direction: 动画重复执行时运动的方向。
• animation-iteration-count: 动画循环执行的次数。
• animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态。
• animation-play-state: 暂停/启动动画。 infinite alternate 可以无限循环

css样式

<style>
    html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height:100%;
      display: flex;
      justify-content: center;
      align-items:center;
      background-color: #56cbc8;
    }
    .ice_header {
      width: 150px;
      height: 200px;
      border-radius:30px 30px 5px 5px;
      background-color:pink;
      position: relative;
      overflow: hidden;
    }
    .ice_header::after{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background:linear-gradient(
        #fcbad2 0%,
        #fcbad2 25%,
        #6b3e26 25%,
        #6b3e26 75%,
        #ffffd2 75%,
        #ffffd2 100%

      );
      z-index:1;

    }
    .ice_bar {
      margin: 0 auto;
      width: 40px;
      height: 70px;
      background: linear-gradient(
        #d9ae58 0%,
        #d9ae58 25%,
        #ffd379 25%,
        #ffd379 100%
      );
      border-radius: 0 0 10px 10px;
    }
  .ice_container:hover {
    animation: move 1s ease-in-out infinite alternate;
  }
  @keyframes move {
    50% {
      transform: translateX(-20px) rotate(-5deg);
    }
    100% {
      transform: translateX(10px) rotate(1deg);
    }
  }
  </style>

运行效果