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

.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. Smaug Coverage

  2. CentOS 开机自启动脚本

    开机时执行自己的脚本. 1.编写自己的服务脚本 进入系统服务脚本目录: cd /etc/rc.d/init.d/ vi test 内容如下: #!/bin/bash # # chkconfig: - ...

  3. IT方面书籍下载整理

    最近翻看Redis相关的中文书籍时,发现了很多错误,包括翻译错误及理论错误,因此想搜集一些相关的外文书籍看看.以下几个链接,内容大同小异,均可免费下载相关的英文书籍PDF版,内容涵盖了IT的方方面面. ...

  4. python 中文分词：结巴分词

    中文分词是中文文本处理的一个基础性工作,结巴分词利用进行中文分词.其基本实现原理有三点: 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG) 采用了动态规 ...

  5. 【安全测试】sql注入

    SQL注入攻击是黑客对 数据库 进行攻击的常用手段之一,随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员越来越多,但是由于程序员水平及经验页参差不齐,相当大部分程序员在编写代码的时候没有 ...

  6. 【snmp】测试流程

    一.SNMP协议概述 SNMP是基于TCP/IP协议族的网络管理标准,是一种在IP网络中管理网络节点(如服务器.工作站.路由器.交换机等)的标准协议.SNMP能够使网络管理员提高网络管理效能,及时发现 ...

  7. [转]ASP.NET Core集成微信登录

    本文转自:http://www.cnblogs.com/early-moon/p/5819760.html 工具: Visual Studio 2015 update 3 Asp.Net Core 1 ...

  8. ASP.NET操作DataTable各种方法

    转:http://www.cnblogs.com/isking/p/6178268.html http://www.cnblogs.com/sntetwt/p/3496477.html public ...

  9. JQuery中的prop和attr

    prop和attr都可以用来获取并改变对象的属性, 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 栗子: ...

  10. #与javascript:void(0)的区别

    #"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而 ...