CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

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都需要进行浏览器兼容性适配,这里仅仅是为了演示,没有对浏览器进行适配。

时间: 2024-10-12 21:50:52

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

css的2D转换

脚本化css 下面通过css实现动画效果,可以使用脚本化的css实现滑入,轮廓伸缩的列表,即动态的HTML,一个过时的说法DHTML 一些css的基础知识 之前已经看过厚厚的一本大书,现在简单看一下,补充一下不知道的点 层叠 web浏览器组合元素的style属性,然后再计算样式. 颜色透明度和半透明 颜色有半透明的颜色(不知道为什么edge不兼容) 脚本化内联样式 div.style.background = "#FFFFFF" 即通过js完成css样式的添加 由于-会被js认为有语法

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

:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮改变样式: HTML <div id="yanshi"> 演示 </div> CSS #yanshi{ width: 100px; height: 100px; transition: background-color 0.5s,color 0.5s; text-a

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

制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(function(){ $("sub-nav").addClass("show"); }, function(){ $("sub-nav").removeClass("show"); }); 第一个function实现鼠标移上去的样式,

IE6不支持:hover伪类效果的解决办法

:hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器就显示不出来. 在IE6中只兼容a:hover,要使用li:hover或div:hover,需引用一个文件使其兼容: csshover.htc (点击直接查看) 放在网站的根目录下,并在css文件(或者<style>标签)中,加上 body { behavior:url("...cssh

Web 前端技术:CSS3---新属性,浏览器支持度,圆角边框(border-radius),阴影(box-shadow),文字与字体(text-shadow属性、word-wrap属性、@font-face规则),2D转换、过渡与动画(transform属性),3D变换

浏览器支持度 CSS3属性: columns:规定列的宽度和列数 默认宽度.列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1.border-radius属性(圆角边框) eg: 结合不同浏览器兼容问题,使用该CSS3新属性 eg: 2.box-shadow属性(阴影) eg

CSS内置的几个标准的伪类和伪对象

伪类和伪对象相信大家经常听到,有一部分同学会把这俩个搞混淆,其实我本人有时候也会.今天特地梳理了一下, 下面一一列出,看完后相信对这俩会有比较清晰的区分 伪类 用途 :link a连接标签的未被访问的样式 :hover 随想在鼠标移上时的样式 :active 对象被用户点击及被点击释放之间的样式 :visited a链接对象被访问后的样式 :focus 对象成为输入焦点时的样式 :first-child 对象的第一个子对象的样式 :first 对于页面的第一页使用的样式 伪对象 用途 :afte

CSS 3 2D转换

------转换:使用transform 属性将HTML元素 移动.旋转.缩放.倾斜 1.移动 translate(x轴,y轴) .translateX.translateY 2.旋转 rotate(45deg)//顺时针旋转45度 3.缩放 scale (1.2) //放大1.2倍 scale(x轴,y轴).scaleX .scaleY 4.倾斜 skew(45deg,-20deg)//沿x轴倾斜的角度,沿y轴倾斜的角度 transform-origin:转换基准点 -----默认,中心点 -

hover伪类

定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素.提示::hover 选择器可用于所有元素,不只是链接.提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接.注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效. 代码效果测试:<!DOCTYPE html><html><head><

OpenCv学习笔记(三)---OpenCv中基本数据类型--Point,Size,Rect,Scalar,Vec3b类类型的详细解释及其OpenCv中源代码的详细分析

/********************************************************************************************* 程序功能: OpenCv的基本数据结构源代码的解读,我们常用的OpenCv的基本数据结构有六种: 1--Point类 2--Size类 3--Rect类 4--Scalar类 5--Vec3b--向量模板类 6--Range类 编写环境: OpenCv2.4.8+VS2010 地点时间: 陕西师范大学 201