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. [leetcode-598-Range Addition II]

    Given an m * n matrix M initialized with all 0's and several update operations. Operations are repre ...

  2. asp.net core 中灵活的配置方式

    asp.net core支持外部文件和命令行参数方式来配置系统运行所需要的配置信息,我们从下面两个常用场景来具体说下具体使用方法. 一.监听地址及端口配置 1,命令行方式 asp.net core系统 ...

  3. grep[行号&正则匹配字符有颜色]

    事情是这样的,昨天在深入学习grep命令时,看到别人博客用grep正则匹配,不仅行数有颜色,而且匹配到的字符也有颜色.我在CRT也试了下,毛颜色都没有.顿时感觉 so low. 解决 编辑vim~/. ...

  4. [图形学] 结束 [Unity Shader] 开始

    历时4个月,终于把<计算机图形学 with OpenGL>啃完了.如果边上班边看,即使一年应该都看不完. 虽然书里用到的GLUT库应该已经废弃,但并不影响用它去理解图形学的内容,我只把它当 ...

  5. C++强制类型转换：static_cast、dynamic_cast、const_cast、reinterpret_cast

    1. c强制转换与c++强制转换 c语言强制类型转换主要用于基础的数据类型间的转换,语法为: (type-id)expression//转换格式1 type-id(expression)//转换格式2 ...

  6. Java的基本数据类型和运算

    编码 ASCII--0~127  65-A  97-a 西欧码表---ISO-8859-1---0-255---1个字节 gb2312----0-65535---gbk---2个字节 Unicode编 ...

  7. PHP+NGINX

    1. 下载php编译包/nginx编译包(建议先装nginx再装php, php编译包我用的是5.5.35) 2. 创建好安装目录(我的编译包放在/home下) mkdir -p /usr/local ...

  8. ssh连接异常：read from socket failed connection reset by peer

    我出现这个问题的原因是:之前将/etc的权限设为777, 这是一个错误的操作!!然后我把权限修改过来(chmod 400 /etc) 重启服务(/bin/systemctl restart ssh.s ...

  9. nopCommerce 3.9 大波浪系列 之 网页加载Widgets插件原理

    一.插件简介 插件用于扩展nopCommerce的功能.nopCommerce有几种类型的插件如:支付.税率.配送方式.小部件等(接口如下图),更多插件可以访问nopCommerce官网. 我们看下后 ...

  10. (转)B-树和B+树的应用：数据搜索和数据库索引

    B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树: ⑴树中每个结点至多有m 棵子树: ⑵若根结点不是叶子 ...