<!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. c++第十五天

    <c++ primer, 5E> 第94页到第99页,笔记: 1.迭代器(iterator):一种比下标访问更通用的访问容器中元素的机制. (并不是所有标准库容器都支持下标访问,<运 ...

  2. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  3. 04: Mysql性能优化

    MySQL其他篇 目录: 参考网站 1.1 Mysql数据库的优化技术 1.2 数据库表设计 1.3 SQL优化 1.为查询缓存优化你的查询 2.EXPLAIN 你的 SELECT 查询 3. 当只要 ...

  4. hdu1866 A + B forever!（面积并）题解

    A + B forever! Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  5. java中集合格式及json格式的特点和转换

    作者原创:转载请注明出处 今天在写代码,遇到一个难点,由于要调用webservice接口,返回的为一个list集合内容,从webservice调用接口返回的为一个string的io流, 在调用接口的地 ...

  6. 02_Kafka单节点实践

    1.实践场景 开始前的准备条件: 1) 确认各个节点的jdk版本,将jdk升级到和kafka配套的版本(解压既完成安装,修改/etc/profile下的JAVA_HOME,source /etc/pr ...

  7. UVa 11491 奖品的价值

    https://vjudge.net/problem/UVA-11491 题意:一个n位整数,删除其中的d个数字,输出最大值. 思路:肯定从高位开始分析,代码如下. #include<strin ...

  8. 学习mybatis-3 step by step 篇二

    Mapper XML 文件 基本的*Mapper.xml文件配置就不熬述了具体可参考: http://www.mybatis.org/mybatis-3/zh/sqlmap-xml.html 1.sq ...

  9. C# Int转Enum

    Int-->Enum (1)可以强制转换将整型转换成枚举类型. 例如:Colors color = (Colors)2 ,那么color即为Colors.Blue (2)利用Enum的静态方法T ...

  10. IDEA Spring-boot-devTools 无效解决办法二

    转载地址:Intellij IDEA 使用Spring-boot-devTools无效解决办法 相信大部分使用Intellij的同学都会遇到这个问题,即使项目使用了spring-boot-devtoo ...