css3 里的动画——过渡动画

最新推荐文章于 2024-03-18 21:52:36 发布

原创最新推荐文章于 2024-03-18 21:52:36 发布 · 243 阅读

CC 4.0 BY-SA版权

本文介绍如何使用CSS的transition属性创建动态阴影和图片放大效果，详细解释了transition-delay、transition-duration、transition-timing-function和transition-property的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.属性：transition

需要规定内容：

（1）指定要添加效果的CSS属性

（2）指定效果的持续时间。

注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

属性解释：

transition-delay 动画的延迟
transition-delay:1s;
transition-duration 动画的执行时间
transition-duration: 1s;
transition-timing-function动画的执行方式  linear 匀速  ease-in  慢开   ease-in-out 慢开慢关
transition-timing-function: linear;
transition-property  过渡什么属性  margin-left  如果要过渡多个属性 分开  all 过渡所有属性
transition-property:margin-left;

下面我们来做两个实例：

菜单阴影动态效果

（1）做一个菜单

<body>
<ul>
    <li>首页</li>
    <li>公司文化</li>
    <li>公司招聘</li>
    <li>公司简介</li>
    <li>练习我们</li>
</ul>
</body>
<style>
        ul{
            margin: 0;
            padding: 0;
            height: 50px;
            background: black;
        }
        li{
            list-style: none;
            float: left;
            width: 100px;
            line-height: 50px;
            text-align: center;
            color: white;
        }
</style>

效果展示;

（2）加上文字阴影，做出动画效果

li{
            text-shadow: 30px -15px 1px black;
            transform: rotatex(0deg);
            transition: text-shadow .5s ease-in,transform 0.5s ease-in-out;
        }
        li:hover{
            text-shadow: 0px 0px 1px white;
        }
        /*鼠标悬停出现阴影*/

上述两步之后效果就可以出现啦！！

图片放大效果

（1）在盒子里放入图片

<div class="b">
    <img src="./img/car.jpg" alt=""/>
</div>
<style>
        .b{
            width: 300px;
            height: 200px;
            margin: auto;
            overflow: hidden;
        }
        .b>img{
            width: 300px;
            height: 200px;
        }
</style>

效果展示：

（2）加入过渡和鼠标悬停效果

<style>
        .b>img{
            transition: all .5s linear;
        }
        .b:hover img{
            transform: scale(1.5);
        }
</style>

效果展示：