css3控制div上下跳动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
@-webkit-keyframes bounce-down {
25% {-webkit-transform: translateY(-10px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(10px);}
} @keyframes bounce-down {
25% {transform: translateY(-10px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(10px);}
} .animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;
} @-webkit-keyframes bounce-up {
25% {-webkit-transform: translateY(10px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(-10px);}
} @keyframes bounce-up {
25% {transform: translateY(10px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(-10px);}
} .animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}
</style>
</head> <body>
<div class="animate-bounce-up"></div>
<div class="animate-bounce-down"></div>
</body>
</html>
这个例子是直接应用css3来控制div层上下来回滚动；
这需要熟练应用@keyframes 规则，@keyframes bounce-up中的bounce-up是个动作名称，这个元素可以自行定义，只要在 animation: bounce-up匹配到就可以的。
css3控制div上下跳动的更多相关文章
- css3控制div上下跳动-效果图
效果图演示,源代码
- CSS控制div宽度最大宽度/高度和最小宽度/高度
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...
- css控制div的各种形状
css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Js控制Div在浏览器中的高度
//需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...
- PHP控制div块大小和颜色的例子
网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- 键盘控制div移动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
随机推荐
- java.lang.NoClassDefFoundError:org/hamcrest/SelfDescribing
1.错误描述 java.lang.NoClassDefFoundError:org/hamcrest/SelfDescribing 2.错误原因 将junit-4.11.jar导入到lib目录中,出现 ...
- dijit.byId("grid") is undefined
1.错误描述 TypeError:dijit.byId(...) is undefined (68 out of range 3) 2.错误原因 var gridName = dijit ...
- Exynos4412交叉编译环境搭建
Exynos4412交叉编译环境搭建 交叉编译:在PC机(x86平台)上开发程序,在ARM板上运行,提高开发.编译速度. 环境: Tiny4412SDK1506开发板 需要软件: arm-linux- ...
- 使用vue-cli脚手架初始化Vue项目下的项目结构
概述 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及 ...
- linux 安装沙盒virtualenv 、virtualenvwrapper
1.沙盒安装命令: 最新版本:sudo easy_install virtualenv或者sudo apt-get install virtualenv 指定版本:pip install virtua ...
- 异常-----java.sql.SQLException:ORA-01861:文字和格式字符串不匹配
1.错误描述 java.sql.SQLException:ORA-01861:文字和格式字符串不匹配 2.错误原因 字段名为statis_date在数据库中存储的数据类型是Date,而在Java中拼接 ...
- Android App性能评测分析－流畅度篇
1.前言 在手机App竞争越来越激烈的今天,Android App的各项性能特别是流畅度不如IOS,安卓基于java虚拟机运行,触控响应的延迟和卡顿比IOS系统严重得多.一些下拉上滑.双指缩放快速打字 ...
- 手机浏览网页或打开App时莫名弹出支付宝领红包界面的原因及应对措施
自从支付宝推出扫码领红包活动后,这种模式独特的赏金机制,短时间内吸引了大量的关注,但是随之也产生了很多的问题,比由于如在赏金的驱动下,微信群里铺天盖地的红包口令,朋友圈里各式各样的领红包二维码图片, ...
- Android热修复技术原理详解（最新最全版本）
本文框架 什么是热修复? 热修复框架分类 技术原理及特点 Tinker框架解析 各框架对比图 总结 通过阅读本文,你会对热修复技术有更深的认知,本文会列出各类框架的优缺点以及技术原理,文章末尾简单 ...
- 【POJ1151】Atlantis（线段树，扫描线）
[POJ1151]Atlantis(线段树,扫描线) 题面 Vjudge 题解 学一学扫描线 其实很简单啦 这道题目要求的就是若干矩形的面积和 把扫描线平行于某个轴扫过去(我选的平行\(y\)轴扫) ...