<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      用CSS制作一個左右搖擺的圖片

      時間:2020-04-05 10:19:35 類型:HTML/CSS
      字號:    

      看百度知道時,看到一個左右搖擺的“獎”圖,感覺挺有意思,就順手玩下, 以后可能會用到,是不

      效果如下:

      1.jpg

      代碼如下:

      #answer-bar{
      display:block;
      position: relative;
      width: 90px;
      height: 34px;
      background: url('write.png') 4px center no-repeat #4dc86f;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      color: #fff;
      line-height: 34px;
      cursor: pointer;
      margin:100px auto;
      background-size: 20px 20px;
      }
      #answer-bar:after{
      position: absolute;
      left: 73px;
      bottom: 7px;
      display: block;
      width: 35px;
      height: 40px;
      background: url(a.png) no-repeat;
      background-size: 100% 100%;
      content: "";
      animation-name: upAnimation;
      transform-origin: center bottom;
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-iteration-count: infinite;
      animation-delay: .5s;
      }
      @keyframes upAnimation {
      0% {
      	transform:rotate(0deg);
      	transition-timing-function:cubic-bezier(0.215,.61,.355,1)
      }
      10% {
      	transform:rotate(-12deg);
      	transition-timing-function:cubic-bezier(0.215,.61,.355,1)
      }
      20% {
      	transform:rotate(12deg);
      	transition-timing-function:cubic-bezier(0.215,.61,.355,1)
      }
      28% {
      	transform:rotate(-10deg);
      	transition-timing-function:cubic-bezier(0.215,.61,.355,1)
      }
      36% {
      	transform:rotate(10deg);
      	transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
      }
      42% {
      	transform:rotate(-8deg);
      	transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
      }
      48% {
      	transform:rotate(8deg);
      	transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
      }
      52% {
      	transform:rotate(-4deg);
      	transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
      }
      56% {
      	transform:rotate(4deg);
      	transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
      }
      60% {
      	transform:rotate(0deg);
      	transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
      }
      100% {
      	transform:rotate(0deg);
      	transition-timing-function:cubic-bezier(0.215,.61,.355,1)
      }
      }
      <div id="answer-bar">我來答</div>

      用到的兩張小圖:
      write.pnga.png

      黄网站免费 <