需求

页面要做一个活动入口,不能太显眼,但是又要用户能一眼就看出来。

演示

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实现颤动的动画的更多相关文章

  1. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  2. css3实现循环执行动画,且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  3. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  4. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  5. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  6. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  7. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  8. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  9. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

随机推荐

  1. Swagger+SpringBoot整理

    maven依赖 1 <dependency> 2 <groupId>io.springfox</groupId> 3 <artifactId>sprin ...

  2. jeesite安装时Perhaps you are running on a JRE rather than a JDK

    使用自己本地安装的maven,启动jeesite报错: No compiler is provided in this environment. Perhaps you are running on ...

  3. Python爬虫十六式 - 第四式: 使用Xpath提取网页内容

    Xpath:简单易用的网页内容提取工具 学习一时爽,一直学习一直爽 !   Hello,大家好,我是Connor,一个从无到有的技术小白.上一次我们说到了 requests 的使用方法.到上节课为止, ...

  4. mysql FIRST()函数 语法

    mysql FIRST()函数 语法 作用:返回指定的字段中第一个记录的值.直线电机选型 语法:SELECT FIRST(column_name) FROM table_name 注释:可使用 ORD ...

  5. mysql AUTO INCREMENT字段 语法

    mysql AUTO INCREMENT字段 语法 作用:在新记录插入表中时生成一个唯一的数字 说明:我们通常希望在每次插入新记录时,自动地创建主键字段的值.我们可以在表中创建一个 auto-incr ...

  6. 2018百度之星初赛A轮 度度熊拼三角

    #include<bits/stdc++.h> using namespace std; int n; int a[1005]; int main() {     int ans;     ...

  7. React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

    修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列 试过很的方式都有问题, 比如直接在行内添加样式会无法传递到特定的层级 最好的办法是添加 id 可行 渲染部分代码 < ...

  8. 测试相关shell命令总结2——结构控制语句,命令行参数

    1,shell 中单引号和双引号的区别,单引号不进行解释.双引号进行解释 1,在shell中进行数学运算,放在$和[]中 $[1+2] 有些很奇怪,在.sh文件中放在(())中貌似也能够进行数学运算. ...

  9. substring()方法是如何工作

    1.substring()方法做了什么? substring(beginIndex,endIndex)方法返回一个从beginIndex到endIndex-1的字符串 String x = " ...

  10. 分布式工作流任务调度系统Easy Scheduler正式开源

    分布式工作流任务调度系统Easy Scheduler正式开源 1.背景 在多位技术小伙伴的努力下,经过近2年的研发迭代.内部业务剥离及重构,也经历一批种子用户试用一段时间后,EasyScheduler ...