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() ...
随机推荐
- 【TensorFlow-windows】(四) CNN（卷积神经网络）进行手写数字识别（mnist）
主要内容: 1.基于CNN的mnist手写数字识别(详细代码注释) 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_64. ...
- 关于TCP通信程序中数据的传递格式
前言 在之前的回射程序中,实现了字符串的传递与回射.幸运的是,字符串的传递不用担心不同计算机类型的大小端匹配问题,然而,如果传递二进制数据,这就是一个要好好考虑的问题.在客户端和服务器使用不同的字节序 ...
- 协议分析之qq协议---qq登录
QQ 协议分析:获取各类登录会话密钥 我们知道QQ的一些会话密钥是在登录过程中生成的,尤其是Session Key,有了它便可以解密出聊天文本内容.本文主要是了解一下QQ的加密机制,首先是用嗅探工具W ...
- spring+mybatis多数据源，动态切换
有时我们项目中需要配置多个数据源,不同的业务使用的数据库不同 实现思路:配置多个dataSource ,再配置多个sqlSessionFactory,和dataSource一一对应.重写SqlSess ...
- Go怎么获取当前时间？ Go ARM64 vDSO优化之路
https://mzh.io/ Go ARM64 vDSO优化之路 2018-03-16 | Meng Zhuo 背景 Go怎么获取当前时间?问一个会Go的程序员,他随手就能写这个出来给你. imp ...
- Redis（一）基础数据结构
1.目录 Redis 基础数据结构 string (字符串) list (列表) hash (字典) set (集合) zset (集合) 容器型数据结构的通用规则 过期时间 2.Redis 基础数据 ...
- HLS切片机
参考: 1,linux下搭建生成HLS所需的.ts和.m3u8文件http://www.cnblogs.com/mystory/archive/2013/04/07/3006200.html2,iPh ...
- [IR课程笔记]向量空间模型（Vector Space Model）
VSM思想 把文档表示成R|v|上的向量,从而可以计算文档与文档之间的相似度(根据欧氏距离或者余弦夹角) 那么,如何将文档将文档表示为向量呢? 首先,需要选取基向量/dimensions,基向量须是线 ...
- Impala 安装笔记1一Cloudera CDH4.3.0安装
Impala是Cloudera在受到Google的Dremel启发下开发的实时交互SQL大数据查询工具,Impala没有再使用缓慢的Hive+MapReduce批处理,而是通过使用与商用并行关系数据库 ...
- HZNU 2154 ldh发奖金【字符串】
题目链接 http://acm.hznu.edu.cn/OJ/problem.php?id=2154 思路 先判断不能拆分的情况 以为需要拆分成两个正整数 所以我们可以知道 只有个位的数字 是不能够拆 ...