需求

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

演示

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. 10. ClustrixDB 故障恢复管理

    一.前端网络故障 如果节点无法在其前端以太网网络端口上进行通信,例如,由于意外的电缆拉拔.交换机配置错误或NIC故障,则不需要人工干预.集群采取以下行动: 没有将其他连接分配给失败的实例. 如果失败的 ...

  2. html a标签 语法

    html a标签 语法 作用:<a> 标签定义超链接,用于从一张页面链接到另一张页面. 直线电机滑台 说明:<a> 元素最重要的属性是 href 属性,它指示链接的目标.在所有 ...

  3. JPA学习(三、JPA_API)

    框架学习之JPA(三) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...

  4. ZOJ 1610 Count the Colors (线段树成段更新)

    题意 : 给出 n 个染色操作,问你到最后区间上能看见的各个颜色所拥有的区间块有多少个 分析 : 使用线段树成段更新然后再暴力查询总区间的颜色信息即可,这里需要注意的是给区间染色,而不是给点染色,所以 ...

  5. cvtColor

    E:/OpenCV/opencv/sources/modules/imgproc/src/color.cpp CV_RGB2GRAY:RGB--->GRAY.

  6. javac不是内部或外部命令在win10上的解决方案

    Path环境变量能够让你在任何路径都能使用命令,可能你百度谷歌了各种方案都无法解决javac无法使用的问题,那么你可以试试如下解决方案: 首先博主配置了JAVA_HOME 参数为 C:\Program ...

  7. (57)Linux驱动开发之三Linux字符设备驱动

    1.一般情况下,对每一种设备驱动都会定义一个软件模块,这个工程模块包含.h和.c文件,前者定义该设备驱动的数据结构并声明外部函数,后者进行设备驱动的具体实现. 2.典型的无操作系统下的逻辑开发程序是: ...

  8. php 的路由简介 (一个简单的路由模式)

    <?php $_SERVER['REQUEST_URI'] = '/post/edit/1024?foo=bar'; $uri = explode('/', parse_url($_SERVER ...

  9. leetcode 234 回文链表 Palindrome Linked List

    要求用O(n)时间,和O(1)空间,因此思路是用本身链表进行判断,既然考虑回文,本方法思想是先遍历一次求链表长度,然后翻转前半部分链表:然后同时对前半部分链表和后半部分链表遍历,来判断对应节点的值是否 ...

  10. vs2010 setup 打包 安装 BAT批处理实现自动安装软件功能

    CLS@echo offECHO.ECHO 安装 Diskeeper 7.0.428ECHO 请稍等...start /wait %systemdrive%\install\Applications\ ...