<!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. vc++引用外部dll时报error LNK2019: 无法解析的外部符号

    初学cpp,因为之前装linux下各种软件的时候,知道LD_LIBRARY_PATH可以指定动态库的目录.今天在vc集成log4cpp的时候,编译main时报error LNK2019: 无法解析的外 ...

  2. c++标准之于gcc/vc/boost等实现相当于jsr规范之于sunjdk/ibmjdk/tomcat/weblogic等实现

    春节放假期间,一直在学习c++,越想越发现c++标准之于gcc/vc/boost等实现相当于jsr规范之于sunjdk/ibmjdk/tomcat/weblogic等实现

  3. 07: linux中正则表达式与grep使用

    1.1 linux中正则表达式 1.^linux        以linux开头的行 2.$php         以php结尾的行 3..                匹配任意单字符 4..+  ...

  4. 20145304 Exp7 网络欺诈技术防范

    20145304 Exp7 网络欺诈技术防范 实验后回答问题 1.通常在什么场景下容易受到DNS spoof攻击 在公共网络下,如一些购物场所.咖啡馆.快餐店等提供的网络下:当自己常使用的无线网被有恶 ...

  5. 20145307陈俊达《网络对抗》Exp7 网络欺诈技术防范

    20145307陈俊达<网络对抗>Exp7 网络欺诈技术防范 基础问题回答 什么是dns欺骗攻击! 利用dns spoof运行DNS欺骗,如果是请求解析某个域名,dnsspoof会让该域名 ...

  6. 解决Android Studio Conflict with dependency 'com.android.support:support-annotations'报错

    解决Android Studio Conflict with dependency 'com.android.support:support-annotations'报错 在Android Studi ...

  7. POJ1251 Jungle Roads （最小生成树&Kruskal&Prim）题解

    题意: 输入n,然后接下来有n-1行表示边的加边的权值情况.如A 2 B 12 I 25 表示A有两个邻点,B和I,A-B权值是12,A-I权值是25.求连接这棵树的最小权值. 思路: 一开始是在做莫 ...

  8. linux中C语言发送广播报文

    2. 指令的解决方法: oute add -net 255.255.255.255 netmask 255.255.255.255 dev eth0 metric 1 或者 route add -ho ...

  9. socket编程时使用了inet_ntoa函数，存储到链表中的数据总是自动改变

    这和inet_ntoa的返回值有关系: 函数声明:char *inet_ntoa (struct in_addr); 返回点分十进制的字符串在静态内存中的指针. 所在头文件:<arpa/inet ...

  10. nginx缓存功能的设置

    首先用的缓存是proxy_cache. 在http段里加入下列几句: [plain] view plain copy   proxy_connect_timeout 5; proxy_read_tim ...