JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<div class="pro-but">
</div>

<div class="notice">
务必手机屏幕方向锁定后，再进入考验
</div>

CSS

.pro-but{
    width: 61px;
    height: 61px;
    background: url(http://test.gift.rank.b.ispeak.cn/static/template/img/pro_but.png?t=20180608) no-repeat;
    animation:runBut 0.9s infinite;
    cursor: pointer;
}

@keyframes runBut{
    0% {transform:scale(0.8)} 
    30% {transform:scale(1);transform:rotate(0);}
    55% {transform:rotate(-9deg);}
    75% {transform:rotate(9deg);}
    100% {transform:scale(0.8)} 
}

.notice{
   font-size: 14px;
   color: #f00;
   animation:runNotice 2s infinite;
}

@keyframes runNotice{
    0% {opacity:0} 
    40% {opacity:0.3} 
    75% {opacity:1} 
    100% {opacity:0.3} 
}