利用transrate()完成手机客户端页面切换效果：

最新推荐文章于 2023-07-14 17:18:31 发布

品风 ₯ 未醉

最新推荐文章于 2023-07-14 17:18:31 发布

阅读量177

点赞数

分类专栏： js+html+css的小练习文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_48342617/article/details/121034821

版权

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

视频效果：

手机端页面切换

思路讲解： 首先我们可以每个a元素创建一个对应的div，并且使用transrate()属性使其漂浮到页面之外，当div的targrt被触发后，再将对应的div漂浮回来

代码及细节：

<!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>手机端页面切换</title>
    <style>
        /* 首先清除页面的默认样式 */
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 设置body的大小 */
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
       
        main{
            flex: 1;
            position: relative;
        }
        /* 为初始界面添加一个莞工杰仔的样式 */
        main::after{
            content: "莞工杰仔";
            position: absolute;
            /* 让文本居中 */
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
            font-size: 2em;
            /* 设置透明度 */
            opacity: 0.3;
            z-index: -1;
        }
        /* 设置好下面底框的样式 */
        nav{
         height:8vh;
         background-color: #2c3e50;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
        }
         /* 设置好nav 中的a的样式 */
         nav a{
             /* 将剩余的空间吸收掉 */
             flex-grow: 1;
             color: #ecf0f1;
             height: 100%;
             text-decoration: none; 
             text-align: center;
             line-height:53.375px;
             font-size: 20px;
         }
       /* 设置三个div的大小 */
       main div{
           position: absolute;
           width: 100%;
           height: 100%;
           /* 添加过渡时间 */
            transition: 1s;
             /* 先将三个div都划出main */
            transform: translateY(-100%);
       }
       /* 分别设置三个div的样式 */
       main div:nth-child(1):target{
         background-image: url(./图片/1.jpeg);
         background-repeat: no-repeat;
         background-size: cover;
         transform: translateY(0px);
       }
       main div:nth-child(2):target{
        background-image: url(./图片/2.jpeg);
         background-repeat: no-repeat;
         background-size: cover;
         transform: translateY(0px);
       }
       main div:nth-child(3):target{
        background-image: url(./图片/3.jpeg);
         background-repeat: no-repeat;
         background-size: cover;
         transform: translateY(0px);
        }
    </style>
</head>
<body>
     <main>
         <!-- 创建三个div分别对应三个按钮跳转的页面 -->
         <div id="ym1"></div>
         <div id="ym2"></div>
         <div id="ym3"></div>
     </main>
     <nav>
        <a href="#ym1">页面1</a>
        <a href="#ym2">页面2</a>
        <a href="#ym3">页面3</a>
     </nav>
</body>
</html>

总结要掌握的知识点：
1.：target 选择器的使用
2.transform:translate()
3.过渡时间

品风 ₯ 未醉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用transrate()完成手机客户端页面切换效果：

视频效果：思路讲解：首先我们可以每个a元素创建一个对应的div，并且使用transrate()属性使其漂浮到页面之外，当div的targrt被触发后，再将对应的div漂浮回来代码及细节：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫

专栏目录