运动框架之使用，缩放1

最新推荐文章于 2022-09-20 11:19:36 发布

爱生活，爱编程

最新推荐文章于 2022-09-20 11:19:36 发布

阅读量188

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/103754380

版权

javascript基础笔记专栏收录该内容

83 篇文章 1 订阅

订阅专栏

我用css3 写了个缩放！很简单，就是用 transition + transform 很简单就实现了这个功能，而我们要做的就是

用js 实现相同的功能！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        
        ul {
            width:700px;
            border:1px solid gray;
            margin: 20px auto;
        }

        .clearfix{

        }

        .clearfix::after{
            display: block;
            content: "";
            clear:both;
        }
        ul li {
            float: left;
            list-style: none;
            width:200px;
            height: 200px;
            background-color: pink;
            margin:10px;
            transition: all .5s;
            line-height: 200px;
            text-align: center;
            color:white;
        }

        ul li:hover {
            transform: scale(1.5);
            background-color: #ccc;
            color:red;
        }

    </style>
</head>
<body>
    
    <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li> <li>7</li> <li>7</li>
    </ul>

</body>
</html>

爱生活，爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动框架之使用，缩放1

我用css3 写了个缩放！很简单，就是用 transition + transform 很简单就实现了这个功能，而我们要做的就是用js 实现相同的功能！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&lt...
复制链接

扫一扫

专栏目录