css的2d转换十分强大，能够在不使用js的情况下，实现页面的元素与用户之间更多动态的交互，增强用户体验。其中使用最多的就是hover伪类。

1、创建一个页面的div元素：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>2d转换测试</title>

    </head>

    <body>

        <div id="fr">

            <div class="de">我是测试文本</div>

            <div class="de">我是测试文本</div>

            <div class="de">我是测试文本</div>

            <div class="de">我是测试文本</div>

        </div>

    </body>

</html>

2、css中给定元素的样式：

#fr{

        width: 500px;

        height: 600px;

        border: 1px solid gray;

        margin: 20px auto;

            }

.de{

       width:100px;

       height:100px;

       border:1px solid green;

       margin: 10px auto;

            }

3、浏览器解析的效果：

4、给第一个正方形加入鼠标点击后的效果css：

.de:first-child:hover{

                transform: translate(0px,-5px);

                transition: transform 1s;

            }

效果：

鼠标移动到正方形区域后，小方块会向上移动5px，有过渡效果；离开小方块后，立即回到原位，没有过渡效果；

另外一种写法：

.de:first-child{

                transition: transform 1s;

            }

            .de:first-child:hover{

                transform: translate(0px,-5px);

            }

将transition过渡效果写在被选中的整个元素中，出现的效果：

鼠标移动到正方形区域后，小方块会向上移动5px，有过渡效果；离开小方块后，小方块会到原始位置，有过渡效果。

原理：将过渡效果transition写在hover伪类中，鼠标进入时，hover效果会应用transition效果；鼠标移出，属于非hover，没有过渡效果；即，元素移动过程中，有过渡效果；元素回到原始位置，没有过渡效果。将transition过渡写在整个元素中，会在元素整个移动过程中起到过渡效果。

5、给每个小方块加入动画效果完整的css：

#fr{

                width: 500px;

                height: 600px;

                border: 1px solid gray;

                margin: 20px auto;

            }

            .de{

                width:100px;

                height:100px;

                border:1px solid green;

                margin: 10px auto;

            }

            .de:first-child{

                transition: transform 1s;

            }

            .de:first-child:hover{

                transform: translate(0px,-5px);

            }

            .de:nth-child(2){

                transition: transform 1s;

            }

            .de:nth-child(2):hover{

                transform: rotate(360deg);

            }

            .de:nth-child(3){

                transition: transform 1s;

            }

            .de:nth-child(3):hover{

                transform: skew(30deg ,30deg);

            }

            .de:last-child{

                transition: transform 1s;

            }

            .de:last-child:hover{

                transform: scale(1.05,1.05);

            }

效果：

所有的 transform transition都需要进行浏览器兼容性适配，这里仅仅是为了演示，没有对浏览器进行适配。

CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别的更多相关文章

  1. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  2. 【笔记】css hover 伪类控制其他元素

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  3. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

  4. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  5. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  6. 用:hover伪类代替js的hover事件

    制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...

  7. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  8. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  9. CSS中的选择器之html选择器和伪类选择器

    1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...

随机推荐

  1. thinkphp中try catch的运用

    public function doedit_set(){ $info=$this->_post("info"); $id=$this->_post("id& ...

  2. 【jframe】Java Web应用程序框架 - 第01篇：Get Started

    jframe是什么? jframe是一个基于MIT协议开源的java web应用程序框架,汇聚了我们团队之于java web应用程序的核心架构思想以及大量最佳实践,并且持续在实际项目中不断完善优化. ...

  3. java怎么连接mysql数据库

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  4. 本地jar上传到本地仓库

    转自:http://www.blogjava.net/fancydeepin/archive/2012/06/12/380605.html   thanks!! Maven 确确实实是个好东西,用来管 ...

  5. web前段学习2016.6.6

    目前上网的方式:手机平板电脑移动端:智能手机.平板PC:电脑.笔记本运行在移动端的东西:APPios:object-candroid:javapc端的东西:桌面应用程序 c++ 我们上网的方式都是通过 ...

  6. Maven下从HDFS文件系统读取文件内容

    需要注意以下几点 1.所以的包都是org.apache.hadoop.XXX 2.三个配置文件要放到指定文件夹中等待文件系统读取(src/main/resources):core-site.xml h ...

  7. JavaScript第三课 （循环）

    循环语句       !如果至少需要执行一次循环体,就用do … while语句,一般情况下用while语句就可以了. while 语法:一直读取循环到条件为假时停止循环. while(条件) { 语 ...

  8. 基于Bootstrap+angular的一个豆瓣电影app

    1.搭建项目框架 npm初始化项目 npm init -y //按默认配置初始化项目 安装需要的第三方库 npm install bootstrap angular angular-route --s ...

  9. 64位Win10系统安装Mysql5.7.11

    最近在装了64位Win10系统的mac book笔记本上用mysql-installer-community-5.7.11.0安装Mysql5.7.11,在配置mysql server时老是卡住,报错 ...

  10. mysql5.6 无法使用64odbc连接

    win10 64位,mysql5.6 无法使用64 连接odbc,处理:装32位odbc, 使用C:\Windows\SysWOW64\odbcad32.exe 配置.