1.  <!DOCTYPE html>
  2.  <meta charset="UTF-8"/>
  3.  <html>
  4.  
  5.      <head>
  6.          <style>
  7.              div {
  8.                  width: 100px;
  9.                  height: 100px;
  10.                  background: red;
  11.                  position: relative;
  12.                  animation: myfirst 5s infinite alternate;
  13.              }
  14.  
  15.              @keyframes myfirst {
  16.                  0% {
  17.                      background: red;
  18.                      left: 0px;
  19.                      top: 0px;
  20.                  }
  21.  
  22.                  100% {
  23.                      background: blue;
  24.                      left: 200px;
  25.                      top: 0px;
  26.                  }
  27.  
  28.              }
  29.              //鼠标划过停止动画效果
  30.              div:hover{
  31.                   -webkit-animation-play-state:paused;
  32.                   animation-play-state:paused;
  33.              }
  34.          </style>
  35.      </head>
  36.      <body>
  37.          <div></div>
  38.      </body>
  39.  
  40.  </html>

css3实现div自动左右动的更多相关文章

  1. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  2. 并列div自动等高

    并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. div 自动全屏高度

    最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%

  4. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  5. 用Emmet写CSS3属性会自动添加前缀

    CSS3的很多属性都包含浏览器厂商前缀,用Emmet写CSS3属性会自动添加前缀,比如输入trs 会展开为: -webkit-transition: prop time; -moz-transitio ...

  6. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  8. 前端css3样式前缀自动补全工具--autoprefixer

    最近在学习一份来自git的动画框架源码,看懂70%的核心代码后,打算自己动手实践一版,然鹅,所有框架搭起来以后,在动画这块却出了问题: 想设计一个slideInLeft的动画,必然想到了要从偏移-10 ...

  9. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

随机推荐

  1. lockfree buffer test

    性能测试(3): 对无锁队列boost::lockfree::queue和moodycamel::ConcurrentQueue做一个性能对比测试     版权声明:本文为博主zieckey原创文章, ...

  2. 一、基础篇--1.2Java集合-HashMap和HashTable的区别

    HashMap和HashTable的区别 1.继承的父类不同,HashMap继承的是AbstractMap类,HashTable继承的是Dictionary类,不过都实现了Map.Clone.Seri ...

  3. intellij系列编辑器个性化注释说明（定义个人风格的todo）

    有时候我们需要用于自己个性化的注释,不为装逼,只为能够快速找到自己的注释,自己的代码,不迷路... 废话少说,孩儿们看过来: 1.打开你的编辑器,打开setting,搜索TODO: 设置完点击保存去试 ...

  4. 凸包Graham Scan算法实现

    凸包算法实现点集合中搜索凸包顶点的功能,可以处理共线情况,可以输出共线点也可以不输出而只输出凸包顶点.经典的Graham Scan算法,点排序使用极角排序方式,并对共线情况做特殊处理.一般算法是将共线 ...

  5. 关于bootstrap按钮的偏移

    <body> <div id="divForm" class="addView"> <div class="form-h ...

  6. go 基础 结构体 接口 访问权限

    package School type SchoolModel struct { Name string Address string StudentCount int Is985 bool } ty ...

  7. UFIDA

    充分匹配了‘用友’的中文品牌的含义,即‘与用户真诚合作,做用户可靠朋友’.其中‘U’代表‘User’,即用户:‘FID’表示忠诚.信任,来源于 Fidelity(诚实)等英文词的词根:助音词‘A’放在 ...

  8. springboot项目启动无法访问到controller原因之一：引导类位置有问题

    新建的springboot项目启动后,无法访问到controller 页面是404错误 查看项目结构,发现是新建工程的启动类位置有问题,controller类应该位于引导类的同级包或者子级包中.需要将 ...

  9. jdk1.8-stack 栈源码分析

    一:类的继承关系 UML图: 类的继承关系: )) { ) { ) );} 分析:栈的peek()方法,其实就是返回栈顶部的元素值,即数组末尾元素值. peek()方法只是返回下标的值,但并不删除该元 ...

  10. JavaScript基础入门10

    目录 JavaScript 基础入门10 正则表达式 为什么使用正则表达式? 正则表达式的应用场景 如何创建一个正则表达式 基础语法 具有特殊意义的转义字符 量词 字符类 贪婪模式 练习 邮箱验证 中 ...