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实现放大缩小动画的更多相关文章

  1. keyframes 放大缩小动画

    本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...

  2. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  3. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. css3 放大缩小代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

  6. css3 animation(左右摆动) (放大缩小)

    左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...

  7. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  8. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  9. css3 制作平滑过度动画

    -webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-pr ...

随机推荐

  1. MySQL - Schema和Database的区别

    问题来源 在pycharm发现Create new schema的效果和新建数据库一样,所以产生这个问题 参考 https://stackoverflow.com/questions/11618277 ...

  2. 5_4 反片语(UVa156)<map的使用>

    输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另外一个单词.在判断是否满足条件时,字母不区分大小写,但在输出的时候保留输入时的大小写,按字典序进行排列. 样例输入: ...

  3. 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

    官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...

  4. Go语言经典库使用分析——高性能可扩展 HTTP 路由 httprouter(转载)

    转载自 飞雪无情的博客 Go语言(golang)的一个很大的优势,就是很容易的开发出网络后台服务,而且性能快,效率高.在开发后端HTTP网络应用服务的时候,我们需要处理很多HTTP的请求访问,比如常见 ...

  5. 获取天气预报java代码

    import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.IOException; imp ...

  6. tf.app.run()的作用

    tf.app.run() 如果你的代码中的入口函数不叫main(),而是一个其他名字的函数,如test(),则你应该这样写入口tf.app.run(test) 如果你的代码中的入口函数叫main(), ...

  7. 《JavaScript高级程序设计》读书笔记(序)

    1.现大三暑假中,计划9月初北上找前端工作,大三一年时间都在健身和学习专业课知识,技术有点荒废了,7月份忙于学校安排的实习javaweb方向的,到现在才有整段的时间好好把基础巩固一. 2.这几天也在关 ...

  8. idea激活,使用破解补丁无需注册码

    idea激活,使用破解补丁无需注册码 2017年08月19日 10:57:54 标签: idea / 破解 / 补丁 / 软件 / 13891 编辑 删除 idea激活,JetBrain旗下软件激活 ...

  9. 2020新春公益赛 writeup

    简单的招聘系统 无需注册账号,admin'or 1#登陆,到blank page页面,在输入key处发现有注入点: /pages-blank.php?key=1%27+union+select+1%2 ...

  10. SpringBoot笔记二:整合篇

    Spring Boot与缓存 jsr-107 Java Caching定义了5个核心接口分别是CachingProvider, CacheManager, Cache, Entry 和 Expiry. ...