<!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. Python Web学习笔记之Python多线程基础

    多线程理解 多线程是多个任务同时运行的一种方式.比如一个循环中,每个循环看做一个任务,我们希望第一次循环运行还没结束时,就可以开始第二次循环,用这种方式来节省时间. python中这种同时运行的目的是 ...

  2. web应用下的安全问题以及tomcat/nginx对应解决方法（持续更新、亲测可解决问题）

    最近一券商那边扫描反馈了下面几个非业务型安全漏洞,要求解决,如下: XSS 自己写个脚本response的时候对特殊字符进行了处理,或者网上搜下一堆(不要忘了回车.换行). HTML form wit ...

  3. Python3基础 list remove 删除元素

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

  4. C#预处理器指令【转】

    本文转载自:http://www.cnblogs.com/miffylf/p/4005223.html C#有许多名为预处理器指令的命令.这些命令从来不会转化为可执行代码中的命令,但会影响编译过程的各 ...

  5. arm linux下编译库System.Net.Primitives.dll和System.Xml.XmlSerializer.dll

    1.环境: /home/jello # uname -aLinux  3.10.0 #2 SMP Mon Mar 6 17:52:09 CST 2017 armv7l GNU/Linux 2.获取mo ...

  6. SPOJ ADAFIELD Ada and Field（STL的使用：set，multiset，map的迭代器）题解

    题意:n*m的方格,“0 x”表示x轴在x位置切一刀,“0 y”表示y轴在y位置切一刀,每次操作后输出当前面积最大矩形. 思路:用set分别储存x轴y轴分割的点,用multiset(可重复)储存x轴y ...

  7. 51NOD 1117 聪明的木匠

    来源:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1117 挑战原题吧  大概 每次挑选最小的两个,合起来 #inclu ...

  8. Mui --- 页面之间的传值

    A页面 mui.ajax('http://14.50.2.49:80/default/AppLogin?Prm=' + Prm, { data: {}, //dataType: 'json', typ ...

  9. 遇到Io阻塞时会切换任务之【爬虫版】

    #! /usr/bin/env python3 # -*- coding:utf- -*- from urllib import request import gevent,time from gev ...

  10. jenkins 插件，下载地址

    http://updates.jenkins-ci.org/download/plugins/ 通常我们需要下载的插件有如下几个: