<thead id="rrjt3"></thead>
      <progress id="rrjt3"><dfn id="rrjt3"></dfn></progress>

      <em id="rrjt3"></em>

        <address id="rrjt3"><ins id="rrjt3"><dfn id="rrjt3"></dfn></ins></address>
          <i id="rrjt3"></i>

        用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

        黄网站免费 <