<!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. MySQL Crash Course #05# Chapter 9. 10. 11. 12 正则.函数. API

    索引 正则表达式:MySQL only supports a small subset of what is supported in most regular expression implemen ...

  2. 03: MySQL基本操作

    MySQL其他篇 目录: 参考网站 1.1 MySQL 三种数据类型(数值,字符串,日期) 1.2 MySQL常用增删改查命令 1.3 删除,添加或修改表字段 1.4 MySQL外键关联(一对多) 1 ...

  3. codevs & vijos 爱在心中 - Tarjan

    描述 “每个人都拥有一个梦,即使彼此不相同,能够与你分享,无论失败成功都会感动.爱因为在心中,平凡而不平庸,世界就像迷宫,却又让我们此刻相逢Our Home.” 在爱的国度里有N个人,在他们的心中都有 ...

  4. Pycharm 2017 激活码

    Pycharm 2017 激活码 server选项里边输入:  http://idea.liyang.io 我是通过这个成功的

  5. RS（纠删码）技术浅析及Python实现

    前言 在Ceph和RAID存储领域,RS纠删码扮演着重要的角色,纠删码是经典的时间换空间的案例,通过更多的CPU计算,降低低频存储数据的存储空间占用. 纠删码原理 纠删码基于范德蒙德矩阵实现,核心公式 ...

  6. Package.json 属性说明

    name - 包名. version - 包的版本号. description - 包的描述. entry pointer 项目入口文件 没有的直接回车跳过 test command: 测试命令 后面 ...

  7. 2018/7/18Bad English

    1 So instead of enjoying anime because it can portray interesting stories in a form that would be im ...

  8. 详解一下 javascript 中的比较

    翻译自:http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3 在JS中的关系比较(Relational Comparison)运算,指的 ...

  9. python 时间戳转元组

    #!/usr/bin/python # -*- coding: UTF- -*- import time localtime = time.localtime(time.time()) print(& ...

  10. 《剑指offer》第二十三题（链表中环的入口结点）

    // 面试题23:链表中环的入口结点 // 题目:一个链表中包含环,如何找出环的入口结点?例如,在图3.8的链表中, // 环的入口结点是结点3. #include <iostream> ...