弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 3147|回复: 2

Css动画公式集锦

[复制链接]
发表于 2018-11-22 13:47:10 | 显示全部楼层 |阅读模式
放大缩小:
animation:flash ease-in-out infinite 5s;

@keyframes scaleDraw {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}
回复

使用道具 举报

 楼主| 发表于 2018-11-22 13:49:54 | 显示全部楼层
涟漪扩散:
animation: living 3s linear infinite;

@keyframes living {
    0%{
        transform: scale(1);
        opacity: 0.5;  
    }
    50%{
        transform: scale(1.5);  
        opacity: 0;   /*圆形放大的同时,透明度逐渐减小为0*/
    }
    100%{
        transform: scale(1);
        opacity: 0.5;
    }
}
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-11-22 13:53:19 | 显示全部楼层
叠加,用于两图片交互显示:
animation: picDraw 5s ease-in-out infinite;

@keyframes picDraw {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

来源:https://blog.csdn.net/yujin0213/article/details/79262825
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-11-24 00:17 , Processed in 0.048611 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表