CSS的过渡与变幻

最新推荐文章于 2024-11-08 14:33:10 发布

不起眼的皮皮虾

最新推荐文章于 2024-11-08 14:33:10 发布

阅读量182

点赞数

分类专栏： 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
-->