头像跳动 动画

一、css

.first {
    width: 128px;
    height: 128px;
    opacity: 1;
    z-index: 6;
    font-size: 22px;
-webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-duration: 1.5s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -moz-animation-iteration-count: infinite;

    -ms-animation-duration: 1.5s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    -ms-animation-iteration-count: infinite;

    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
.first img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #346fe0;
    box-shadow: 0 0 40px 6px #0927c1;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-20px);}
    60% {-moz-transform: translateY(-10px);}
}

@-ms-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
    40% {-ms-transform: translateY(-20px);}
    60% {-ms-transform: translateY(-10px);}
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
.first.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -ms-animation-name: bounce;
    animation-name: bounce;
}

二、html

<ul>
            <li class="first bounce"><img src="images/1.jpg"><span>98</span></li>
            <li class="second bounce"><img src="images/2.jpg"><span>58</span></li>
            <li class="third bounce"><img src="images/3.jpg"><span>245</span></li>
</ul>

 

转载于:https://www.cnblogs.com/candy-Yao/p/9242084.html