html5css3项目2:scale缩放实现图片放大、分页效果圆圈放大图

1、图片放大

思路: scale比width放大的好处就是:放大时不对其他元素造成影响。
这里采用经过div盒子时进行放大,不过照片会溢出,所以要隐藏多出的部分。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
            width: 225px;
            height: 137px;
            border: 1px solid red;
        }
        
        img {
            transition: all 1s;
        }
        
        img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div class="box"><img src="media/scale.jpg" alt=""></div>
</body>

</html>

html5css3项目2:scale缩放实现图片放大、分页效果圆圈放大图_第1张图片
2、分页效果圆圈放大图

思路:
这里一定要用scale,因为这个缩放不会对其他元素造成影响,这个分页的数字是紧挨在一起的,如果采用width等放大缩小,那么就会对其余的数字产生影响。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
            float: left;
            margin: 10px 10px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid red;
            border-radius: 50%;
            transition: all .5s;
            cursor: pointer;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>

</html>

html5css3项目2:scale缩放实现图片放大、分页效果圆圈放大图_第2张图片

你可能感兴趣的:(html5css3)