html+css3 过渡效果设计（步骤）

最新推荐文章于 2021-10-11 10:15:40 发布

老张谋

最新推荐文章于 2021-10-11 10:15:40 发布

阅读量1.1k

点赞数 3

分类专栏：前端技术文章标签： html css web 过渡效果

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88049627

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

1.过渡三要素
1.1必须要有属性发生变化
 div:hover{
            width: 400px;
        }
1.2 必须告诉系统哪个属性需要执行过渡效果
 transition-property: width;
1.3 必须告诉系统过渡效果持续时长
            transition-duration: 10s;
注意点：
当多个属性需要同时执行过渡效果时用逗号隔开即可
    div:hover{
            width: 400px;
            background-color: blue;
        }
 transition-property: width，background-color;
 transition-duration: 10s,5s;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>163-过渡模块的使用</title>
    <style>
        /*CSS3新增的过渡效果模块*/
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 150px;
            background-color: red;

            /*单个属性过渡时*/
            /*告诉系统哪个属性需要执行过渡效果*/
            transition-property: width;
            /*告诉系统过渡效果持续时长*/
            transition-duration: 10s;

        }
        div:hover{
            width: 400px;
        }
    </style>
</head>
<body>
<!--
1.过渡三要素
1.1必须要有属性发生变化
 div:hover{
            width: 400px;
        }
1.2 必须告诉系统哪个属性需要执行过渡效果
 transition-property: width;
1.3 必须告诉系统过渡效果持续时长
            transition-duration: 10s;
注意点：
当多个属性需要同时执行过渡效果时用逗号隔开即可
    div:hover{
            width: 400px;
            background-color: blue;
        }
 transition-property: width，background-color;
 transition-duration: 10s,5s;
-->
<div></div>
</body>
</html>

过渡前：

过渡中：

设置不同的速度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>164-过渡模块-其他属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*鼠标悬停到粉色大盒子上时，里面的小盒子产生过渡效果*/
        ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
            border: 1px solid #000;
        }
        ul li{
            list-style: none;
            width: 100px;
            height: 50px;
            margin-top: 50px;
            background-color: blue;
            transition-property: margin-left;
            transition-duration: 10s;
        }
        ul:hover li{
            margin-left: 700px;
        }
        ul li:nth-child(1){
            /*告诉系统过渡动画运动速度*/
            /*匀速*/
            transition-timing-function: linear;
        }
        ul li:nth-child(2){
            /*逐渐慢下来*/
            transition-timing-function: ease;
        }
        ul li:nth-child(3){
            /*加速*/
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            /*减速*/
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            /*先加速后减速*/
            transition-timing-function:ease-in-out ;
        }
    </style>
</head>
<body>
<ul>
    <li>linear</li>
    <li>ease</li>
    <li>ease-in</li>
    <li>ease-out</li>
    <li>ease-in-out</li>
</ul>
</ul>
</body>
</html>

老张谋

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html+css3 过渡效果设计（步骤）

1.过渡三要素1.1必须要有属性发生变化 div:hover{ width: 400px; }1.2 必须告诉系统哪个属性需要执行过渡效果 transition-property: width;1.3 必须告诉系统过渡效果持续时长 transition-duration: 10s;注意点：当多个属性需要同时执行过...
复制链接

扫一扫

专栏目录