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

.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. Linpack之HPCG测试

    平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装HPL之前需要配置好: CXX编译器(检查:c++ -v) MPICH 并行 ...

  2. cannot focus element解决方案

    If you enconter error "cannot focus element" when using Selenium+Python in Chrome to input ...

  3. 分布式任务框架elastic-job 学习笔记

    官方资料:https://github.com/dangdangdotcom/elastic-job ------------------------------------------------- ...

  4. 根据时间显示不同的问候语的JavaScript代码

    对于最近有许多的初学开发者问我关于根据时间显示不同的问候语的JavaScript代码问题,所以今天将自己整理的一些代码在这里分享出来,供初学者参考,如果在运行过程中有问题,可以给我在下方留言. < ...

  5. Visual Studio 2017 安装失败，你们有这样的问题吗？怎么解决

    由于发生一个或多个包故障,产品未能安装列出的工作负荷和组件. 工作负荷不完整 使用 JavaScript 的移动开发 (Microsoft.VisualStudio.Workload.WebCross ...

  6. c#获取目录

    获取程序目录 string s = System.IO.Directory.GetCurrentDirectory(); Console.WriteLine(s);// C:\Users\r-\doc ...

  7. 将webservice嵌套到以完成的web项目中

    一.先把webservice服务端写入项目(基于spring) 1.在pom.xml中引入WebService相关的jar依赖 <!--webservice开始 --> <!--ht ...

  8. 1064. 计算斐波那契第n项 通项公式

    题目描述 输入n,编写程序输出斐波那契数列的第n项.其中斐波那契数列f(n)的定义如下: f(1)=0,f(2)=1         f(n)=f(n-1)+f(n-2)(n>=2) 输入 一行 ...

  9. 浅谈移动优先的跨终端Web 解决方案

    1.基准 我们定义测试基准和开发基准,也就是说我们定义我们在哪些浏览器上去进行调试. 左侧图主要是定义PC上的基准,其中A级项目中必须支持,B级可选,C级观察. 2.检测 主要是终端检测 这是一张架构 ...

  10. Android学习笔记4——Activity详解

    在 Android 开发过程中,与程序员打交道最多的应该就是作为四大组件之一的 Activity 了.接下来我们就一起来揭开 Activity 的神秘面纱吧~ 一.概述 什么是 Activity(活动 ...