css3 animation 动态效果，心跳效果 

<!DOCTYPE html>
<html>
<head>
<style> 
.con{
    width:100%;
    height:400px;
    overflow: hidden;
    background-color: blanchedalmond;
}

.dong{
    width:100px;
    height:100px;
    background:red;
    margin:100px auto 0px auto;

    animation:mydongtai 2s infinite;
    -moz-animation:mydongtai 2s infinite; /* Firefox */
    -webkit-animation:mydongtai 2s infinite; /* Safari and Chrome */
    -o-animation:mydongtai 2s infinite; /* Opera */
}

@keyframes mydongtai
{
    0% {width:100px;height:100px}
    40% {width:110px;height:110px;box-shadow:0px 0px 15px 15px #fff}
    100% {width:100px;height:100px}
}

@-moz-keyframes mydongtai /* Firefox */
{
    0% {width:100px;height:100px}
    40% {width:110px;height:110px;box-shadow:0px 0px 15px 15px #fff}
    100% {width:100px;height:100px}
}

@-webkit-keyframes mydongtai /* Safari and Chrome */
{
    0% {width:100px;height:100px}
    40% {width:110px;height:110px;box-shadow:0px 0px 15px 15px #fff}
    100% {width:100px;height:100px}
}

@-o-keyframes mydongtai /* Opera */
{
    0% {width:100px;height:100px}
    40% {width:110px;height:110px;box-shadow:0px 0px 15px 15px #fff}
    100% {width:100px;height:100px}
}
</style>
</head>
<body>
    <div class="con">
        <div class="dong"></div>
    </div>
</body>
</html>
  • 图片没制作成动图
posted @ 2023-05-11 16:26  盘思动  阅读(100)  评论(0)    收藏  举报