本次项目中动画放大缩小代码小结

.fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infinite; -o-animation: myfirst 1s infinite; animation: myfirst 1s infinite;}

@keyframes myfirst{

0% { transform: scale(.8); }

50% { transform: scale(1); }

100% { transform: scale(.8); }

}

@-moz-keyframes myfirst{

0%	{-moz-transform: scale(.8);}

50%	{-moz-transform: scale(1);}

100%	{-moz-transform: scale(.8);}

}

@-webkit-keyframes myfirst{

0%	{-webkit-transform: scale(.8);}

50%	{-webkit-transform: scale(1);}

100%	{-webkit-transform: scale(.8);}

}

@-o-keyframes myfirst{

0%	{-o-transform: scale(.8);}

50%	{-o-transform: scale(1);}

100%	{-o-transform: scale(.8);}

}

　　参考代码：

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:100px;

 background:red;

 position:relative;

 animation:mymove 5s infinite;

 -moz-animation:mymove 5s infinite; /* Firefox */

 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */

 -o-animation:mymove 5s infinite; /* Opera */

 }

 @keyframes mymove

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 @-moz-keyframes mymove /* Firefox */

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 @-webkit-keyframes mymove /* Safari and Chrome */

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 @-o-keyframes mymove /* Opera */

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 </style>

 </head>

 <body>

 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

 <div></div>

 </body>

 </html>

keyframes 放大缩小动画的更多相关文章

  1. CSS3实现放大缩小动画

    HTML <div> <div style="height: 35px;width:300px;background:orangered;border-radius: 4p ...

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

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

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

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

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

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

  5. css3 放大缩小代码

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

  6. CABasicAnimation的基本使用方法（移动·旋转·放大·缩小）

    出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...

  7. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  8. 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  9. Android多点触控技术，实现对图片的放大缩小平移，惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

随机推荐

  1. 01 性能优化基础怀实践 之 ASH分析

    1.模拟一个会话阻塞的场景.    通过update 同一行数据达到模拟阻塞的效果 : SQL> create table t1 (id number ,name varchar2(20)) ; ...

  2. 查看pip已经安装过的包

    查看pip已经安装过的包 pip list 查看xx包的安装路径 pip install xx 查看python2的pip安装的包 python2 -m pip list 查看python3 的pip ...

  3. python_爬虫基础学习

    ——王宇阳—根据mooc课程总结记录笔记(Code_boy) Requests库:自动爬去HTML页面.自动网络请求提交 robots.txt:网络爬虫排除标准 Beautiful Soup库:解析H ...

  4. JAVA中 List和ArrayList的区别

    List是一个接口,而ListArray是一个类.  ListArray继承并实现了List.  所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造.  ...

  5. maya卸载不干净

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  6. 在oracle RAC 环境下用 PL/SQL Developer debug procedure 出现 hang 的情况

    现象描述: 用plsql developer 连接编译procedure 的时候都很正常.一旦开始Test进入Debug模式的时候就Hang住了. 初步猜测是没有权限,可是是DBA角色呀,如果没有权限 ...

  7. SmartRF Flash Programmer突然打不开显示界面的办法【亲测有效】

    在尝试打开任务管理器结束任务之后重新打开依然无果,在尝试了SmartRF Flash Programmer卸载重装无数次之后依然无果的况状,我被SmartRF Flash Programmer存在界面 ...

  8. Spring Boot使用mongo的GridFS模块

    1. GridFS简介 GridFS是Mongo的一个子模块,使用GridFS可以基于MongoDB来持久存储文件.并且支持分布式应用(文件分布存储和读取).作为MongoDB中二进制数据存储在数据库 ...

  9. 【input】——数据传入后台

    1.复选框 checkbox <label class="checkbox"> <input type="checkbox" name=&qu ...

  10. 自定义Qt组件-通讯模块(P2)

    1.  抽象协议AbstractProtocol 抽象协议AbstractProtocol定义CommManager与协议之间的接口.AbstractProtocol中的一些属性(如enabled)用 ...