less伪选择器及伪类选择器操作

最新推荐文章于 2024-09-11 20:57:32 发布

xinga1016

最新推荐文章于 2024-09-11 20:57:32 发布

阅读量2.2k

点赞数

分类专栏： less 文章标签：前端开发 CSS JavaScript Echarts 图片懒加载

本文链接：https://blog.csdn.net/weixin_45226867/article/details/113842934

版权

less 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

return (
            <div className={styles.home_box}>
                <div className={styles.home_Item}>
                    <div className={styles.home_task} onClick={this.JumpTo.bind(this, "/fireworks")}>
                        烟花效果
                    </div>
                </div>
                <div className={styles.home_Item}>
                    <div className={styles.home_task} onClick={this.JumpTo.bind(this, "/scrollBar")}>
                        滚动条样式
                    </div>
                </div>
                <div className={styles.home_Item}>
                    <div className={styles.home_task} onClick={this.JumpTo.bind(this, "/echarts")}>
                        Echarts使用
                    </div>
                </div>
                <div className={styles.home_Item}>
                    <div className={styles.home_task} onClick={this.JumpTo.bind(this, "/lazyLoad")}>
                        图片懒加载
                    </div>
                </div>
            </div>
        );
    }

.less文件

.home_Item {
    position: relative;
    margin: 12px 24px;
    padding: 4px;
    width: 180px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
}

.home_task {
    width: 100%;
    height: 100%;
    line-height: 52px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    background-color: rgb(252, 157, 154);

    cursor: pointer;
    position: relative;
    z-index: 10;
}

.home_Item::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgb(247, 250, 86);
    transform: rotate(-90deg);
    transform-origin: 0% 100%;
    transition: all 0.4s;
}

.home_Item::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgb(247, 250, 86);
    transform: rotate(-90deg);
    transform-origin: 100% 0%;
    transition: all 0.4s;
}

.home_Item:hover:before {
    transform: rotate(0deg);
}

.home_Item:hover:after {
    transform: rotate(0deg);
}