字体图标

购物车案例

 <style>
        /* css样式初始化 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 购物车模块 */
        
        .cart {
            display: block;
            width: 100px;
            height: 50px;
            /* background-color: #6cf; */
            text-decoration: none;
            line-height: 50px;
            color: #000;
        }
        /* 设置购物车颜色 */
        .cart .icon-gouwuchekong {
            color: orangered;
        }
    </style>

 <a href="#" class="cart">
        <i class="iconfont icon-gouwuchekong"></i> 购物车
        <i class="iconfont icon-downarrow"></i>
    </a>

平面转换

双开门案例(平移)

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 50px auto;
            border: 10px solid #000;
            background: url(./images/bg.jpg);
            /* 溢出的部分隐藏 oh */
            overflow: hidden;
        }
        /* 利用伪元素设置底层大盒子上左右覆盖的两张照片 */
        /* 伪元素公共样式 */
        
        .box::before,
        .box::after {
            content: "";
            width: 50%;
            height: 100%;
            float: left;
            background-image: url(./images/fm.jpg);
            /* 过渡 */
            transition: 1s;
        }
        
        .box::after {
            background-position: right;
        }
        /* 鼠标悬停样式 */
        
        .box:hover::before {
            /* 向左平移底层大盒子宽度一半 */
            transform: translate(-100%);
        }
        /* 向右平移底层大盒子宽度一半 */
        
        .box:hover::after {
            transform: translate(100%);
        }
    </style>

 <div class="box"></div>
    <!-- 平移
    transform: translate(X,Y) -->
    

和平精英案例(缩放)

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 250px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px;
            line-height: 1.5;
            overflow: hidden;
        }
        
        .pic img {
            width: 100%;
        }
        
        .box .pic {
            position: relative;
        }
        /*  利用伪元素创建结构 */
        
        .pic::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            /*  初始放大5倍 透明度置为0 */
            transform: translate(-50%, -50%) scale(5);
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            opacity: 0;
            transition: 0.6s;
        }
        /* 鼠标悬停box 让播放按钮结构缩放倍数变为1倍，透明度置为1 */
        
        .pic:hover::after {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    </style>

   <div class="box">
        <div class="pic">
            <img src="./images/party.png" alt="">
        </div>
        <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
    </div>

华为综合案例(缩放)

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 最外层可以被点击的大盒子 */
    
    a {
        display: block;
        width: 350px;
        height: 247px;
        background-color: red;
        margin: 50px auto;
        position: relative;
        /* 溢出隐藏 */
        overflow: hidden;
    }
    /* 装文字的盒子 */
    
    .title {
        position: absolute;
        left: 0;
        bottom: -50px;
        padding-left: 20px;
        padding-right: 50px;
        background-color: transparent;
        color: #fff;
        /* 过渡 */
        transition: 0.6s;
        /* 权重 */
        z-index: 1;
    }
    
    .title p {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /* 遮罩层 */
    
    a::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        /* 不透明度 */
        opacity: 0;
        transition: 0.6s;
    }
    /* 鼠标悬停样式 */
    
    a img {
        transition: 0.6s;
    }
    
    a:hover img {
        /* 放大1.2倍 */
        transform: scale(1.2);
    }
    
    a:hover .title {
        bottom: 0;
    }
    
    a:hover::after {
        opacity: 1;
    }
</style>

   <a href="#">
        <img src="./images/pic2.png" alt="">
        <div class="title">
            <h5>产品</h5>
            <h4>OceanStor Pacific海量存储斩获2021 Interop金奖</h4>
            <p>了解更多</p>
        </div>
    </a>

王者荣耀缩放案例

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 设置盒子大小 */
        
        .box a {
            display: block;
            width: 291px;
            height: 134px;
            margin: 50px auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        /* 设置图片缩放过渡 */
        
        .box img {
            transition: 1s;
        }
        /* 放大1.1倍 */
        
        .box a:hover img {
            transform: scale(1.1);
        }
    </style>

<div class="box">
        <a href="#">
            <img src="./images/wzj.jpg" alt="">
        </a>
    </div>

分页放大效果案例

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        li {
            list-style: none;
        }
        /* 外层盒子 */
        .box ul {
            width: 580px;
            height: 100px;
            margin: 100px auto;
        }
        /* 单个li标签样式 */
        .box li {
            float: left;
            text-align: center;
            width: 53px;
            height: 53px;
            line-height: 53px;
            border-radius: 50%;
            margin: 10px;
            border: 1px solid green;
            transition: 1.5s;
        }
        /* li标签被点击时同时放大1.3倍和顺时针旋转360度 */
        .box li:hover {
            transform: scale(1.3) rotate(360deg);
        }
    </style>

<div class="box">
        <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>
    </div>