<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             .box{

                 width: 500px;

                 height: 500px;

                 background: skyblue;

             }

             .box1{

                 width: 100px;

                 height: 100px;

                 background: skyblue;

                 /*transition: 1s;*//*过渡 需要事件触发*/

                 /*使用animation调用关键帧*/

                 /*animation:mz 3s;综合写法*/

                 animation-name: mz2;/*关键帧名字 动画名*/

                 animation-duration: 2s;/*关键帧时长 总运动时间*/

                 animation-delay: 3s;/*关键帧延迟时间*/

                 animation-iteration-count: 2;/*运动执行次数 默认情况一次 infinite无限循环*/

                 animation-direction: reverse;/*运动方向*/

                 animation-direction: alternate;/*先正向再反向*/

                 animation-direction: alternate-reverse;

                 animation-timing-function: ease;/*运动使用的类型*/

                 animation: mz2 2s 1s linear infinite;

             }

             .box:hover .box1{

                 animation-play-state: running;/*鼠标移入暂停*/

             }

             /*定义动画*/

             @keyframes mz{

                 from{margin-left: 0;}

                 to{

                     margin-left: 500px;

                 }

             }

             @keyframes mz2{

                 0%{/*初始状态*/

                     margin-left: 0px;

                     margin-bottom: 0px;

                 }

                 25%{

                     margin-left: 500px;

                     margin-top: 0px;

                 }

                 50%{

                     margin-left: 500px;

                     margin-top: 400px;

                 }

                 75%{

                     margin-left: 0px;

                     margin-top: 400px;

                 }

                 100%{

                     margin-left: 0px;

                     margin-top: 0px;

                 }

             }

         </style>

     </head>

     <body>

         <div class="box">

             <div class="box1">

         </div>

     </body>

 </html>

css3动画的实例讲解的更多相关文章

  1. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  2. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  3. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  4. CSS3 动画

      通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...

  5. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  6. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  7. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  8. 第八十三节，CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提 ...

  9. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

随机推荐

  1. SQL——模糊查询LIKE

    LIKE操作符 - 用于WHERE子句中搜索列中指定模式.    语法:SELECT columnName(s) FROM tableName WHERE columnName LIKE patter ...

  2. 解决WordPress网站被利用xmlrpc.php文件攻击问题

    原因在于使用的WORDPRESS程序默认xmlrpc.php开启,而被用来DDOS攻击导致占用资源过高. 如何解决这个问题呢? 是屏蔽 XML-RPC (pingback) 的功能. add_filt ...

  3. opencv3学习1：opencv3.4.10与vs2017环境配置

    原教程网址:https://jingyan.baidu.com/article/dca1fa6f13bd55f1a44052b9.html 具体教程网上很多,我也相信大家的搜素能力,作为一个初入C++ ...

  4. 机器学习pdf资源

    <深度学习>(Deep Learning)中文版pdf, 百度网盘: https://pan.baidu.com/s/1jHDiQTg <机器学习导论>(Introductio ...

  5. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（三）

    上一篇(https://www.cnblogs.com/meowv/p/12974439.html)完成了全网各大平台的热点新闻数据的抓取,本篇继续围绕抓取完成后的操作做一个提醒.当每次抓取完数据后, ...

  6. 跨域解决方案 - webpack devServer

    1. 定义 如果一个项目中配置了webpack, 那么我们使用 webpack devServer 来配置代理转发请求来达到解决跨域问题的目的 webpack devServer 能够解决跨域问题的根 ...

  7. Java中的String、StringBuffer和StringBuilder

    作为作为一个已经入了门的java程序猿,肯定对Java中的String.StringBuffer和StringBuilder都略有耳闻了,尤其是String 肯定是经常用的.但肯定你有一点很好奇,为什 ...

  8. 【Linux】文件权限,ssh免密登录

    1.文件/文件夹权限 例子: -rw-r--r--. 1 root root 12288 Aug 21 09:50 aliases.db drwxr-xr-x. 2 root root 4096 Au ...

  9. Java实现 蓝桥杯 算法训练 大小写转换

    算法训练 大小写转换 时间限制:1.0s 内存限制:512.0MB 提交此题 问题描述 编写一个程序,输入一个字符串(长度不超过20),然后把这个字符串内的每一个字符进行大小写变换,即将大写字母变成小 ...

  10. Java实现 蓝桥杯VIP 算法训练 成绩的等级输出

    输入一个百分制的成绩t后,按下式输出它的等级.等级为:90100为A,8089为B,7079为C,6069为D,0~59为E. 样例输入 98 样例输出 A import java.util.Scan ...