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转换, ...
随机推荐
- Codeforces 919E Congruence Equation ( 数论 && 费马小定理 )
题意 : 给出数 x (1 ≤ x ≤ 10^12 ),要求求出所有满足 1 ≤ n ≤ x 的 n 有多少个是满足 n*a^n = b ( mod p ) 分析 : 首先 x 的范围太大了,所以使 ...
- Codeforces Round #303 (Div. 2) E. Paths and Trees Dijkstra堆优化+贪心(!!!)
E. Paths and Trees time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- (74)c++再回顾一继承和派生
一:继承和派生 0.默认构造函数即不带参数的构造函数或者是系统自动生成的构造函数.每一个类的构造函数可以有多个,但是析构函数只能有一个. 1.采用公用public继承方式,则基类的公有成员变量和成员函 ...
- 【Mark】博弈类题目小结(HDU,POJ,ZOJ)
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 首先当然要献上一些非常好的学习资料: 基础博弈的小 ...
- springBoot+springSecurity 数据库动态管理用户、角色、权限(二)
序: 本文使用springboot+mybatis+SpringSecurity 实现数据库动态的管理用户.角色.权限管理 本文细分角色和权限,并将用户.角色.权限和资源均采用数据库存储,并且自定义滤 ...
- 微信小程序 API 网络(ajax)
网络 API 类似于 ajax 向服务器请求网络地址,唯一不同的是这个请求有很多的规则,且必须向服务器上请求,不能在本地请求 网络 发送请求: wx.request() 发起https网络请求 参数: ...
- 微信小程序 API 基础
其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...
- c++11多线程---std::ref和std::cref
std::ref和std::cref 解释 std::ref 用于包装按引用传递的值. std::cref 用于包装按const引用传递的值. 为什么需要std::ref和std::cref ...
- lnmp源码搭建
Nginx工作原理 这里需要结合Apache的工作,对PHP文件处理过程的区别 1:Nginx是通过php-fpm这个服务来处理php文件 2:Apache是通过libphp5.so ...
- Windows10 家庭版安装 Docker Desktop
开启 Hyper-V 开启后会有提示让重启电脑,重启就 OK :: 创建cmd (echo pushd "%~dp0" echo dir /b %SystemRoot%\servi ...