css transform 元素放大且有过渡效果

最新推荐文章于 2024-09-02 19:53:00 发布

weixin_30791095

最新推荐文章于 2024-09-02 19:53:00 发布

阅读量342

点赞数

原文链接：http://www.cnblogs.com/zxn-9588/p/7423521.html

版权

鼠标经过时，元素整体放大，代码如下：

.tc>div>ul>li {
    display: inline-block;
    vertical-align: top;
    width: 295px;
    height: auto;
    margin: 0 20px 18px 0;
    background: white;
    box-sizing: border-box;
    transition: all .5s;
    -webkit-transition: all .5s; /* Safari */
}
.tc>div>ul>li:hover {
    cursor: pointer;
    transform: scale(1.1);
    -ms-transform:scale(1.1);     /* IE 9 */
    -moz-transform:scale(1.1);     /* Firefox */
    -webkit-transform:scale(1.1); /* Safari 和 Chrome */
    -o-transform:scale(1.1);
}

HTML 代码结构如下：

<div class="tc mld">
        <h5><span>辅导班</span><small></small></h5>
        <div>
            <ul>
                <li οnclick="window.open('video.html')">
                    <small></small>
                    <a href="#">数量上课</a><em>￥800.00</em><span>已售：<i>5</i>件</span></li>
                <li οnclick="window.open('video.html')">
                    <small></small>
                    <a href="#">辅导班</a><em>￥800.00</em><span>已售：<i>5</i>件</span></li>
                <li οnclick="window.open('video.html')">
                    <small></small>
                    <a href="#">辅导班</a><em>￥800.00</em><span>已售：<i>5</i>件</span></li>
                <li οnclick="window.open('video.html')">
                    <small></small>
                    <a href="#">辅导班</a><em>￥800.00</em><span>已售：<i>5</i>件</span></li>
            </ul>
        </div>
        <span><a href="#">更多课程>></a></span>
    </div>

转载于:https://www.cnblogs.com/zxn-9588/p/7423521.html