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. mysqlclient和PyMySQL对比

    环境:Python 3.5+, Django 1.9+ 最初用django时,搜索时发现PyMySQL的文章很多,然而在django的官方文档中python3版的mysql客户端驱动确没有提到PyMy ...

  2. 【LeetCode】67. Add Binary

    题目: Given two binary strings, return their sum (also a binary string). For example,a = "11" ...

  3. require.js详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...

  4. 【Linux相识相知】bash的基础特性

    命令历史 shell进程会记录用户提交执行过的命令 可以是用history查看: [root@localhost dev]# history ss -tnl ifconfig vi /etc/sysc ...

  5. Angular--ui-router的使用

    先引用Angular然后引用ui-router 路由清单:我们依赖的ui.router中提供了一个服务$state,此时可以用config来配置这个服务.用$stateProvider的state方法 ...

  6. voa 2015.4.29

    Nepal has declared three days of mourning for the victims of Saturday's 7.8 magnitude earthquake tha ...

  7. 网站waf检测

    WAFW00F WAFW00F识别和指纹Web应用防火墙(WAF)产品. 其工作原理是首先通过发送一个正常http请求,然后观察其返回有没有一些特征字符,若没有在通过发送一个恶意的请求触发waf拦截来 ...

  8. php中curl的使用（一）

    cURL 是一个利用URL语法规定来传输文件和数据的工具,PHP的curl是通过libcurl库与服务器使用各种类型的协议,如HTTP.FTP.TELNET等. PHP curl函数 curl_clo ...

  9. linux UART

    #include <stdio.h> #include <string.h> #include <sys/types.h> #include <errno.h ...

  10. 基于微信小程序的系统开发准备工作

    腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传统的APP来说,微信小程序确实能够 ...