<!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. Sony/索尼 NW-ZX300A ZX300 无损音乐播放器4.4口

    https://item.taobao.com/item.htm?spm=a1z0d.7625083.1998302264.6.5c5f4e69ELHOcm&id=557859816402 ( ...

  2. OpenCV相关网站推荐(Informative websites related to OpenCV)

    原文来自:http://answers.opencv.org/question/69691/informative-websites-related-to-opencv/ i think it wil ...

  3. 微信小程序——1、文件的认识

    主体文件的构成 微信小程序的主体由三个部分组成,需放在主目录中,名称也是固定的 app.js:微信小程序的主逻辑文件,主要用来注册小程序 app.json:微信小程序的主配置文件,对微信小程序进行全局 ...

  4. devicePixelRatio手机图片模糊的原因

    一.移动设备图片模糊问题 手机上图片模糊问题原因就是一个像素在电脑上和手机上代表的实际像素的不同. 我们在样式表中使用的px(独立像素)单位其实并不一定代表着实际的一个像素(物理像素),这还要看硬件的 ...

  5. ssh服务的最佳实践

    工作中ssh的最佳实践: 不要使用默认端口 禁止使用protocol version 1 (默认centos6/7已经禁止使用第一版了,但是centos5可能还有在用第一版本) 限制可登陆用户 设定空 ...

  6. Python3基础 str endswith 是否以指定字符串结束

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

  7. linux下查找指定后缀的文件

    1.linux下查找指定后缀的文件 例如查找当前目录下的所有后缀名时.c或.h的文件 find  .  -type f -regex  ".*\.\(c\|h\)"

  8. 自整理的jquery.Validate验证表达式

    自整理几个jquery.Validate验证正则: 1. 只能输入数字和字母    /^[0-9a-zA-Z]*$/g jQuery.validator.addMethod("letters ...

  9. ASP.NET MVC 中使用Ckeditor4.5 编辑器

    一.在项目中添加Ckeditor4.5.11 (1) 新建 ASP.NET MVC5项目,解压缩ckeditor_4.5.11_standard.zip,在VS2015的解决方案资源管理器中将得到的“ ...

  10. python ros 重新设置机器人的位置

    #!/usr/bin/env python import rospy import math from tf import transformations from geometry_msgs.msg ...