1. <strong id="d2o2m"><address id="d2o2m"><rp id="d2o2m"></rp></address></strong>

    <acronym id="d2o2m"></acronym>
    <acronym id="d2o2m"><sup id="d2o2m"><nav id="d2o2m"></nav></sup></acronym>
    <optgroup id="d2o2m"><em id="d2o2m"><del id="d2o2m"></del></em></optgroup>
    <ol id="d2o2m"></ol>
  2. 用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

    黄片基地 <