CSS3基础

Posted 2024-09-10 Updated 2024-09- 19

By ymhongcun

16~20 min read

CSS3基础（Html5、Vue3、React）

一、菜单图标（Icon）

提示：

图标库地址https://fontawesome.com/。

1.纵向展示

* Html5代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标</title>
    <!-- 添加图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="icon-bar">
        <a class="active" href="#"><i class="fa fa-home"></i></a> 
        <a href="#"><i class="fa fa-search"></i></a> 
        <a href="#"><i class="fa fa-envelope"></i></a> 
        <a href="#"><i class="fa fa-image"></i></a>
        <a href="#"><i class="fa fa-user"></i></a> 
      </div>
   
</body>
<style>
    body {margin:0}

.icon-bar {
  overflow: hidden;
  border-radius: 6px;
  width: 68px;
  background-color: #80e54a;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: rgb(255, 255, 255);
  font-size: 24px;
  transition:  transform 0.5s cubic-bezier(0.25, 0.¼, 0.75, 0.9);
}

.icon-bar a:hover {
  background-color: #1786ee;
  transform: translateY(-10px)
}

.active {
  background-color: #0dcfff;
}
</style>
</html>

* Vue3代码

<template>
    <div class="icon-bar">
        <a class="active" href="#"><i class="fa fa-home"></i></a> 
        <a href="#"><i class="fa fa-search"></i></a> 
        <a href="#"><i class="fa fa-envelope"></i></a> 
        <a href="#"><i class="fa fa-image"></i></a>
        <a href="#"><i class="fa fa-user"></i></a> 
      </div>
</template>
<style scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.icon-bar {
  overflow: hidden;
  border-radius: 6px;
  width: 68px;
  background-color: #80e54a;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: rgb(255, 255, 255);
  font-size: 24px;
  transition:  transform 0.5s cubic-bezier(0.25, 0.¼, 0.75, 0.9);
}

.icon-bar a:hover {
  background-color: #1786ee;
  transform: translateY(-10px)
}

.active {
  background-color: #0dcfff;
}
</style>

* React代码

// 当前文件Home.tsx

import "./style.css"
export default function Home() {
  return (
   <>
    <div className="icon-bar">
        <a className="active" href="#"><i className="fa fa-home"></i></a> 
        <a href="#"><i className="fa fa-search"></i></a> 
        <a href="#"><i className="fa fa-envelope"></i></a> 
        <a href="#"><i className="fa fa-image"></i></a>
        <a href="#"><i className="fa fa-user"></i></a> 
      </div>
   </>
  );
}

// style.css文件

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.icon-bar {
  overflow: hidden;
  border-radius: 6px;
  width: 68px;
  background-color: #80e54a;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: rgb(255, 255, 255);
  font-size: 24px;
  transition:  transform 0.5s cubic-bezier(0.25, 0.¼, 0.75, 0.9);
}

.icon-bar a:hover {
  background-color: #1786ee;
  transform: translateY(-10px)
}

.active {
  background-color: #0dcfff;
}

2.横向展示

* Html5代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标</title>
    <!-- 添加图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="icon-bar">
        <a class="active" href="#"><i class="fa fa-home"></i></a> 
        <a href="#"><i class="fa fa-search"></i></a> 
        <a href="#"><i class="fa fa-envelope"></i></a> 
        <a href="#"><i class="fa fa-image"></i></a>
        <a href="#"><i class="fa fa-user"></i></a> 
      </div>
   
</body>
<style>
    body {margin:0}

.icon-bar {
    display: flex;
    margin: 0 auto;
    border-radius: 6px;
    width: fit-content;
    overflow: hidden;
    background-color: #80e54a;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: rgb(255, 255, 255);
  font-size: 24px;
  transition:  transform 0.5s cubic-bezier(0.25, 0.¼, 0.75, 0.9);
}

.icon-bar a:hover {
  background-color: #1786ee;
  transform: translateY(-10px)
}

.active {
  background-color: #0dcfff;
}
</style>
</html>

CSS3

css3

License: CC BY 4.0