<!DOCTYPE html>

<html>

<head>

</head>

<body id="body">

    <!--

        /*transition过渡特效*/

        第一步：设置目标元素div2的初始样式

        第二步：设置目标元素div2在鼠标hover时的表现样式

        第三步：给目标元素添加transition属性，并指定需要过渡的属性

        /*固定宽高盒子上下左右居于不定宽高容器正中*/

        第一步：设置待定位盒子和宽高值

        第二步：将待定位盒子position属性设为absolute使其相对于父元素绝对定位（相对于static定位以外的第一个父元素进行定位）,

        使其顶部和左侧定位距离设为父元素高和宽的50%（即：先将盒子定位到“父元素4分之1区域的右下部”）

        第三步：把待定位盒子的margin-top值和margin-left值设为其高度和宽度一半的负值（即：把盒子从右下区域拉回正中间）

    -->

    <div id="div2">

        <div>

            content content content content content content content content

        </div>

    </div>

    <style>

        * {

            margin:0;

            padding:0;

        }

        #body {

            background-color:green;

        }

        #div2 {

            width:300px;

            height:200px;

            background-color:red;

            position:absolute;

            top:50%;

            left:50%;

            margin-top:-100px;

            margin-left:-150px;

            transition:all 3s;

            /*transition:width 3s,height 3s,margin-top 3s,margin-left 3s,background-color 3s;*/ /*属性随相同时间过渡，整体过渡显得很规则*/

            /*transition:width 1s,height 2s,margin-top 2s,margin-left 3s,background-color 3s;*/ /*属性随不同时间过渡，整体过渡显得更有动态感*/

        }

        #div2:hover {

            width:600px;

            height:400px;

            margin-top:-200px;

            margin-left:-300px;

            background-color:yellow;

        }

    </style>

    <script src="jquery-2.1.1.min.js"></script>

    <script>

    </script>

</body>

</html>

　　

鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）的更多相关文章

  1. 如何在Vue中，当鼠标hover上元素时,给元素加遮罩层

    介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...

  2. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  3. JavaScript中的各种宽高属性

    转自慕课网:http://www.imooc.com/article/14516   在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...

  4. PHP去除html的宽高属性的正则表达式

    PHP去除html的宽高属性的正则表达式 <pre><?php/** * 清除宽高样式 * @param String $content 内容 * @return String */ ...

  5. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  6. css 未知子元素宽高的居中

    .parent{ position:relative; } .child{ position:absolute; left:50%; top:50%; transform:translate(-50% ...

  7. Tooltip鼠标hover放上时文字提示

    使用content属性来决定hover时的提示信息. 由placement属性决定展示效果: placement属性值为:                 方向-对齐位置: 四个方向:top.left ...

  8. （转）详解JS位置、宽高属性之一：offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  9. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

随机推荐

  1. 我的第一个hadoop程序

    利用virtualbox+win的开发环境搭设好咯,在win下做开发,利用linux跑hadoop,伪分布式的. 上第一个程序 package org.apache.hadoop.examples; ...

  2. 写Python脚本语言时，“SyntaxError: Non-ASCII character '\xe6' in file”错误的处理

    如图是一段简单的文件操作代码,以为打开文件"test1221_1.py",若不存在此文件,则创建此文件.接下来并输出相关信息. 当少写了黄色方框圈起来的一行看似不经意的带有编码格式 ...

  3. 微信H5页面内实现一键关注公众号

    H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一 ...

  4. 提供在线制作icon的网站

    http://www.ico.la/ http://www.makeico.com/ http://free.logomaker.cn/tools/icoMaker.aspx http://ico.5 ...

  5. iOS·UIButton如何文字在下图片在上

    创建子类继承自UIButton,在layoutSubviews方法中改变文字和图片的位置就可以了,同理,稍作改变,可以写出文字在上图片在下.本文只给出文字在下图片在上的代码 -(void)layout ...

  6. Java Map按键(Key)排序和按值(Value)排序

    Map排序的方式有很多种,两种比较常用的方式:按键排序(sort by key), 按值排序(sort by value).1.按键排序jdk内置的java.util包下的TreeMap<K,V ...

  7. [转]struts1.2的action参数配置

    转载地址:http://chenfeng0104.iteye.com/blog/796870 <struts-config>     <form-beans>         ...

  8. 20161020001 DataGridView 选中的 DataGridViewCheckBoxCell 不添加重复项

    private void btn_add_Click(object sender, EventArgs e)        {            string str_P_ID = "& ...

  9. 阿里云CentOS6.5搭建服务器JDK+tomcat+MySQL

    阿里云ECS,计划安装jdk:MySQL:tomcat: 一.yum Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的S ...

  10. HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...