黑马前端p296练习利用过渡制作小米效果图

关注

原创最新推荐文章于 2026-11-09 20:43:22 发布 421 阅读 AI 写同款· GEO 优化 ›

PC端品优购项目网站制作流程、项目搭建、三大标签 SEO 优化、 LOGO SEO 优化、 Web 服务器、注册页面不需要SEO 、 -------------------- 网站制作流程 -------------------- 客户沟通、制定方案签订合同预付定金初稿审核前台页面设计，后台功能开发测试验收上线培训后期维护 -------------------- 品优购项目规划 -------------------- 品优购项目整体介绍品优购项目学习目的开发工具以及技术栈 1. 品优购项目整体介绍项目名称：品优购项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 2. 品阅读详情

黑马前端p296练习利用过渡制作小米效果图

效果图
代码
（还可以优化的地方希望指出）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            position: relative;
            width: 64px;
            height: 64px;
            background-color: aqua;
            top: 100px;
            left: 100px;
            overflow: hidden;
        }
        div img{
            position: absolute;
            left: 0px;
            transition: all 2s;
            display: block;
        }
        div:hover img{
            left: -64px;
        }
    </style>
</head>
<body>
    <div>
        <img src="../images/gd.png" alt="">
    </div>
</body>
</html>```