JavaScript 特效: 手风琴效果(多个CSS属性同时变化的动画)

最新推荐文章于 2023-08-29 22:08:46 发布

houyanhua1

最新推荐文章于 2023-08-29 22:08:46 发布

阅读量443

点赞数

分类专栏： JavaScript 文章标签： javascript 动画

本文链接：https://blog.csdn.net/houyanhua1/article/details/79599407

版权

本文通过JavaScript详细介绍了如何创建一个手风琴效果的动画，该动画涉及多个CSS属性的同时平滑变化，为网页增加动态交互体验。

摘要由CSDN通过智能技术生成

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{list-style: none}
        *{margin:0; padding:0;}
        div{
            width: 1150px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;

        }
        div li {
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul {
            width: 1300px;
        }
    </style>
    <script>
        window.onload = function () {
            //需求：鼠标放入到li中该盒子变宽，其他的盒子变窄。移开大盒子，恢复原样。
            //步骤：
            //1.给li添加背景
            //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
            //3.移开大盒子，恢复原样

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 特效: 手风琴效果(多个CSS属性同时变化的动画)

demo.html：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; ul{list-style: none}
复制链接

扫一扫

专栏目录