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转换, ...
随机推荐
- HTTP与HTTPS区别(详细)
转:http://blog.sina.com.cn/s/blog_6eb3177a0102x66r.html 1.减少http请求(合并文件.合并图片)2.优化图片文件,减小其尺寸,特别是缩略图,一定 ...
- JUnit——assertThat(acture,matcher)
使用hamcrest之前需要引入相关的jar包,包括hamcrest-core.1.3.jar和hamcrest-library-1.3.jar. 具体引入的方法为:右击JUnit工程——build ...
- dell笔记本 win10 下安装 ubuntu16.04 踩坑记录
硬件配置情况: dell笔记本-灵越-5577 —— I5七代(带有集显),8G内存条DDR4,GTX1050,128G固态硬盘,1T机械硬盘. 固态硬盘划分为3部分,100GB给win10的C盘,1 ...
- 【python 应用之四】提升 Python 运行性能的 7 个习惯
大家都知道艺赛旗的 RPA 依赖于 python 语言.因此我们可以掌握一些技巧,可尽量提高 Python 程序性能,也可以避免不必要的资源浪费.1.使用局部变量 尽量使用局部变量代替全局变量:便于维 ...
- python-opencv学习第二章
阈值分割(五种情况介绍) 二进制阈值化 设定一个特定的阈值量如127那么他的规则为大于等于127的像素点的灰度值设定为最大值(如8为图像灰度值最大为255) 灰度值小于127的像素点的灰度值设定为0 ...
- sqli-labs(18)
开始挑战第十八关(Header Injection - Uagent field - Error based) 常见的HTTP注入点产生位置为[Referer].[X-Forwarded-For].[ ...
- 利用spark将表中数据拆分
i# coding:utf-8from pyspark.sql import SparkSession import os if __name__ == '__main__': os.environ[ ...
- Spring mvc注解说明
编号 注解 说明 位置 备注 1 @Controller 将类变成Spring Bean 类 现阶段 @Controller . @Service 以及 @Repository 和 @Componen ...
- 举例讲解Python中的死锁、可重入锁和互斥锁
举例讲解Python中的死锁.可重入锁和互斥锁 一.死锁 简单来说,死锁是一个资源被多次调用,而多次调用方都未能释放该资源就会造成死锁,这里结合例子说明下两种常见的死锁情况. 1.迭代死锁 该情况是一 ...
- 配置idea中类头注释中的 ${user} 自动获取电脑的名字,怎么去修改名字
在idea安装路径下找到 idea\IntelliJ IDEA 2018.3.2\bin下面有一个文件叫:idea64.exe.vmoptions 编辑此文件就能修改主时钟自动获取的名称: 例如:添加 ...