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 @   盘思动  阅读(92)  评论(0)  编辑  收藏  举报
相关博文：
· vue 数字跳动效果
· uniapp_背景动态style，动态class
· css实现跳动的心效果
· 使用canvas制作一个心跳的画特效
· 心形跳动样式
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示