过渡

CSS基础

过渡

过渡是CSS3的效果，它指元素由一个状态转变成另一个状态的过程，它主要使用transition这个属性来完成

我们现在通过案例去看效果

<style type="text/css">
    .div1{
        width:200px;
        height: 100px;
        background-color: pink;
    }
    .div1:hover{
        width: 400px;
    }
</style>
<div class="div1"></div>

当我们把鼠标放在div1这个盒子上面去的时候，这个盒子的宽度就会由200px变成400px。但是这个转变过程它是一瞬间就完成了。我们能不能把这个转变的过程给它一个缓冲呢？这个缓冲的过程我们就叫过渡

过渡的属性

过渡主要是由以下几个属性来完成的

transition-property要执行过渡的属性
transition-duration要执行过渡的时间
transition-timing-function要执行过渡的时间函数（过渡效果）
transition-delay过渡的延时等待

上面的四个属性值也可以直接使用简写的属性去完成，直接调用transition就可以了

transition: 过渡属性 过渡时间 过渡效果 过渡等待;

现在我们学习了这四个属性以后，就交刚刚上面的案例添加一个过渡

.div1{
    width:200px;
    heigh:100px;
    background-color:pink;
    /*添加了过渡的属性*/
	transition-property:width;
    transition-duration:2s;
    transition-timing-function:linear;
    transition-delay:3s;
}
.div1:hover{
    width:400px;
}

上面的过渡属性也可以直接使用简写

transition: width 2s linear 3s;

过渡的效果

过渡在执行的时候，有以下几个效果。主要有两个单词要注意，一个是ease轻松的意思，另一个是linear

具体可以看过渡小球的效果，小球的间隔越大，速度越快

ease，先快后慢

ease-in，先慢后快

ease-out，先快后慢

ease-in-out，开始与结束很慢，中间很快

linear，匀速，全程速度相同

除了上面的5个效果以外，我们还可以手动的去设置其它的效果。如cubic-bezier(0, 0.92, 1, 1.38)

多个属性的过渡

过渡是可以支持多个属性的，但是要注意它的语法格式，如果要执行多个属性的过渡，只需要在之前的过渡属性的属性值中间打上逗号隔开就可以了

transition-property: width, height;
transition-duration: 2s, 1s;
transition-timing-function: linear, ease-out;
transition-delay: 1s, 2s;

同的原理，上面的代码也可以使用transition简写来完成

transition: width 2s linear 1s , height 1s ease-out 2s;

在过渡的时候，如果仅仅只是过渡的属性名不相同，而其它的属性都相同，我们可以使用一个特殊的属性值all代表所有变化的属性都发生一个过渡效果

transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 0s;

简写为如下格式

transition: all 2s linear 0s;

不能执行过渡的属性

在网页当中并不是所有的CSS属性样式都可以地过渡，有一些特殊的属性是不可以执行过渡效果的

display不能执行过渡
visibility不能执行过渡
float不能执行过渡
position不能执行过渡
z-index不能执行过渡
text-*不能执行过渡
font-*除font-size以外，其它不能执行过渡

当我们在使用上面这些属性的时候，要注意不能添加过渡效果，即使添加也，也不会出现效果

案例

根据下面图片的效果完成代码编写，在图片效果切换的过程当中要添加过渡

变化前	变化后

<style type="text/css">
    .slideBox{
        width: 60px;
        height: 30px; 
        border: 1px solid #ececec;
        border-radius: 15px;
        display: block;
        cursor:pointer;
    }
    .innerSlideBox{
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
        border-radius: inherit;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: linear;
        transition-delay: 0s;
    }
    .slideBox>input[type="checkbox"]:checked+.innerSlideBox{
        background-color: #7DC9FD;
    }
    .innerSlideBox>.circle{
        width: 30px;
        height: 30px;
        background-color: #FFFFFF;
        border: 4px solid #F5F5F5;
        box-sizing:border-box;
        border-radius:50%;
        transition-property:all;
        transition-duration:0.3s;
        transition-timing-function:linear;
        transition-delay:0s;
    }
    .slideBox>input[type="checkbox"]:checked+.innerSlideBox>.circle{
        margin-left:50%;
        background-color:#BEE3FD;
        border-color:#7DC9FD;
    }
    .slideBox>input[type="checkbox"]{
        display:none;
    }
</style>
<label class="slideBox">
    <input type="checkbox">
    <div class="innerSlideBox">
        <div class="circle"></div>
    </div>
</label>

选项卡切换效果案例。根据下面的图片，完成布局，实现效果

点击上边的选项卡，下面的盒子进行切换

<style type="text/css">
    .tab-outer-box {
        width: 600px;
        overflow: hidden;
        margin: auto;

    }
    .tab-box {
        width: calc(600px * 3);
        height: 400px;
        /* 添加一个过渡效果 */
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: linear;
        transition-delay: 0s;
    }

    .tab-item {
        width: 600px;
        height: 400px;
        float: left;
    }

    .tab-item:nth-of-type(1) {
        background-color: rgb(255, 0, 0);
    }

    .tab-item:nth-of-type(2) {
        background-color: rgb(0, 255, 0);
    }

    .tab-item:nth-of-type(3) {
        background-color: rgb(0, 0, 255);
    }

    /* 设置上面的label */
    .label-box {
        height: 35px;
    }
    .label-box>label{
        display: inline-block;
        width: 90px;
        text-align: center;
        line-height: 35px;
        border: 1px solid black;
        cursor: pointer;
    }
    .tab-outer-box>#tab-item1:checked~.tab-box{
        margin-left: 0px;
    }
    .tab-outer-box>#tab-item2:checked~.tab-box{
        margin-left: -100%;
    }
    .tab-outer-box>#tab-item3:checked~.tab-box{
        margin-left: -200%;
    }

    .tab-outer-box>input[name="tab-item-radio"]{
        display: none;
    }
</style>
<div class="tab-outer-box">
    <div class="label-box">
        <label for="tab-item1">选项一</label>
        <label for="tab-item2">选项二</label>
        <label for="tab-item3">选项三</label>
    </div>
    <input type="radio" name="tab-item-radio" id="tab-item1">
    <input type="radio" name="tab-item-radio" id="tab-item2">
    <input type="radio" name="tab-item-radio" id="tab-item3">
    <div class="tab-box">
        <div class="tab-item">
            第一个选项卡的内容
        </div>
        <div class="tab-item">
            第二个选项卡的内容
        </div>
        <div class="tab-item">
            第三个选项卡的内容
        </div>
    </div>
</div>

根据效果图完成下面的案例的效果
GIF2020-6-414-03-00

下面是HTML代码


<!-- 这是最外层的一个大盒子  -->
<div class="banner-goods-box">
    <!-- 轮播图 -->
    <div class="banner-image-list">
        <input checked type="radio" name="banner-img-radio" id="banner-img-radio1">
        <img src="img/1.png">
        <input type="radio" name="banner-img-radio" id="banner-img-radio2">
        <img src="img/2.png">
        <input type="radio" name="banner-img-radio" id="banner-img-radio3">
        <img src="img/3.png">
        <input type="radio" name="banner-img-radio" id="banner-img-radio4">
        <img src="img/4.png">
        <div class="label-box">
            <label for="banner-img-radio1"></label>
            <label for="banner-img-radio2"></label>
            <label for="banner-img-radio3"></label>
            <label for="banner-img-radio4"></label>
        </div>
    </div>
    <!--商品的展示，将你覆盖上去  -->
    <div class="banner-category-box">
        <ul class="category-list">
            <li>
                <a href="#">手机 电话卡</a>
                <div class="goods-tab">这里是手机 电话卡的商品内容
                </div>
            </li>
            <li>
                <a href="#">电视 盒子</a>
                <div class="goods-tab">这里是电视 盒子卡的商品内容

                    </li>
            <li>
                <a href="#">笔记本 显示器 平板</a>
                <div class="goods-tab">这里是笔记本 显示器 平板的商品内容

                    </li>
            <li>
                <a href="#">家电 插线板</a>
                <div class="goods-tab">这里是家电 插线板的商品内容

                    </li>
            <li>
                <a href="#">出行 穿戴</a>
                <div class="goods-tab">这里是出行 穿戴卡的商品内容

                    </li>
            <li>
                <a href="#">智能 路由器</a>
                <div class="goods-tab">这里是智能 路由器的商品内容

                    </li>
            <li>
                <a href="#">电源 配件</a>
                <div class="goods-tab">这里是电源 配件的商品内容

                    </li>
            <li>
                <a href="#">健康 儿童</a>
                <div class="goods-tab">这里是健康 儿童的商品内容

                    </li>
            <li>
                <a href="#">耳机 音箱</a>
                <div class="goods-tab">这里是耳机 音箱的商品内容

                    </li>
            <li>
                <a href="#">生活 箱包</a>
                <div class="goods-tab">这里是生活 箱包的商品内容

                    </li>
        </ul>
    </div>
</div>

下面是样式代码

@charset "utf-8"; * {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.banner-goods-box{
    width: 1226px;
    height: 460px;
    position:relative;
    /* 盒子阴影    */
    box-shadow:0px 0px 15px gray;
	
	margin: auto;
}

.banner-image-list {
    width: 1226px;
    height: 460px;
    /*相对定位*/
    position: relative;
}

.banner-image-list>img {
    /*绝对定位*/
    position: absolute;
    left: 0px;
    top: 0px;
    opacity:0;
    filter:alpha(opacity=0);
    transition-property:all;
    transition-duration:0.5s;
    transition-timing-function:linear;
    transition-delay:0s;
}

.label-box {
    /*绝对定位，脱流，子绝父相，宽度丢失*/
    position: absolute;
    right: 20px;
    bottom: 20px;
	z-index: 9998;
}

.label-box>label {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: gray;
    border-radius: 50%;
    margin-left: 20px;
    cursor:pointer;
}
.label-box>label:hover{
    background-color:#FFFFFF;
}

/*让一个元素以另一个元素为标准来进行定位，最好的解决办法就是子绝父相*/

.banner-image-list>input[name="banner-img-radio"]{
    display:none;
}
/* 谁选中了，就让谁后边的图片显示出来 */
.banner-image-list>input[name="banner-img-radio"]:checked+img{
   opacity:1;
   filter:alpha(opacity=100);
}
/* display与visibility都不能执行过渡，但是我们可以使用opacity透明来
   来设置元素隐藏与显示的时候的过渡效果
 */


/* -------------------另一部分布局-------------------------------- */
.banner-category-box{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
}


.category-list{
    width:230px;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    box-sizing:border-box;
    padding:10px 0;
}
.category-list>li>a{
    color:#FFFFFF;
    text-decoration:none;
    display:block;
    height:calc(440px / 10);
    line-height:calc(440px / 10);
    box-sizing:border-box;
    padding:0px 20px;
}
.category-list>li>a:hover{
    background-color:#ff6700;
}
/* 添加右箭头 */
.categoryList>li>a::after{
    content:">";
    float:right;
    font-weight:bold;
}

/* 商品的面板  */
.goods-tab{
    /* 绝对定位，以外层的定位为标准     */
    position:absolute;
    height:100%;
    background-color:#FFFFFF;
    top:0px;
    left:230px;
    right:0px;
    display:none;
	z-index: 9999;
}
.category-list>li:hover>.goods-tab{
    display:block;
}

如果觉得文章对你有用，请随意赞赏

过渡

http://www.softeem.xin:8090/archives/%E8%BF%87%E6%B8%A1

作者

标哥哥

发布于

2020-07-24

更新于

2024-07-16

许可协议

CC BY 4.0

过渡

过渡

过渡的属性

过渡的效果

多个属性的过渡

不能执行过渡的属性

案例

作者

发布于

更新于

许可协议

评论