<!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. Python3.x（windows系统）安装libxml2库

    Python3.x(windows系统)安装libxml2库 cmd安装命令: pip install lxml 执行结果: 再执行命令: pip install virtualenv 执行结果:

  2. vc++引用外部dll时报error LNK2019: 无法解析的外部符号

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

  3. GreenOpenPaint的实现（五）矩形框

    想显示一副图片相对来说比较容易.但是想在SDI中显示一个可以拖拽的矩形框,并且在滚动和缩放下都不变形,是很困难的. MFC应该说在这个方面提供了强大的支持,但是也有一些是由于历史的原因需要去除的地方, ...

  4. ACM数论之旅6---数论倒数，又称逆元（我整个人都倒了(￣﹏￣)）

    数论倒数,又称逆元(因为我说习惯逆元了,下面我都说逆元) 数论中的倒数是有特别的意义滴 你以为a的倒数在数论中还是1/a吗 (・∀・)哼哼~天真 先来引入求余概念 (a +  b) % p = (a% ...

  5. CEF之CefSettings设置locale

    参考:https://blog.csdn.net/xiezhongyuan07/article/details/84402083 在开发过程遇到一个问题,CEF加载一个静态页面,然后在静态页面上有一个 ...

  6. Python3基础 lambda 简单示例

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

  7. grep如何结尾匹配

    答:grep "jello$" 如:git branch输出以下内容: yes-jello-good yes-jellos yes-jello 那么使用以下命令只能过滤出一行: $ ...

  8. Linux 文件的权限

    备注 : -rw-r--r-- 第一个“-”不算 ,三个一组 这个就是 644   二.使用chown命令更改文件拥有者 在 shell 中,可以使用chown命令来改变文件所有者.chown命令是c ...

  9. Spring Boot条件注解

    一.为什么SpringBoot产生于Spring4? Spring4中增加了@Condition annotation, 使用该Annotation之后,在做依赖注入的时候,会检测是否满足某个条件来决 ...

  10. Codeforces Round #426 (Div. 2) C. The Meaningless Game

    C. The Meaningless Game 题意: 两个人刚刚开始游戏的时候的分数, 都是一分, 然后随机一个人的分数扩大k倍,另一个扩大k的平方倍, 问给你一组最后得分,问能不能通过游戏得到这样 ...