一些 Css 小 demo
动感菜单
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>wanglei.live</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #ccc;
}
.nav {
width: 250px;
height: 50px;
background-color: #fff;
position: fixed;
top: 20px;
left: 20px;
z-index: 100;
line-height: 50px;
}
.toggle {
width: 100%;
cursor: pointer;
color: #ff216d;
padding-left: 20px;
}
ul {
position: relative;
list-style: none;
display: flex;
flex-direction: column;
}
ul li {
height: 50px;
padding-left: 20px;
background-color: #fff;
color: #ccc;
cursor: pointer;
position: relative;
opacity: 0;
transform: translateX(-250px);
transition: all 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.nav:hover ul li {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="nav">
<div class="toggle">菜单</div>
<ul>
<li style="--i: 0">首页</li>
<li style="--i: 1">关于我们</li>
<li style="--i: 2">售后服务</li>
<li style="--i: 3">产品介绍</li>
<li style="--i: 4">联系我们</li>
</ul>
</div>
</body>
</html>滑动导航栏
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>wanglei.live</title>
<style>
:root {
--a-width: 100px;
}
nav {
margin: 10px auto;
position: relative;
width: calc(var(--a-width) * 5);
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
box-shadow: 2px 2px 2px #000;
}
nav a {
width: var(--a-width);
height: 100%;
line-height: 50px;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
/* 文字大写 */
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
width: var(--a-width);
background-color: #1abc9c;
}
nav a:nth-child(1):hover ~ .animation {
left: calc(var(--a-width) * 0);
}
nav a:nth-child(2):hover ~ .animation {
left: calc(var(--a-width) * 1);
background-color: #e74c3c;
}
nav a:nth-child(3):hover ~ .animation {
left: calc(var(--a-width) * 2);
background-color: #3498db;
}
nav a:nth-child(4):hover ~ .animation {
left: calc(var(--a-width) * 3);
background-color: #9b59b6;
}
nav a:nth-child(5):hover ~ .animation {
left: calc(var(--a-width) * 4);
background-color: #e67e22;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog </a>
<a href="#">News</a>
<a href="#">Contact</a>
<div class="animation"></div>
</nav>
</body>
</html>炫酷导航条
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>wanglei.live</title>
<link rel="stylesheet" href="./iconfont.css" />
<style>
body {
background-color: #303640;
}
.menu {
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
position: absolute;
z-index: 1000;
width: 60px;
height: 60px;
background-color: #303640;
color: #fff;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 1.25s;
}
.menu span {
width: 40px;
height: 40px;
background-color: #303640;
color: var(--clr);
border: 2px solid var(--clr);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
transition: all 0.5s calc(0.125s * var(--i));
}
.menu:hover .btn {
transform: rotate(315deg);
}
.menu:hover span {
transform: rotate(calc(360deg / 8 * var(--i))) translateX(80px);
}
.menu span i {
transform: rotate(calc(-360deg / 8 * var(--i)));
}
.menu span:hover {
box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr),
0 0 50px var(--clr);
background-color: var(--clr);
color: #333;
transition: all 0s;
}
</style>
</head>
<body>
<div class="menu">
<div class="btn">
<i class="iconfont icon-add"></i>
</div>
<span style="--clr: #ff2972; --i: 0">
<i class="iconfont icon-home"></i>
</span>
<span style="--clr: #fee800; --i: 1">
<i class="iconfont icon-more"></i>
</span>
<span style="--clr: #04fc43; --i: 2">
<i class="iconfont icon-gifts"></i>
</span>
<span style="--clr: #fe00f1; --i: 3">
<i class="iconfont icon-setting"></i>
</span>
<span style="--clr: #00b0fe; --i: 4">
<i class="iconfont icon-message"></i>
</span>
<span style="--clr: #fea600; --i: 5">
<i class="iconfont icon-cart"></i>
</span>
<span style="--clr: #a529ff; --i: 6">
<i class="iconfont icon-moneybag"></i>
</span>
<span style="--clr: #01dbab; --i: 7">
<i class="iconfont icon-star-thr"></i>
</span>
</div>
</body>
</html>视差粘性缩放卡片
此演示仅在桌面端浏览器中可用
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>wanglei.live</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #ccc;
}
.header {
display: grid;
place-items: center;
/* 100vw 是包含了滚动条的宽度 会导致出现横向滚动条 */
width: 80vw;
height: 100vh;
margin: 0 auto;
color: black;
background-color: #ccc;
text-align: center;
}
.header h1 {
font-size: 2.5vw;
}
.header p {
font-size: 1.5vw;
}
.main {
width: 80vw;
margin: 0 auto;
color: black;
}
.main ul {
display: flex;
flex-direction: column;
list-style: none;
}
.main ul li {
position: sticky;
top: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 60vw;
text-transform: uppercase;
font-size: 1.5rem;
background-color: var(--col);
animation: scale 1s linear forwards;
/* 视图时间线 */
animation-timeline: view();
}
.article {
width: 80vw;
margin: 0 auto;
color: black;
font-size: 1.2rem;
}
@keyframes scale {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.8);
}
}
</style>
</head>
<body>
<div class="header">
<div>
<h1>header</h1>
<p>pppp</p>
</div>
</div>
<main class="main">
<ul>
<li style="--col: #ff2972">css</li>
<li style="--col: #fee800">html</li>
<li style="--col: #04fc43">javascript</li>
<li style="--col: #fe00f1">golang</li>
<li style="--col: #00b0fe">php</li>
</ul>
</main>
<article class="article">
<h2>article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae,
voluptatum.
</p>
<h2>article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae,
voluptatum.
</p>
<h2>article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae,
voluptatum.
</p>
<h2>article</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit,
voluptate illo necessitatibus voluptas, tempora libero alias facere
repellendus, id molestiae iusto magnam nihil? Natus vitae earum libero.
Dicta, ipsa deleniti? Repudiandae unde perspiciatis incidunt inventore
suscipit reprehenderit ducimus cupiditate.
</p>
</article>
</body>
</html>