CSS的过渡与变幻

最新推荐文章于 2024-07-25 15:44:34 发布

不起眼的皮皮虾

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量169

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_36801250/article/details/105633482

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

过渡与变幻

过渡

过渡在CSS当中我们使用transition这个属性来进行，但是这个属性它是一个CSS3的属性，它具备一定的兼容性，为了更好的让这个属性应用于不同的浏览器，我们应该针对不同的浏览器添加要应的前缀

解决兼容性的问题

在解决兼容性的时候，我们可以在这个地方添加相同浏览前缀，具体如下‘
- IE -ms-
- 以谷歌为核心的浏览器我们使用-webkit-
- 以火狐为核心的浏览器我们使用-moz-
- 以欧鹏为核心的浏览器我们使用-o-
例如上面的transition过渡，在不同的浏览器下面，我们应该写成-webkit-transition这样

CSS3的属性多半都是要添加前缀的，在开发的时候不一定要添加前缀
所谓的过渡其实指的就是某一个元素的某一些属性由一个状态变成另一个状态，在添加过渡之前，这些属性状态的变化是一瞬间的，而添加过渡以后，它可以持续一段时间

过渡的CSS属性

transition-property

这个CSS用于指明过渡的属性名称，例如transition-property:width这代表要对width这个属性的变化执行过滤效果
transition-duration

这个CSS属性代表的是过渡这个持续的时间
transition-delay

这个CSS属性代表的是过渡在当前的时间下还要等待多长时间
transition-timing-function

这个是过渡的最的一个属性，它用来指定当前这个过渡的动画的效果，常用的枚举值有linear(匀速),ease/ease-in-out

以上的四个属性分别用来设置过渡的四个方面，下面我们通过一个案例来进行

**弄清楚一点：**过渡其实是在一些原本存在的属性上面做一些效果，它没有新的含义

<body>
    <div class="div1"></div>
</body>
<style type="text/css">
    .div1{
        width: 100px;
        height: 100px;
        background-color: red;
        transition-property: all;  /*所有属性都执行过渡*/
        transition-duration: 1s;   /*过渡持续的时间*/
        transition-delay: 0s;      /*过渡的等待时间*/
        transition-timing-function: linear;  /*过渡的效果*/
    }
    .div1:hover{
        width: 200px;
        height: 200px;
        margin-left: 50px;
    }
</style>

**说明：**上面的代码就充分的说明了一点，过渡的属性上面使用了all代表所有属性，然后在通过其它的transition-*来设置它的时间以及动画效果

上面的这个写法，是标准的写法，但是我们可以简写成一个属性transition这一种方式，案例如下

简写以后的代码

<body>
    <div class="div1"></div>
</body>
<style type="text/css">
    .div1{
        width: 100px;
        height: 100px;
        background-color: red;
        transition: all 1s 0s linear;   /*这就简写以后的方式 */
    }
    .div1:hover{
        width: 200px;
        height: 200px;
        margin-left: 50px;
    }
</style>

**说明：**上面的transition它已经写成了一个，我们经过对比以后，发现它的语法如下
.div1{
    transition:过渡的属性 过渡的时间 过渡的等待时间 动画的效果
}

过渡的执行顺序

如果在一个元素里面，它改变了多个属性，我们对这些属性都要实行一个过渡，但是在执行过渡这个效果的时候，我们希望它有一个顺序，例如，在上面的例子中，先改变高度，再改变宽度，后面改变外边距

这个时候，在这里，我们主要考虑的问题，就是这个地方的过渡等待

按顺序执行过渡的案例

<body>
    <div class="div1"></div>
</body>
<style type="text/css">
    .div1{
        width: 100px;
        height: 100px;
        background-color: red;
        /*主要的代码就是下行一面*/
        transition: width 1s 0s linear,height 1s 1s linear,margin-left 1s 2s linear;   
    }
    .div1:hover{
        width: 200px;
        height: 200px;
        margin-left: 50px;
    }
</style>

在上面的代码过程当中，我们看到了一点，就是当前的这个transition它的属性有点特殊，它中间有一些空格，也有一些逗号

中间的这些逗号指的是不同的地过渡在这里的执行效果，例如上面的代码中，我们的宽度与高度都执行了过渡，但是它们并不是同时开始的，宽度是等待为0s，而高度的等待这1s,它们两个人的值不一样，这个时候，我就要分开来写（中间就使用逗号进行隔开）。它的语法对比以后如下
.div1{
    transition:过渡属性1 过渡时间1 过渡等待时间1 效果1,过渡属性2 过渡时间2 过渡等待时间2 效果2
}

过渡的注意事项

在执行过渡的时候，最后给要过渡的元素一个初始值（如定位里面的left/right/top/bottom等）
目前的过渡我们多半都结合着一定的伪类使用如:hover,:target
某些特殊的属性是无法执行过渡,如float是无法执行过渡的,z-index

案例

下面是一个用:target及transition实现的一个渐隐渐现的轮播图案例

<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    .box{
        width: 639px;
        height: 426px;
        margin: auto;
        position: relative;
    }
    .ul-img-list{
        width: 639px;
        height: 426px;
        position: relative;
    }
    .ul-img-list>li{
        width: 639px;
        height: 426px;
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        transition: all 1s linear;
    }
    .ul-img-list>li>img{
        display: block;
        width: 639px;
        height: 426px;
    }
    .ul-index{
        text-align: center;
        position: absolute;
        bottom: 10px;
        width: 100%;
        z-index: 10;
    }
    .ul-index>li{
        width: 12px;
        height: 12px;
        background-color: red;
        display: inline-block;
        border-radius: 6px;
 
    }
    .ul-index>li>a{
        display: block;
        width: 12px;
        height: 12px;
    }
    .ul-img-list>li:target{
        /*可见性
        display:none
        * */
        /*visibility: visible;*/
        opacity: 1;
    }
    .ul-img-list>li:not(:target){
        /*visibility: hidden;*/
        opacity: 0;
    }*/
</style>
</head>
<body>
    <div class="box">
        <ul class="ul-img-list">
            <li id="li1"><img src="img/item1.jpg" alt="" /></li>
            <li id="li2"><img src="img/item2.jpg" alt="" /></li>
            <li id="li3"><img src="img/item3.jpg" alt="" /></li>
            <li id="li4"><img src="img/item4.jpg" alt="" /></li>
        </ul>
        <ul class="ul-index">
            <li><a href="#li1"></a></li>
            <li><a href="#li2"></a></li>
            <li><a href="#li3"></a></li>
            <li><a href="#li4"></a></li>
        </ul>
    </div>
</body>
 
<!--
    这个案例：
    1.不仅仅hover可以触发transition，:target也可以
    2.visibility这个属性它没有过渡状态，取而代之的是opacity
-->

变幻

CSS3当中的变幻主要指的是元素的位置，方向、角度发生的改变，在变幻当中，我们的变幻又分为两种，一种是2D变幻，在一种3D变幻

变幻在CSS当中的属性名为transform

2D变幻

2D变幻主要是围绕页面上面的X轴与Y轴发生的变化过程，在2D变化里面，我们有以下几种变幻方式，大致也分为两类，第一类是关于坐标的变幻，第二类是关于角度的变幻

旋转

在CSS当中，我们可以让某一个元素按照一定的角度进行旋转变幻，这个属性值是rotate,在旋转的时候，我们可以指定当前元素按照那一根轴进行旋转

rotateX沿着X轴进行旋转
rotateY沿着Y轴进行旋转
rotateZ沿着Z轴进行旋转

旋转是按照一定的角度进行的，这个时候，rotate这个里面接收一个角度单位，角度单位我们以deg结尾

例如旋转Z轴45度则是transform:rotateZ(45deg)

默认在旋转的过程当中，它的旋转点都在正中间，但是我们可以通过transform-origin属性去修改它的旋转点

缩放

在CSS当中，我们可以按照比例，把某一个元素的大小进行缩放（并不是通过width与height去调整大小，而直接缩放，相当于放大镜或缩放镜）缩放在这里，也有三个值

scaleX沿着X轴缩放
scaleY沿着Y轴缩放
scale()X与Y轴同时缩放

位移

在CSS当中，我们可以通过margin与position改变元素的位置，现在在CSS3当中，我们有一个属性transform下面的另一个值translate也可以改变，这个值是位移的意思

translateX沿着X轴平移
translateY沿着Y轴平移
translate里面接收两个值，可以沿着X轴与Y轴同同时平移

3D变幻

所谓的3D变幻其实就是元素可以在Z轴上去移动了，或者元素可以同时执行多种变幻方式，例如，既执行位移，也执行旋转，还执行缩放

不起眼的皮皮虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的过渡与变幻

过渡与变幻过渡过渡在CSS当中我们使用transition这个属性来进行，但是这个属性它是一个CSS3的属性，它具备一定的兼容性，为了更好的让这个属性应用于不同的浏览器，我们应该针对不同的浏览器添加要应的前缀解决兼容性的问题在解决兼容性的时候，我们可以在这个地方添加相同浏览前缀，具体如下‘IE -ms-以谷歌为核心的浏览器我们使用-webkit-以火狐为核心的浏览器我们使用-...
复制链接

扫一扫

专栏目录