<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>多个属性同时渐变</title>
    <style>
        img#target {
            position:absolute;
            -moz-transition:left 5s linear,top 5s linear;
            -webkit-transition:left 5s linear,top 5s linear;
            -o-transition:left 5s linear,top 5s linear;
        }
    </style>
    <style>

</style>
</head>
<body>
    <img id="target" src="data:images/get.jpg" alt="气球" />
    <script type="text/javascript" >
        var target = document.getElementById("target");
        target.style.left = "0px";
        target.style.top = "0px";
        //为鼠标按下事件绑定监听器
        document.onmousedown = function (evt) {
            //将鼠标事件的X、Y坐标赋给气球图片的left、top
            target.style.left = evt.pageX + "px";
            target.style.top = evt.pageY + "px";
        }
    </script>
</body> 
</html>

transition多个属性同时渐变(left/top)的更多相关文章

  1. transition多个属性同时渐变(width,height,background)

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  2. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  3. transition（动画属性）

    CSS 过渡(transition)是通过定义元素从起点的状态和结束点的状态,在一定的时间区间内实现元素平滑地过渡或变化的一种补间动画机制.你可以让属性的改变过程持续一段时间,而不是立即生效. 通过t ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 渐变3

    4  径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 径向渐变的格式如下: radial-gradient ...

  5. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例

    3 线性渐变实例 一.颜色从顶部向底部渐变 制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”:第二种方法起点参数设置为“top”:第三种起点参数使用“-90 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. iOS图片折叠效果：Layer的contentsRect属性和渐变层

    http://www.cocoachina.com/ios/20150722/12622.html 作者:@吖了个峥 授权本站转载. 前言 此次文章,讲述的是Layer的一个属性contentsRec ...

  9. CSS3 transition 动画过度属性

    <!DOCTYPE html> <html> <head> <style>  div { width:100px; height:100px; back ...

随机推荐

  1. linux内核分析 1、2章读书笔记

    一.linux历史 20世纪60年代,MIT开发分时操作系统(Compatible TIme-Sharing System),支持30台终端访问主机: 1965年,Bell实验室.MIT.GE(通用电 ...

  2. LM2596、LM2576

    找来的资料,参考一下,震荡频率不一样,最大输入电压不一样. LM2576系列是的3A电流输出降压开关型集成稳压电路, ●最大输出电流:3A; ●振荡频率:52kHz; ●转换效率:75%-88%(不同 ...

  3. keil_4/MDK各种数据类型占用的字节数

    笔者正在学习uCOS-II,移植到ARM时考虑到数据类型的定义,但对于Keil MDK编译器的数据类型定义还是很模糊,主要就是区分不了short int.int.long 和long int占用多少字 ...

  4. Python3基础 time 索引值访问元组中的年月日时分秒

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. Java 多线程中的任务分解机制-ForkJoinPool，以及CompletableFuture

    ForkJoinPool的优势在于,可以充分利用多cpu,多核cpu的优势,把一个任务拆分成多个“小任务”,把多个“小任务”放到多个处理器核心上并行执行:当多个“小任务”执行完成之后,再将这些执行结果 ...

  6. 安卓开发 Activity入门

    生命周期 Activity包含5种状态,涉及7种方法 1. 启动状态 2. 运行状态 *** 即使内存不足,Android先销毁栈底的Activity,来确保当前Activity正常运行 3. 暂停状 ...

  7. BZOJ4415: [Shoi2013]发牌 树状数组+二分

    Description 假设一开始,荷官拿出了一副新牌,这副牌有N张不同的牌,编号依次为1到N.由于是新牌,所以牌是按照顺序排好的,从牌库顶开始,依次为1, 2,……直到N,N号牌在牌库底.为了发完所 ...

  8. LaTex: Undefined citation warnings 解决方法

    参考 Undefined citations LaTex: Undefined citation warnings 解决方法 在使用TexMaker编译文献的时候,出现引用参考文献的问题: Packa ...

  9. python 连加

    sum= number=int(input('请输入整数: ')) #递增for循环,从小到大打印出数字 print('从小到大排列输出数字:') ,number+): sum+=i #设置sum为i ...

  10. ubuntu14.04 设置开机自启动脚本

    方法1.将脚本放入/etc/rc.local文件中. 方法2.添加一个ubuntu的开机启动服务 分为以下几个步骤: 1)新建一个脚本文件 new_services.sh #!/bin/bash # ...