<!DOCTYPE html>

 <meta charset="UTF-8"/>

 <html>

     <head>

         <style>

             div {

                 width: 100px;

                 height: 100px;

                 background: red;

                 position: relative;

                 animation: myfirst 5s infinite alternate;

             }

             @keyframes myfirst {

                 0% {

                     background: red;

                     left: 0px;

                     top: 0px;

                 }

                 100% {

                     background: blue;

                     left: 200px;

                     top: 0px;

                 }

             }

             //鼠标划过停止动画效果

             div:hover{

                  -webkit-animation-play-state:paused;

                  animation-play-state:paused;

             }

         </style>

     </head>

     <body>

         <div></div>

     </body>

 </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. laravel 先orderBY再groupby，导致分组后的排序不正确

    //联系过我的经纪人 $appletChats=$this->AppletChat->orderBy('created_at','desc')->where([['user_id', ...

  2. When 表达式 kotlin(9)

    When 表达式 when 取代了类 C 语言的 switch 操作符.其最简单的形式如下:控制流when (x) { 1 -> print("x == 1") 2 -> ...

  3. mysql 查询锁表，解锁

    //1.查看当前数据库锁表的情况   SELECT * FROM information_schema.INNODB_TRX;   //2.杀掉查询结果中锁表的trx_mysql_thread_id ...

  4. 手机APP缓存的获取和清理功能的实现

    package com.loaderman.appcachedemo; import android.content.pm.IPackageDataObserver; import android.c ...

  5. php文件上传系统

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  6. Weex简介

    使用Weex开发App对于我们纯前端人员来说,是件很爽的事情,只要你熟悉了他的语法,基本可以做到一周上手写app.极其适合交互要求不高,时间紧迫,人手不足的同构开发需求. Weex 提供了多端一致的技 ...

  7. Python中sort和sorted函数代码解析

    Python中sort和sorted函数代码解析 本文研究的主要是Python中sort和sorted函数的相关内容,具体如下. 一.sort函数 sort函数是序列的内部函数 函数原型: L.sor ...

  8. linux下解决80端口被占用

    安装一个nginx服务,在启动的时候报80端口被占用了,我们来检查一下有哪些服务占用了80端口 首先我们查一下占用80端口的有哪些服务,netstat -lnp|grep 80 查看80端口被那些服务 ...

  9. Datafactory 学习笔记

    1)插入汉字出现乱码的情况 select userenv('language') from dual: select * from V$NLS_PARAMETERS: 把下面变量名和变量值配置到系统环 ...

  10. 安装 Git 并连接 Github

    下载安装 Git, 下载地址:https://git-scm.com/download/win . 在命令行中输入 git 测试 Git 是否安装成功. 在桌面鼠标右击打开 Git Bash Here ...