01-css3动画之过渡详解以及实战纯css打造手风琴图片特效

最新推荐文章于 2023-01-03 12:01:13 发布

不及你笑靥如花

最新推荐文章于 2023-01-03 12:01:13 发布

阅读量446

点赞数 1

文章标签： html css3

本文链接：https://blog.csdn.net/qq_43775721/article/details/112578952

版权

过渡详解

一、过渡的定义以及基本属性
二、过渡名称、过渡时间、过渡延迟
三、过渡效果的时间曲线
四、实战纯css打造手风琴图片特效

一、过渡的定义以及基本属性

定义：CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

过渡属性
属性	描述
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。
transition	复合写法：transition：property duration [delay] [timing-function ],property duration [delay] [timing-function ],….

二、过渡名称、过渡时间、过渡延迟

transition-property 属性的名称: （当指定CSS 属性改变时，过渡效果将开始）
1、all 所有属性都将获得过渡效果( 默认)
2、attr 过渡效果的 CSS 属性名称列表，列表以逗号分隔。
3、none 没有属性会获得过渡效果。
transition-duration 过渡时间：完成过渡效果需要的时间（以秒或毫秒计）
transition-delay 延迟时间：等~（以秒或毫秒计）之后再变化

注意：要实现css过渡，必须包含transition-property和transition-duration

案例1：如下一段动图中，我指定了过渡属性名称为宽度，时间为2s，延时1s。所以当鼠标划过div时，div的宽度逐渐改变，而高度不包含在过渡之内。

在这里插入图片描述

三、过渡效果的时间曲线

过渡效果的时间曲线
属性	描述
linear	匀速
ease	（默认值）慢快慢
ease-in	慢入
ease-out	慢出
ease-in-out	慢入慢出
cubic-bezier	[贝塞尔曲线以及其生成地址](https://cubic-bezier.com/)

在这里插入图片描述

四、实战纯css打造手风琴图片特效

在这里插入图片描述

手风琴图片特效原理解释：这个特效主要运用了css3的伪类以及css3的过渡效果。

首先写出body的框架，将图片放入li里面以便后续伪类操作。
调整wrap、ul、li的宽度高度以及位置。需要注意：wrap宽度满足要求：展示的li总宽度度以及鼠标划上后图片的宽度+剩下四个li的宽、ul宽度度大于5张图片的总宽度、li的宽度必须小于图片的宽度且li还需设置浮动并列在一排。
使用伪类，当鼠标划到ul时候，li的宽度变小。鼠标划到li的时候，被划到的li宽度变为图片的宽度。且需要注意是否满足第2点钟的
wrap宽度满足鼠标划上后图片的宽度+剩下四个li的宽度
使用css3过渡进行美化并且将wrap的超出隐藏，即可完成。

代码下载地址 如果觉得我写的对你有帮助的话，请一键三连。这将会是我日后更新的动力。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴图片特效</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    }
    
    #wrap {
        position: relative;
        margin: 100px auto;
        /*
        宽度满足要求：1、展示的li总长度
                     2、鼠标划上后图片的长度+剩下四个li的长度
        */
        width: 1005px;
        height: 450px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }
    
    #wrap ul {
        position: relative;
        /*长度大于5张图片的总长度*/
        width: 4000px;
        list-style-type: none;
    }
    
    #wrap ul li {
        position: relative;
        float: left;
        width: 200px;
        height: 450px;
        border-left: 1px solid white;
        box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
        transition: all 0.5s cubic-bezier(.93, .13, 1, .17);
    }
    
    #wrap ul li a img {
        display: block;
    }
    
    #wrap ul li .title {
        position: absolute;
        top: 400px;
        left: 0px;
        width: 800px;
        height: 50px;
        background: rgba(0, 0, 0, 0.5);
        line-height: 50px;
    }
    
    #wrap ul li .title a {
        padding-left: 10px;
        color: white;
        font-size: 20px;
        font-weight: 500;
        text-decoration: none;
    }
    
    #wrap ul:hover li {
        width: 50px;
    }
    
    #wrap ul li:hover {
        width: 800px;
    }
</style>

<body>
    <div id="wrap">
        <ul>
            <li>
                <div class="title">
                    <a href="#" target="_self">手风琴特效展示</a>
                </div>
                <a href="">
                    <img src="./img/1.jpg" alt="卡通图片" width=800 heiht=450>
                </a>
            </li>
            <li>
                <div class="title">
                    <a href="#" target="_self">手风琴特效展示</a>
                </div>
                <a href="">
                    <img src="./img/2.jpg" alt="卡通图片" width=800 heiht=450>
                </a>
            </li>
            <li>
                <div class="title">
                    <a href="#" target="_self">手风琴特效展示</a>
                </div>
                <a href="">
                    <img src="./img/3.png" alt="卡通图片" width=800 heiht=450>
                </a>
            </li>
            <li>
                <div class="title">
                    <a href="#" target="_self">手风琴特效展示</a>
                </div>
                <a href="">
                    <img src="./img/4.png" alt="卡通图片" width=800 heiht=450>
                </a>
            </li>
            <li>
                <div class="title">
                    <a href="#" target="_self">手风琴特效展示</a>
                </div>
                <a href="">
                    <img src="./img/5.png" alt="卡通图片" width=800 heiht=450>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>