• [CSS案例二]—实现一个响应式网页，兼容PC移动端，ScrollReveal 增加动画

    大家好，我是小张

    本期案例，用前端三件套实现一个简约的响应式布局网页，当屏幕分辨率自适应改变时网页布局会自动发生切换，网页布局同时兼容PC端和移动端，

    在普通PC屏幕下网页布局效果

    image-20230526222317223

    移动端网页布局：

    Snipaste_2023-05-26_22-33-07

    除了基础布局外，借助 scrollreveal 插件，在网页中加入了一些动画，

    例如网页首次打开时，

    • 左侧图标 由左向右 延迟 500ms 出现，透明度从 100 到 0;

    • 中间 标题和图片 由下向上延迟 400ms 出现，透明度从 100 到 0;

    代码实现

    本案例案例 中 html 代码部分

    • 案例中用到了连个 icon 库，以及谷歌字体，都采用在head 标签中 通过 CDN 方式加入到项目中；
    • 此外，由于案例中用到 scrollreveal 插件来实现动画，该插件也是通过 CDN 方式载入；
    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>Website2 Responsitivetitle>

    
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="stylesheet" href="style.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;1,800&display=swap"
        rel="stylesheet">
head>

<body>
    <div class="head">
        <div class="logo">
            LOGO
        div>
        <div class="menu-bar">
            <li>
                <a href="#">Menu1a>
            li>
            <li>
                <a href="#">Menu2a>
            li>
            <li>
                <a href="#">Menu3a>
            li>
            <li>
                <a href="#">Menu4a>
            li>
        div>
        <div id="mobile-bar" class="bx bx-menu">
        div>
    div>
    <div class="content">
        <div class="center">
            <div class="left">

                <span class="tag"> Some Tag span>
                <span class="title-top">Title Afterspan>
                <span class="title">The Websitespan>
                <p class="desc"> e careful using this method in production. Without specifying a fixed version number,
                    Unpkg may delay your page load while it resolves the latest version. p>

                <div class="btn">
                    <a class="left-btn">Button1a>
                    <a class="right-btn"><i class='bx bx-play-circle'>i> Playinga>
                div>
            div>
            <div class="right">
                <img src="./static/logo-vuejs-min.png" />

            div>
        div>

        <div class="left-icons">
            <a><i class='bx bxl-twitter'>i>a>
            <a><i class="ri-github-line">i>a>
            <a><i class="ri-vuejs-line">i>a>
        div>
        <div class="top-down">
            <a><i class="ri-arrow-down-circle-line">i>a>
        div>

    div>

    <script src="https://unpkg.com/scrollreveal">script>
    <script src="script.js">script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82

    案例 JS 部分，主要控制移动端菜单栏的出现与消失；以及一些浮动动画

    // 中部
const scrollRevealOpt1 = {
    delay: 400,
    distance: '100px',
    duration: 600,
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    interval: 0,
    opacity: 0,
    origin: 'bottom'
}


const scrollRevealOpt2 = {
    delay: 400,
    distance: '100px',
    duration: 500,
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    interval: 0,
    opacity: 0,
    origin: 'bottom'
}

// 左侧图标区域 动画效果配置
const leftIconsOpt = {
    delay: 400,
    distance: '45px',
    duration: 600,
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    origin: 'left'
}

const leftcontent = document.querySelector('.content .left')
const rightcontent = document.querySelector('.content .right')
const mobileBar = document.getElementById('mobile-bar')
const leftIcons = document.querySelector('.left-icons')


ScrollReveal(scrollRevealOpt1).reveal(leftcontent);
ScrollReveal(scrollRevealOpt2).reveal(rightcontent);
ScrollReveal(leftIconsOpt).reveal(leftIcons)
const menuList = document.querySelector('.menu-bar')
mobileBar.onclick = () => {
    menuList.classList.toggle('open')
    mobileBar.classList.toggle('bx-x')
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    CSS 部分代码

    body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    box-sizing: border-box;
    font-weight: 400;
    font-style: normal;


    font-family: 'Open Sans', sans-serif;
    position: relative;
}


.head {
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 5rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 200;


}

.logo {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;

}


.menu-bar {
    display: flex;
    gap: 3rem
}

.menu-bar li {
    list-style: none;
}

.menu-bar li a {
    color: white;
    text-decoration: none;
    padding-bottom: 4px;
    font-size: 18px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}


.menu-bar li a:hover {

    border-bottom: 2px solid white;
}

#mobile-bar {
    position: fixed;
    right: 5%;
    top: 5%;
    transform: translateY(-50%);
    color: white;
    font-size: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: none;

}


.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    background: linear-gradient(245.59deg, #4d9559 0%, #38703d 28.53%, #133917 75.52%);

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88

    案例中涉及到的完整代码，可访问 Web2_Responsive 获取

  • 相关阅读:
    MySQL开机无法启动，需手动启动才可以。
    5-if语句（选择结构）
    BeanUtils--浅拷贝--实例/原理
    大数据在电力行业的应用案例100讲（二十八）-电力营销系统规则配置的实现与应用
    关于【Java】中（类）需要知道的
    CefSharp进阶
    通俗理解图神经网络GNN
    长达 1.7 万字的 explain 关键字指南！
    分享一下微信优惠券怎么制作
    spring-01-依赖注入
  • 原文地址：https://blog.csdn.net/weixin_42512684/article/details/130909044