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>
