官网装修 - 首页

[toc]

寻找有些的设计

注意

  • 简洁即可，不用高清大图
  • 一定不要自己设计

一些辅助工具

文字颜色渐变背景

1
2
3

background: linear-gradient(to left, rgb(112, 101, 214), rgb(230, 106, 213));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

背景剪裁属性 clip-path

按不太的形状剪裁图片

页面跳转过渡动画 Smooth Page Transitions With Javascript Tutorial

首页渐变背景

给文字和链接添加样式

使用 iconfont.cn 添加 logo 和 icon

  • 去 iconfont.cn 搜索关键词
  • 将选择的图标加入购物车
  • 添加至项目，可新建项目
  • 点击选择 Symbol，修改 icon 的名称
  • 点击生成代码
  • 使用 script 标签将生成的代码引入项目
  • script 标签可以放在 head 标签中
  • 点击 使用帮助，搜索 symbol 引用，按提示操作
    • 复制刚才生成的代码
    • 使用通用的 CSS，之后在组件中调整覆盖宽高的样式
  • xlink:href="#icon-名称"，即可指定使用对应的icon
  • 新增了icon，需要重新点击生成代码，并更新 script 标签
  • 可以将 链接复制到本地的 js 文件中

画圆弧分割网页

使用边框圆角画椭圆

1
2
3
4
5
6
7
8
9

.topNavAndBanner {
  background: linear-gradient(145deg, rgba(227, 255, 253, 1) 0%,
    rgba(183, 233, 230, 50) 100%);
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: 50% calc(100% - 240px);
  border-bottom-right-radius: 50% calc(100% - 240px);
}
...

使用 clip-path 路径剪裁属性 分割网页

1
2
3
4
5
6
7
8

.topNavAndBanner {
  background: linear-gradient(145deg, rgba(227, 255, 253, 1) 0%,
    rgba(183, 233, 230, 50) 100%);
  display: flex;
  flex-direction: column;
  clip-path: ellipse(80% 60% at 50% 40%);
}
...
  • 查看clip-path MDN文档
  • 在浏览器控制台中可以快速调节查看

使用在线工具网站生成

完善首页的各种细节

总结

  • 添加 icon
    • 使用 iconfont.cn的symbol模式
  • 添加圆弧
    • 使用 border-radius-bottom-*: 100px 40px;
    • 使用 clip-path: ellipse(80% 60% at 50% 40%);
  • Grid布局
  • 响应式页面
    • 手机样式@media(min-width: 800px) + (min-wdith: 1200px)

添加其他功能

添加汉堡包按钮样式

一种汉堡包按钮的实现方式

TopNav.vue

  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
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

<script setup lang="ts">
import {inject, Ref} from 'vue';

const asideVisible = inject<Ref<boolean>>('asideVisible');
const toggleMenu = () => {
  asideVisible!.value = !asideVisible?.value;
};
</script>

<template>
  <div class="top-nav">
    <header class="logo">LOGO</header>
    <ul class="menu">
      <li>菜单1</li>
      <li>菜单2</li>
    </ul>
    <div class="toggleAside"
         :class="{active: asideVisible}"
         @click="toggleMenu">
      <span></span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'TopNav'
};
</script>

<style lang="scss" scoped>
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  background: dodgerblue;
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;

  > .logo {
    max-width: 6em;
    margin-right: auto;
  }

  > .menu {
    display: flex;
    white-space: nowrap;
    flex-wrap: nowrap;

    > li {
      margin: 0 1em;
    }
  }

  > .toggleAside {
    display: none;
    width: 28px;
    height: 26px;
    background: transparent;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate3D(0, -50%, 0);
    transition: .25s;

    &::before {
      content: '';
      position: absolute;
      width: 18px;
      height: 1px;
      background-color: white;
      box-shadow: 0 6px 0 white;
      transition: .25s;
      transform: translate3D(0, -6px, 0);
    }

    &::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 1px;
      background-color: white;
      transition: .25s;
      transform: translate3D(0, 6px, 0);
    }

    &.active {
      background: #f7226a;

      &::before {
        transform: translateZ(0) rotate(45deg);
        box-shadow: 0 0 0 #fff;
      }

      &::after {
        transform: translateZ(0) rotate(-45deg);
      }
    }
  }

  @media (max-width: 500px) {
    > .menu {
      display: none;
    }

    > .logo {
      margin: 0 auto;
    }

    > .toggleAside {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      transition: .25s;
    }
  }
}
</style>
  • 使用::before画第一道线
  • 在第一道线中，使用box-shadow画第二道线
  • 使用::after画第三道线
  • 点击激活，添加.active样式
    • 第一道线改变角度transform: translateZ(0) rotate(45deg);
    • 第二道线归零box-shadow: 0 0 0 #fff;
    • 第三道线改变角度transform: translateZ(0) rotate(-45deg);
  • 使用transition: .25s;过渡效果

另一种汉堡包按钮的实现方式

  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
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

<script setup lang="ts">
import {inject, Ref} from 'vue';

const asideVisible = inject<Ref<boolean>>('asideVisible');
const toggleMenu = () => {
  asideVisible!.value = !asideVisible?.value;
};
</script>

<template>
  <nav class="top-nav">
    <header class="logo">LOGO</header>
    <ul class="menu">
      <li>菜单1</li>
      <li>菜单2</li>
    </ul>
    <div class="toggleAside"
         :class="{active: asideVisible}"
         @click="toggleMenu">
      <div class="middle-line"></div>
    </div>
  </nav>
</template>

<script lang="ts">
export default {
  name: 'TopNav'
};
</script>

<style lang="scss" scoped>
%hamburgerSame {
  position: absolute;
  width: 50%;
  height: 1px;
  background-color: white;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  background: dodgerblue;
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;

  > .logo {
    max-width: 6em;
    margin-right: auto;
  }

  > .menu {
    display: flex;
    white-space: nowrap;
    flex-wrap: nowrap;

    > li {
      margin: 0 1em;
    }
  }

  > .toggleAside {
    display: none;
    width: 28px;
    height: 26px;
    background: transparent;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate3D(0, -50%, 0);

    &::before {
      content: '';
      @extend %hamburgerSame;
      transition: .45s;
      top: 30%;
    }

    &::after {
      content: '';
      @extend %hamburgerSame;
      transition: .45s;
      bottom: 23%;
    }

    & .middle-line {
      @extend %hamburgerSame;
      transition: .25s;
      transform: translate3D(50%, 50%, 0);
      top: 50%;
      left: 0;
    }

    &.active {
      &::before {
        top: 45%;
        width: 60%;
        transform: rotate(-45deg);
      }

      & .middle-line {
        background: #f7226a;
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
        z-index: -1;
      }

      &::after {
        bottom: 50%;
        width: 60%;
        transform: rotate(45deg);
      }
    }
  }

  @media (max-width: 500px) {
    > .menu {
      display: none;
    }

    > .logo {
      margin: 0 auto;
    }

    > .toggleAside {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      transition: .3s;
    }
  }
}
</style>
  • 线高height: 1px;
    • 使用::before画第一道线
    • 使用<span>标签画第二道线
    • 使用::after画第三道线
  • 点击激活，添加.active样式
    • 第一道线改变角度transform: translateZ(0) rotate(45deg);
    • 第二道线撑开撑满父级元素，同时z-index: -1;，变色background: #f7226a;
    • 第三道线改变角度transform: translateZ(0) rotate(-45deg);
  • 使用transition过渡效果