css div平移淡入淡出
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */ /* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
} @keyframes mymove /* 对应animation-name，里面为执行的动画*/
{
from {left:200px;}/*执行动画的初始位置*/
to {left:0px;}/*动画结束位置*/
0% {
opacity: 0.1; /*初始状态 透明度为10%*/
}
50% {
opacity: 0.5; /*中间状态 透明度为50%*/
}
100% {
opacity: 1; /*结尾状态 不透明*/
}
} @-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
{
from {left:200px;}/*执行动画的初始位置*/
to {left:0px;}/*动画结束位置*/
}
</style>
</head>
<body> <div></div> </body>
</html>
css div平移淡入淡出的更多相关文章
- css实现元素淡入淡出
@-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100 ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- 用js或css实现淡入淡出
淡入淡出?你问我有什么用? 提升首页13格的东西,你居然不知道!! 好啦,不废话了,正文. 1 js 主要元素:fadeIn() fadeOut() show hide 2 css 主要元素: o ...
- JQuery效果-淡入淡出、滑动、动画
一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入 对应也有$(selector).fadeIn(speed, ...
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
随机推荐
- 【转】安卓逆向实践5——IDA动态调试so源码
之前的安卓逆向都是在Java层上面的,但是当前大多数App,为了安全或者效率问题,会把一些重要功能放到native层,所以这里通过例子记录一下使用IDA对so文件进行调试的过程并对要点进行总结. 一. ...
- JQuery日记 5.31 JQuery对象的生成
JQuery对象的生成 1 selector为不论什么可转换false的空值 返回空JQuery对象 2 selector为字符串 2.1 selector为html字符串或有id属性的标签 ...
- iOS不用上架就能下载安装ipa应用内测：使用FIR.im发布自己的移动端APP
本文转自:http://www.cnblogs.com/imzzk/p/firim.html 一次很偶然的机会知道fir.im,这家公司主要的产品就是帮助开发者方便便捷地发布iOS或者Android应 ...
- poj 2154 Color < 组合数学+数论>
链接:http://poj.org/problem?id=2154 题意:给出两个整数 N 和 P,表示 N 个珠子,N种颜色,要求不同的项链数, 结果 %p ~ 思路: 利用polya定理解~定理内 ...
- yield方式转移执行权的协程之间不是调用者与被调用者的关系，而是彼此对称、平等的
def simpleGeneratorFun(): yield 1 yield 2 yield 3 for value in simpleGeneratorFun(): print(value) de ...
- vmware 桌面虚拟化 horizon view 介绍（使用微软的RDP协议或vmware 专有的PCoIP协议，连接到虚拟桌面，并且可以使用本地的USB设备、本地存储）
虚拟化(一):虚拟化及vmware产品介绍 虚拟化(二):虚拟化及vmware workstation产品使用 虚拟化(三):vsphere套件的安装注意及使用 虚拟化(四):vsphere高可用功能 ...
- 关于WordPress后台设置中的WordPress地址和站点地址的解读
今天我在TeachCourse博客中不小心把WordPress地 址和站点地址都改为了http://www.qgjie123.com,结果重新刷新TeachCourse博客页面的时候,页面排版错乱的情 ...
- HDOJ 4704 Sum 规律 欧拉定理
规律 欧拉定理: 找规律 2^n-1 ,n 非常大用欧拉定理 Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/13 ...
- 拓展gcd求不定方程通解
void gcd(LL a,LL b,LL &d,LL &x,LL &y){ ){d=a;x=;y=;return;} gcd(b,a%b,d,x,y); int t=x; x ...
- html5--5-11 绘制文字
html5--5-11 绘制文字 学习要点 掌握文字的绘制方法 文字的绘制方法 strokeText("文字",x,y,maxWith) 绘制(描边)空心文字 fillText(& ...