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. php二进制流文件

    <?php $img_file = 'test.png'; // $fp = fopen($img_file, 'rb'); // $content = fread($fp, filesize( ...

  2. Vue和Bootstrap的整合之路

    我是一个刚刚接触前端开发的新手,所以有必要记录如何将Bootstrap和Vue进行整合. 如果你是老手,请直接绕道而过.作为一个新手,里面的步骤,过程或者专业术语未必正确,如果你发现哪里错误了,请发邮 ...

  3. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  4. Chapter 2. Video Formats and Quality

    本章节主要介绍一些视频格式相关的基础知识. 交织(Interlace) 即每一个采样帧采样时隔行采样,奇数行和偶数行交替. YCbCr 人眼视觉系统(Human Visual System, HVS) ...

  5. spring的Convert机制

    spring.core包内有Converter接口,方法是T convert(S source);从一个类型转为内容一个类型的实际转化器:converters可能非常多,需要一个注册器来集中管理使用, ...

  6. 【caffe】Error parsing text-format NetParameter: ****:**:Expected string.

    错误描述: prototxt中第****行,第**列缺少一个整型数或者标识符. 解决方法: 检查对应的prototxt文件,第****行,第**列是否遗漏相关信息. 我的文件是在代码新旧版本没对应好~ ...

  7. MySQL实例

    建表实例: CREATE TABLE command_content( ID ) PRIMARY KEY NOT NULL AUTO_INCREMENT, CONTENT ), COMMAND_ID ...

  8. python中json.loads,dumps,jsonify使用

    search_info = {'id':132,'user_role':3} print type(search_info) #输出 <type 'dict'> #转为string用dum ...

  9. Vijos 1002 过河 状态压缩DP

    描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数轴上 ...

  10. VIM基础知识整理(附思维导图)

    这是当时初学VIM后做的一个思维导图,图片稍大,所以从freemind导出了html文本po在下面:图片在最下方,放大可清晰浏览. VIM 普通模式 普通编辑命令 功能:浏览,普通编辑 x:删除光标所 ...