CSS3实现放大缩小动画
HTML
<div>
<div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div>
</div>
CSS
#animat{
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation-direction:alternate;/*轮流反向播放动画。*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
/* Safari 和 Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}
@keyframes mymove
{
%{
transform: scale(); /*开始为原始大小*/
}
%{
transform: scale(1.1); /*放大1.1倍*/
}
%{
transform: scale();
}
%{
transform: scale(1.1);
} } @-webkit-keyframes mymove /*Safari and Chrome*/
{
%{
transform: scale(); /*开始为原始大小*/
}
%{
transform: scale(1.1); /*放大1.1倍*/
}
%{
transform: scale();
}
%{
transform: scale(1.1);
}
}
CSS3实现放大缩小动画的更多相关文章
- keyframes 放大缩小动画
本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- css3 放大缩小代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- svg 动画 透明度 放大缩小 x轴Y轴
参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...
- css3 animation(左右摆动) (放大缩小)
左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
- 用css3实现图片的放大缩小
记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...
- css3 制作平滑过度动画
-webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性) 持续时间 时间函数 延迟时间 CSS属性(transition-pr ...
随机推荐
- MySQL - Schema和Database的区别
问题来源 在pycharm发现Create new schema的效果和新建数据库一样,所以产生这个问题 参考 https://stackoverflow.com/questions/11618277 ...
- 5_4 反片语(UVa156)<map的使用>
输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另外一个单词.在判断是否满足条件时,字母不区分大小写,但在输出的时候保留输入时的大小写,按字典序进行排列. 样例输入: ...
- 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载
官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...
- Go语言经典库使用分析——高性能可扩展 HTTP 路由 httprouter(转载)
转载自 飞雪无情的博客 Go语言(golang)的一个很大的优势,就是很容易的开发出网络后台服务,而且性能快,效率高.在开发后端HTTP网络应用服务的时候,我们需要处理很多HTTP的请求访问,比如常见 ...
- 获取天气预报java代码
import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.IOException; imp ...
- tf.app.run()的作用
tf.app.run() 如果你的代码中的入口函数不叫main(),而是一个其他名字的函数,如test(),则你应该这样写入口tf.app.run(test) 如果你的代码中的入口函数叫main(), ...
- 《JavaScript高级程序设计》读书笔记(序)
1.现大三暑假中,计划9月初北上找前端工作,大三一年时间都在健身和学习专业课知识,技术有点荒废了,7月份忙于学校安排的实习javaweb方向的,到现在才有整段的时间好好把基础巩固一. 2.这几天也在关 ...
- idea激活,使用破解补丁无需注册码
idea激活,使用破解补丁无需注册码 2017年08月19日 10:57:54 标签: idea / 破解 / 补丁 / 软件 / 13891 编辑 删除 idea激活,JetBrain旗下软件激活 ...
- 2020新春公益赛 writeup
简单的招聘系统 无需注册账号,admin'or 1#登陆,到blank page页面,在输入key处发现有注入点: /pages-blank.php?key=1%27+union+select+1%2 ...
- SpringBoot笔记二:整合篇
Spring Boot与缓存 jsr-107 Java Caching定义了5个核心接口分别是CachingProvider, CacheManager, Cache, Entry 和 Expiry. ...