css 背景 平移 动画
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>动画</title>
<style>
* {
margin: 0;
padding: 0;
} .aa {
position: absolute;
top: 0;
width: 200px;
height: 200px;
border: 1px solid red;
z-index: 2;
background: transparent;
} .aa:nth-child(1) {
left: 0;
} .aa:nth-child(2) {
left: 210px;
} .aa:nth-child(3) {
left: 420px;
} .aa:nth-child(4) {
left: 630px;
} .aa:nth-child(5) {
left: 840px;
} .bj {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #008000;
transition: all 1s;
} .p {
position: relative;
}
</style>
</head> <body>
<div class="p">
<div class="aa">
1
</div>
<div class="aa">
2
</div>
<div class="aa">
3
</div>
<div class="aa">
4
</div>
<div class="aa">
5
</div>
<div class="bj"> </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('.aa').click(function() {
let index = $(this).index();
$('.bj').css('transform', 'translateX(' + $('.aa').eq(index).css('left') + ')');
})
</script>
</body> </html>
css 背景 平移 动画的更多相关文章
- Android动画：模拟开关按钮点击打开动画（属性动画之平移动画）
在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- 问题杂烩(scrollTop/背景透明度动画)
今天给同学找我帮忙写js,是公司里的活..我是不是应该跟他要钱哈哈,不过一顿饭肯定是免不了的了. 言归正传,今天写了三个小东西,因为兼容性的问题,用jq写的(很是别扭的说,但是没办法啊,一边看api一 ...
- ArcGIS api for javascript——地图配置-定制平移动画
描述 本例展示了当用户点击平移按钮时如何定制地图的动画.panDuration和panRate是Dojo动画属性,可以分别确定动画的duration和帧刷新的rate.这些属性的单位都是毫秒,panD ...
- 简单CSS实现闪烁动画（+1白话讲解）
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
- 10 个独特的 CSS 背景视觉效果
这几年的web设计中,大背景的设计变得越来越流行.特别是在现在大屏大行其道的情况下,设计师在设计中越来越多的使用大分辨率的背景图来填充屏幕,这样更能制造独特的视觉效果,能更好的传达他们想要向用户传达的 ...
- Android 手机卫士--平移动画实现
本文实现如下几个界面之间的平移动画实现 本文地址:http://www.cnblogs.com/wuyudong/p/5954847.html,转载请注明出处. 分析: 导航界面移动过程中,平移动画 ...
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- 你不知道的CSS背景—css背景属性全解
CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...
随机推荐
- 获得NOTEPAD++ Download Manager的所有下载列表的内容的au3脚本
;~ 获得NOTEPAD++ Download Manager的所有下载列表的内容的au3脚本 ;~ 作者: 鹏程万里 ;~ Email:aprial@163.com ;~ 创建日期: 2014年11 ...
- screenshoter 連續截圖工具
https://pcrookie.com/?p=993 顯示 mouse 設定 Settings -> Saving -> Display mouse cursor
- C和C++的关键字区别
c中数据类型是struct ,c++中可以是struct,也可以是class关于c++中<< 和>>分别是箭头往那边就是流向哪里的 比如cout<<这个就是流向屏幕 ...
- hdu 2544(SPFA)
最短路 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- ./configure时候遇到的问题 Cannot find install-sh, install.sh, or shtool in ac-aux
https://blog.csdn.net/anloan/article/details/17268997
- [BZOJ4756][Usaco2017 Jan]Promotion Counting 树状数组
4756: [Usaco2017 Jan]Promotion Counting Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 305 Solved: ...
- java序列化的机制与原理
有关Java对象的序列化和反序列化也算是Java基础的一部分,下面对Java序列化的机制和原理进行一些介绍. Java序列化算法透析 Serialization(序列化)是一种将对象以一连串的字节描述 ...
- LCA【bzoj3364】 [Usaco2004 Feb]Distance Queries 距离咨询
Description 奶牛们拒绝跑马拉松,因为她们悠闲的生活无法承受约翰选择的如此长的赛道．因此约翰决心找一条更合理的赛道,他打算咨询你．此题的地图形式与前两题相同．但读入地图之后,会有K个问题． ...
- System对象
System:类中的方法和属性都是静态的 out:标准输出,默认是控制台 in:标准输入.默认是键盘 System:描述系统的一些信息. 获取系统属性信息:Properties getProperti ...
- 单条sql性能分析与优化
性能分析 1. explain 查看sql执行计划,得出索引使用情况等信息 2. show profiling 查看sql所有执行步骤以及用时,使用步骤如下 1)开启性能剖析 mysql> se ...