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转换, ...
随机推荐
- Swagger+SpringBoot整理
maven依赖 1 <dependency> 2 <groupId>io.springfox</groupId> 3 <artifactId>sprin ...
- 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 ...
- Python爬虫十六式 - 第四式: 使用Xpath提取网页内容
Xpath:简单易用的网页内容提取工具 学习一时爽,一直学习一直爽 ! Hello,大家好,我是Connor,一个从无到有的技术小白.上一次我们说到了 requests 的使用方法.到上节课为止, ...
- mysql FIRST()函数 语法
mysql FIRST()函数 语法 作用:返回指定的字段中第一个记录的值.直线电机选型 语法:SELECT FIRST(column_name) FROM table_name 注释:可使用 ORD ...
- mysql AUTO INCREMENT字段 语法
mysql AUTO INCREMENT字段 语法 作用:在新记录插入表中时生成一个唯一的数字 说明:我们通常希望在每次插入新记录时,自动地创建主键字段的值.我们可以在表中创建一个 auto-incr ...
- 2018百度之星初赛A轮 度度熊拼三角
#include<bits/stdc++.h> using namespace std; int n; int a[1005]; int main() { int ans; ...
- React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等
修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列 试过很的方式都有问题, 比如直接在行内添加样式会无法传递到特定的层级 最好的办法是添加 id 可行 渲染部分代码 < ...
- 测试相关shell命令总结2——结构控制语句,命令行参数
1,shell 中单引号和双引号的区别,单引号不进行解释.双引号进行解释 1,在shell中进行数学运算,放在$和[]中 $[1+2] 有些很奇怪,在.sh文件中放在(())中貌似也能够进行数学运算. ...
- substring()方法是如何工作
1.substring()方法做了什么? substring(beginIndex,endIndex)方法返回一个从beginIndex到endIndex-1的字符串 String x = " ...
- 分布式工作流任务调度系统Easy Scheduler正式开源
分布式工作流任务调度系统Easy Scheduler正式开源 1.背景 在多位技术小伙伴的努力下,经过近2年的研发迭代.内部业务剥离及重构,也经历一批种子用户试用一段时间后,EasyScheduler ...