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. apache 基本vhost配置

    经常使用Apache虚拟主机进行开发和测试,但每次需要配置虚拟主机时都习惯性的ctrl+c和ctrl+v,这次由于重装系统,需要配置一个新的PHP开发环境虚拟主机,于是总结一下Apaceh配置http ...

  2. php下redis的安装教程

    1.得有php的环境,推荐使用appserv,下载链接 链接: http://pan.baidu.com/s/1cHqSOY 密码: b8w2 2.安装redis 下载链接 链接: http://pa ...

  3. .NetCore+Jexus代理+Redis模拟秒杀商品活动

    开篇叙 本篇将和大家分享一下秒杀商品活动架构,采用的架构方案正如标题名称.NetCore+Jexus代理+Redis,由于精力有限所以这里只设计到商品添加,抢购,订单查询,处理队列抢购订单的功能:有不 ...

  4. 图论基础之Dijkstra算法的初探

         图论,顾名思义就是有图有论.        图:由点"Vertex"和边"Edge "组成,且图分为有向图和无向图(本文讨论有向图),之前做毕业设计的 ...

  5. English - Titanium Bike

    The silver-gold triathlon bike was sitting in Kris's dining room next to the door. It had no kicksta ...

  6. Python实现浏览器自动化操作

    Python实现浏览器自动化操作 (2012-08-02 17:35:43) 转载▼     最近在研究网站自动登录的问题,涉及到需要实现浏览器自动化操作,网上有不少介绍,例如使用pamie,但是只是 ...

  7. 腾讯地图JS API实现带方向箭头的线路Polyline

    最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...

  8. JavaWeb 后端 <十三> 之 监听器 JSTL国际化

    1. 监听器 1.1   概述 监听器: 主要是用来监听特定对象的创建或销毁.属性的变化的! 是一个实现特定接口的普通java类! 对象: 自己创建自己用 (不用监听) 别人创建自己用 (需要监听) ...

  9. JMeter Http请求POST提交token失败，取样器结果Response Code 415

    Jmeter脚本,http请求以post方式提交token,执行脚本在察看结果中显示失败,取样器结果响应状态Response Code 415,如图:

  10. 计算 x y 的最近值

    计算xy的最近值. 代码如下: package Day05; import java.util.Arrays; public class FindNearestPoints { public stat ...