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

.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. android 闹钟设置问题

    Android开发中,alarmManager在5.0以上系统,启动时间设置无效的问题 做一个app,需要后台保持发送心跳包.由于锁屏后CPU休眠,导致心跳包线程被挂起,所以尝试使用alarmMana ...

  2. Approximate timing for various operations on a typical PC

    execute typical instruction 1/1,000,000,000 sec = 1 nanosec fetch from L1 cache memory 0.5 nanosec b ...

  3. [引]雅虎日历控件 Example: Two-Pane Calendar with Custom Rendering and Multiple Selection

    本文转自:http://yuilibrary.com/yui/docs/calendar/calendar-multipane.html This example demonstrates how t ...

  4. WSGI学习系列多种方式创建WebServer

    def application(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) ...

  5. Node调试之node-inspect工具

    1.全局安装node-inspect模块: npm install -g node-inspect 2.通过谷歌浏览器打开:chrome://flags/#enable-devtools-experi ...

  6. php字符串函数详解

    nl2br 功能:化换行符为<br> <?php $str = "cat isn't \n dog"; $result = nl2br($str); echo $ ...

  7. VS Code Plugins And Configuration

    VS Code插件 vscode-icons: 显示文件类型的图标 project manager: 管理项目, 项目的保存加载与切换 beautify: 控制缩进 code runner: 执行代码 ...

  8. 上传文件，使用FormData进行Ajax请求，jsoncallback跨域

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  9. MVC学习手册之数据注解与验证

    MVC学习手册之数据注解与验证 新建一个MVC5的WEB应用程序,VS2013会自动生成一段代码,以下是Account控制器下Register.cshtml 页面的代码: @model WebAppl ...

  10. Echarts学习笔记

    1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="con ...