css3实现颤动的动画
需求
页面要做一个活动入口,不能太显眼,但是又要用户能一眼就看出来。
演示
https://jsfiddle.net/vtsxc18q/
实现 (部分动画代码)
@keyframes chanDong {
5% {
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
6%,
8%,
10%,
12% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
}
7%,
9%,
11% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
}
13% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
Github 代码
https://github.com/lmxdawn/te...
另附一个 vue 搭建的后台管理
另附一个 vue 搭建的后台管理 https://segmentfault.com/a/11...
来源:https://segmentfault.com/a/1190000016735426
css3实现颤动的动画的更多相关文章
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- css3实现循环执行动画,且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
随机推荐
- Cassandra 集群配置
集群机制 一致性哈希(数据一致性) Token Range Partitoner Gossip协议(流言,无中心获取领导者) 用于在环内节点之间传播状态信息 周期运行,每次在环中随机挑选一个对象节点, ...
- eclipse在线安装ermaster插件
eclipse在线安装ermaster插件: https://www.jianshu.com/p/449fbcd9141a ERMaster的安装和使用 https://www.cnblogs.com ...
- 【java工具类】生成Zip压缩包
多文件生成压缩包,返回压缩包生成位置的路径. FileUtil.java /** * 文件打压缩包 * @param files * @param Name * @return * @throws E ...
- 使用webuploader组件实现大文件分片上传,断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- BZOJ 4773: 负环 倍增Floyd
现在看来这道题就非常好理解了. 可以将问题转化为求两点间经过 $k$ 个点的路径最小值,然后枚举剩余的那一个点即可. #include <cstdio> #include <cstr ...
- [CF11D]A Simple Task 题解
题解 我们从最简单的思路开始考虑,首先看到题目发现\(n\)非常小,于是很容易想到状态压缩. 我们考虑比较直觉的状态,f[i][j][k]表示以i为起点,当前在j,之前去过的点状态为k的简单环的方案数 ...
- mysql 5.7分组报错问题 Expression #1 of ORDER BY clause is not in GROUP BY clause 的问题 MySQL
解决方案: select version(),@@sql_mode;SET sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY','')); ...
- nested exception is java.lang.OutOfMemoryError: PermGen space
原因: 持久带内存溢出. 方法:在启动的catalina.sh 里加上这个配置,增加持久带的大小. JAVA_OPTS="XX:PermSize=64M-XX:MaxPermSize=128 ...
- Codeforces Aim Tech Round4 (Div2) D
题目链接: 题意: 给你一个严格升序的单链表,但是是用数组来存放的.对于每一个位置来说,你可以知道这个位置的值和下一个的位置.你每一个可以询问一个位置,机器会告诉你这个位置的值,和下一个位置的指针.要 ...
- List of Mozilla-Based Applications
List of Mozilla-Based Applications The following is a list of all known active applications that are ...