需求

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

演示

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. webUploader---实现大文件断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  2. Codeforces Gym 100851 K King's Inspection ( 哈密顿回路 && 模拟 )

    题目链接 题意 : 给出 N 个点(最多 1e6 )和 M 条边 (最多 N + 20 条 )要你输出一条从 1 开始回到 1 的哈密顿回路路径,不存在则输出 " There is no r ...

  3. 【Leetcode】二进制求和

    解题思路: 1. 首先在两个字符串前面补‘0’,使它们等长.否则要一直监督操作是否超出两个字符串的索引. 2. 从后向前遍历所有位数,同位相加.字符相加,利用ASCII码,字符在内部都用数字表示,我们 ...

  4. xor or and 线段树

    每一位维护一颗线段树 (-1)^1 =-2 (-2)^1=-1 #include <cstdio> #include<iostream> using namespace std ...

  5. 从零开始,编写简单的课程信息管理系统(使用jsp+servlet+javabean架构)

    一.相关的软件下载和环境配置 1.下载并配置JDK. 2.下载eclipse. 3.下载并配置apache-tomcat(服务器). 4.下载MySQL(数据库). 5.下载Navicat for M ...

  6. [BZOJ4010]:[HNOI2015]菜肴制作(拓扑排序)

    题目传送门 题目描述 知名美食家小A被邀请至ATM大酒店,为其品评菜肴. ATM酒店为小A准备了N道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为1.由于菜肴之间 ...

  7. 第四周总结 & 实验报告(二)

    第四周课程总结 一.String类 1.实例化 (1)直接赋值 public class Xxxx{ public static void main(String args[]){ String a ...

  8. mysql-8.0解压缩版安装配置完整过程

    https://www.cnblogs.com/xiongzaiqiren/p/8970203.html

  9. Promethus

    https://blog.csdn.net/zl1zl2zl3/article/details/74332437

  10. eigen 四元数进行坐标旋转

    (<视觉SLAM十四讲>第三讲习题7)设有小萝卜一号和二号在世界坐标系中.一号位姿q1 = [0.35, 0.2, 0.3, 0.1],t1=[0.3, 0.1, 0.1].二号位姿q2= ...