10个超酷的H5特效设计+1个仿最新苹果UI设计（压轴）

淼学派对

已于 2022-11-30 23:43:39 修改

阅读量2.7k

点赞数 14

分类专栏：前端文章标签： html5 前端 html javascript

于 2022-09-17 20:18:04 首次发布

本文链接：https://blog.csdn.net/lbcyllqj/article/details/126909527

版权

前端专栏收录该内容

24 篇文章 14 订阅

订阅专栏

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

1.抽屉式（动态）选择 button（纯css实现）

2.3D（动态）滚筒旋转（button集合）（3d jay专辑）

3.3D（动态）骰子式轮播图

4.横向卷帘式动态轮播

5.动态名片视觉差（纯css实现）

6. 高仿苹果（动态）UI设计（手风琴button（纯css实现））

7.书本翻页（手表悬停，动态特效（纯css实现））

8.鼠标悬停，动态渲染雾光文字特效（纯css实现）

9.滚动视觉差效果（纯css实现）

10.纯白UI设计实时时钟（高雅简约）

压轴终场戏！！！各位！！它来了！！！

仿苹果2022下半年最新UI设计（灵动岛UI设计原理设计）！！！！

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

1.抽屉式（动态）选择 button（纯css实现）

html代码：

<!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">
    <link rel="stylesheet" href="css/1.css">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <ul class="a1">
            <li style="--i:6;--clr:#1877f2;"><a href="#"><span>文学</span> Literature</a></li>
            <li style="--i:5;--clr:#25d366;"><a href="#"><span>自然</span> Natural</a></li>
            <li style="--i:4;--clr:#1da1f2;"><a href="#"><span>数学</span> Math</a></li>
            <li style="--i:3;--clr:#c32aa3;"><a href="#"><span>生物</span> biological</a></li>
            <li style="--i:2;--clr:#ff0000;"><a href="#"><span>物理</span> physical</a></li>
            <li style="--i:1;--clr:#1877f2;"><a href="#"><span>化学</span> chemical</a></li>
        </ul>
        <img src="img/true.jpg">
        <ul class="a2">
            <li style="--i:6;--clr:#1877f2;"><a href="#"><span>文学</span> Literature</a></li>
            <li style="--i:5;--clr:#25d366;"><a href="#"><span>自然</span> Natural</a></li>
            <li style="--i:4;--clr:#1da1f2;"><a href="#"><span>数学</span> Math</a></li>
            <li style="--i:3;--clr:#c32aa3;"><a href="#"><span>生物</span> biological</a></li>
            <li style="--i:2;--clr:#ff0000;"><a href="#"><span>物理</span> physical</a></li>
            <li style="--i:1;--clr:#1877f2;"><a href="#"><span>化学</span> chemical</a></li>
        </ul>
    </div>
</body>
</html>

css代码：

/* @import url('htpps://fonts.gooleapis.com/css?family=Oswald:400,700'); */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oswald',sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #434750;
}
/* 左边开始 */
.a1{
    position: relative;
    transform: skewY(-15deg);
}
.a1 li {
    position: relative;
    list-style: none;
    width: 120px;
    background: #3e3f46;
    padding: 15px;
    transition: 0.5s;
    z-index: calc(1 * var(--i));
}
.a1 li:hover{
    transform: translateX(-50px);
    background: var(--clr);
}
.a1 li::before{
    content: '';
    position: absolute;
    top:0;
    left: -40px;
    width: 40px;
    height: 100%;
    background: #3e3f46;
    filter: brightness(0.7);
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.5s;
}
.a1 li:hover::before{
    background: var(--clr);
    filter: brightness(0.7);
}
.a1 li::after{
    content: '';
    position: absolute;
    top:-40px;
    left:0;
    width: 100%;
    height: 40px;
    background: #3e3f46;
    filter: brightness(0.9);
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 0.5s;
}
.a1 li:hover::after{
    background: var(--clr);
    filter: brightness(0.9);
}
.a1 li a{
    text-decoration: none;
    color: #999;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.5s;
}
.a1 li:hover a{
    color: #fff;
}
.a1 li:last-child::after{
    box-shadow: -120px 120px 20px rgba(0,0,0,0.25);
}
.a1 li span{
    position: absolute;
    top:0;
    left: -40px;
    width: 40px;
    height: 100%;
    /* filter: brightness(0.7); */
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;

}
/* 左边结束 */


.box1{
    
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}











/* 右边开始 */
.a2{
    position: relative;
    transform: skewY(15deg);
}
.a2 li {
    position: relative;
    list-style: none;
    width: 120px;
    background: #3e3f46;
    padding: 15px;
    transition: 0.5s;
    z-index: calc(1 * var(--i));
}
.a2 li:hover{
    transform: translateX(50px);
    background: var(--clr);
}
 .a2 li::before{
    content: '';
    position: absolute;
    top:0;
    right: -40px;
    width: 40px;
    height: 100%;
    background: #3e3f46;
    filter: brightness(0.7);
    transform-origin: left;
    transform: skewY(135deg);
    transition: 0.5s;

} 

.a2 li:hover::before{
    background: var(--clr);
    filter: brightness(0.7);
}
.a2 li::after{
    content: '';
    position: absolute;
    top:-40px;
    left:0;
    width: 100%;
    height: 40px;
    background: #3e3f46;
    filter: brightness(0.9);
    transform-origin: bottom;
    transform: skewX(-45deg);
    transition: 0.5s;
} 
.a2 li:hover::after{
    background: var(--clr);
    filter: brightness(0.9);
}
.a2 li a{
    text-decoration: none;
    color: #999;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.5s;
}
.a2 li:hover a{
    color: #fff;
}
.a2 li:last-child::after{
    box-shadow: 120px 120px 20px rgba(0,0,0,0.25);
}
.a2 li span{
    position: absolute;
    top:0;
    right: -40px;
    width: 40px;
    height: 100%;
    filter: brightness(0.7);
    transform-origin: left;
    transform: skewY(-45deg);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;

} 
/* 右边结束 */

2.3D（动态）滚筒旋转（button集合）（3d jay专辑）

html代码：

<!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>Document</title> 
    <link rel="stylesheet" href="css/1.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:1;color: #25d366;"><i>《最伟大的作品》</i> -- <i>JAY</i>《倒影》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:2;color: #c32aa3;"><i>《最伟大的作品》</i> -- <i>JAY</i>《粉色海洋》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:3;color: #ff0000;"><i>《最伟大的作品》</i> -- <i>JAY</i>《错过的烟火》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:4;color: #eaf900;"><i>《最伟大的作品》</i> -- <i>JAY</i>《红颜如霜》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:5;color: #f9b600;"><i>《最伟大的作品》</i> -- <i>JAY</i>《还在流浪》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:6;color: #7bd3f3;"><i>《最伟大的作品》</i> -- <i>JAY</i>《最伟大的作品》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:7;color: #f37bec;"><i>《最伟大的作品》</i> -- <i>JAY</i>《Mojito》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:8;color: #7bf3e9;"><i>《最伟大的作品》</i> -- <i>JAY</i>《说好不哭》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:9;color: #ff4800;"><i>《最伟大的作品》</i> -- <i>JAY</i>《不爱我就拉到》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:10;color: #8d7efb;"><i>《最伟大的作品》</i> -- <i>JAY</i>《我是如此相信》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:11;color: #fba17e;"><i>《最伟大的作品》</i> -- <i>JAY</i>《Intro》</a>
            <a href="https://ep.kugou.com/html/pc_commonchargeV3/index_442363.html?is_go=0&hreffrom=210" style="--i:12;color: #a13838;"><i>《最伟大的作品》</i> -- <i>JAY</i>《等你下课》</a>
        </div>
    </div>
    
</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins';
}
a{
    text-decoration: none;
}
body{
    background-image: url(../img/R-C.jpg);
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    overflow: hidden;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .box{
    transform-style: preserve-3d;
    animation: animate 10s linear  infinite;
}
@keyframes animate{
    0%
    {
        transform: perspective(1000px) rotateX(0deg) rotate(20deg);
    }
    20%
    {
        transform: perspective(1000px) rotateX(180deg) rotate(10deg);
    }
    100%
    {
        transform: perspective(1000px) rotateX(360deg) rotate(20deg);
    }
}
.container .box a{
    position: absolute;
    color: #fff;
    font-size: 3.5em;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 900;
    padding: 0 10px;
    transform-style: preserve-3d;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    transform: translate(-50%,-50%) rotateX(calc(var(--i) * 30deg)) translateZ(200px);
}
.container .box a i:nth-child(1){
    font-style: initial;
    color: #ff246f;
}
.container .box a i:nth-child(2){
    font-style: initial;
    color: #12b5ff;

}

3.3D（动态）骰子式轮播图

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/1.css" />
		<script type="text/javascript" src="js/1.js"></script>
	</head>
	<body>
		<!--核心思想：利用一组单选框每次只可以选中一个的特性和lable标签关联，
		实现选中一个单选框时可以关联到多个lable标签，
		当单选按钮处于选中状态时，利用css3的选择器改变对应的图片显示，
		这样就可以实现点击变换图片或者轮播图的效果，-->
		<div class="box">
			<!--将单选框放到最前面好选择后面的元素-->
			<input type="radio" name="chk" id="chk1" class="check" checked="checked"/>
				<input type="radio" name="chk" id="chk2" class="check"/>
				<input type="radio" name="chk" id="chk3" class="check"/>
				<input type="radio" name="chk" id="chk4" class="check"/>
				<input type="radio" name="chk" id="chk5" class="check"/>
				<input type="radio" name="chk" id="chk6" class="check"/>
			<ul class="inner">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="titles">
			<label for="chk1"></label>
			<label for="chk2"></label>
			<label for="chk3"></label>
			<label for="chk4"></label>
			<label for="chk5"></label>
			<label for="chk6"></label>
			</div>
			<!--将第六个排到第一位---显示第一个时左边按钮是第六个的连接-->
			<div class="btn left_btn">
			<label for="chk6"></label>
			<label for="chk1"></label>
			<label for="chk2"></label>
			<label for="chk3"></label>
			<label for="chk4"></label>
			<label for="chk5"></label>
			</div>
			<!--同理-->
			<div class="btn right_btn">
			<label for="chk2"></label>
			<label for="chk3"></label>
			<label for="chk4"></label>
			<label for="chk5"></label>
			<label for="chk6"></label>
			<label for="chk1"></label>
			</div>
		</div>
	</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
.box{
    width: 600px;
    height: 500px;
    position: relative;
    margin: 100px auto;
}
/*设置3d场景,所有的变化时间为2秒*/
.inner{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 100px;
    transform-style: preserve-3d;
    transition: all 2s;
    perspective: 100000px;
}

.inner li{
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    transition: all 3s;
}
/*给li设置背景图片,且旋转位置组成立方体*/
.inner li:nth-of-type(1){
    background-image: url(../images/1.jpg);
    transform: rotateY(0) translateZ(200px);
}
.inner li:nth-of-type(2){
    background-image: url(../images/2.jpg);
    transform: rotateY(90deg) translateZ(200px);
}
.inner li:nth-of-type(3){
    background-image: url(../images/3.jpg);
    transform: rotateY(180deg) translateZ(200px);
}
.inner li:nth-of-type(4){
    background-image: url(../images/4.jpg);
    transform: rotateY(270deg) translateZ(200px);
}
.inner li:nth-of-type(5){
    background-image: url(../images/5.jpg);
    transform: rotateX(-90deg) translateZ(200px);
}
.inner li:nth-of-type(6){
    background-image: url(../images/6.jpg);
    transform: rotateX(90deg) translateZ(200px);
}
/*按钮样式*/
.btn{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
.left_btn{
    left: 0;
}
.right_btn{
    right: 0;
}

.btn>label{
    display: none;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    top: 25px;
    left: 25px;
    border-radius: 25px;
}
.btn>label::before{
    content: "";
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(135deg);
    margin: 13px auto auto 20px;
}
.right_btn>label::before{
    transform: rotate(-45deg);
    margin: 13px auto auto 3px;
}
/*小圆点样式.*/
.titles{
    position: absolute;
    width: 100%;
    height: 90px;
    bottom: 0;
    text-align: center;
    line-height: 50px;
}
.titles>label{
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #cccc;
    border: 1px solid #eee;
    border-radius: 50%;
}
/*将单选按钮隐藏*/
.check{
    display: none;
}
/*第1个单选框选中时，第1个按钮显示，第1个圆点变色，显示第1张图片*/
.check:nth-child(1):checked~.btn>label:nth-child(1){display: block;}
.check:nth-child(1):checked~.titles>label:nth-child(1){background-color: aqua;}
.check:nth-child(1):checked~.inner li:nth-of-type(1){opacity: 1;}
.check:nth-child(1):checked~.inner{transform: rotateY(360deg) rotateX(360deg);}
/*第2个单选框选中时，第2个按钮显示，第2个圆点变色，显示第2张图片*/
.check:nth-child(2):checked~.btn>label:nth-child(2){display: block;}
.check:nth-child(2):checked~.titles>label:nth-child(2){background-color: aqua;}
.check:nth-child(2):checked~.inner li:nth-of-type(2){opacity: 1;}
.check:nth-child(2):checked~.inner{transform: rotateY(270deg) rotateX(0);}
/*第3个单选框选中时，第3个按钮显示，第3个圆点变色，显示第3张图片*/
.check:nth-child(3):checked~.btn>label:nth-child(3){display: block;}
.check:nth-child(3):checked~.titles>label:nth-child(3){background-color: aqua;}
.check:nth-child(3):checked~.inner li:nth-of-type(3){opacity: 1;}
.check:nth-child(3):checked~.inner{transform: rotateY(540deg) rotateX(360deg);}
/*第4个单选框选中时，第4个按钮显示，第4个圆点变色，显示第4张图片*/
.check:nth-child(4):checked~.btn>label:nth-child(4){display: block;}
.check:nth-child(4):checked~.titles>label:nth-child(4){background-color: aqua;}
.check:nth-child(4):checked~.inner li:nth-of-type(4){opacity: 1;}
.check:nth-child(4):checked~.inner{transform: rotateY(90deg) rotateX(0);}
/*第5个单选框选中时，第5个按钮显示，第5个圆点变色，显示第5张图片*/
.check:nth-child(5):checked~.btn>label:nth-child(5){display: block;}
.check:nth-child(5):checked~.titles>label:nth-child(5){background-color: aqua;}
.check:nth-child(5):checked~.inner li:nth-of-type(5){opacity: 1;}
.check:nth-child(5):checked~.inner{transform: rotateY(360deg) rotateX(90deg);}
/*第6个单选框选中时，第6个按钮显示，第6个圆点变色，显示第6张图片*/
.check:nth-child(6):checked~.btn>label:nth-child(6){display: block;}
.check:nth-child(6):checked~.titles>label:nth-child(6){background-color: aqua;}
.check:nth-child(6):checked~.inner li:nth-of-type(6){opacity: 1;}
.check:nth-child(6):checked~.inner{transform: rotateY(0) rotateX(-90deg);}

4.横向卷帘式动态轮播

html+css+JavaScript代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>3D轮播</title>
</head>
<style>
    *{margin:0px;padding:0px;}
    li{list-style-type:none;}
    .wrap{width:800px;margin:300px auto;position:relative;-webkit-perspective: 800px;}
    #picall{width:800px;height:360px;}
    /*创建3D空间必须写定位*/
    #picall li{position:relative;width:50px;height:360px;-webkit-transform-style: preserve-3d;float:left;-webkit-transform-origin: center center -180px;}
    #picall li a{position:absolute;width:50px;height:360px;display: block;}
    #picall li a:nth-of-type(1){background:url(images/2.jpg) no-repeat;top:0px;left:0px; }
    #picall li a:nth-of-type(2){background:url(images/1.jpg) no-repeat;top:-360px;left:0px;-webkit-transform-origin:bottom;-webkit-transform: rotateX(90deg); }
    #picall li a:nth-of-type(3){background:url(images/3.jpg) no-repeat;top:0px;left:0px;-webkit-transform: translateZ(-360px) rotateX(180deg); }
    #picall li a:nth-of-type(4){background:url(images/4.jpg) no-repeat;top:360px;left:0px;-webkit-transform-origin:top;-webkit-transform: rotateX(-90deg); }
    #picall li span{position:absolute;left:0px;top:0px;width:360px;height:360px;-webkit-transform-origin: left;}
    #picall li span:nth-of-type(1){-webkit-transform: rotateY(90deg);background:rgba(20,20,20,0.4);}
    #picall li span:nth-of-type(2){-webkit-transform: rotateY(90deg);left:50px;background:rgba(25,20,20,0.4);}
    #btn{padding:10px auto;position:absolute;right:0px;bottom:0px;z-index:999;}
    #btn li{width:50px;height:50px;background:black;border-radius: 50%;font:24px/50px "微软雅黑";float:left;margin: 0px 10px;color:#ffffff;text-align:center;}
    #btn li.active{background:white;color:black;}
</style>
<body>
 <div class="wrap">
     <ul id="picall">

     </ul>
     <ol id="btn">
         <li class="active">1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
     </ol>
 </div>
</body>
<script>
    var box = document.getElementsByClassName("wrap")[0];
    var Aul = document.getElementById("picall");
    var btnall = document.getElementById("btn");
    Rotate(box,Aul,btnall);
    function Rotate(x,y,z)
    {

        var width = 50;
        var length = Math.floor(box.clientWidth/width);
        var Liall = "";
        var index = 0 ;
        var old = 0 ;
        var flag = true;
        var liindex = 0 ;
        /*创建节点*/
        function CreateNode(){
            for(var i=0;i<length;i++)
            {
                Liall +='<li><a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <span></span> <span></span> </li>';
            }
            Aul.innerHTML = Liall;
        }
        CreateNode();
        /*创建节点结束*/
        /*消除多余背景*/
        function clear(){
            for(var i=0;i<length;i++)
            {
                i>length/2?--index:++index;
                Aul.getElementsByTagName("li")[i].style.zIndex = index;
            }
        }
        clear();
        /*消除背景结束*/
        /*插入背景*/
        function bg()
        {
            for(var i=0;i<length;i++)
            {
                for(var n=0;n<4;n++)
                {
                    Aul.getElementsByTagName("li")[i].getElementsByTagName("a")[n].style["backgroundPosition"] = -width*i+"px 0px";
                }
            }
        }
        bg();
        /*插入背景结束*/
        /*点击事件*/
        function clickfn(){
            if(flag)
            {
                flag = false;
                clearInterval(timer);
                for(var i=0;i<length;i++)
                {
                    Aul.children[i].style.transition = "0.4s "+i*100+"ms";
                    Aul.children[i].style.WebkitTransform = "rotateX("+this.index*90+"deg)"
                }
                btnall.children[this.index].className = "active";
                btnall.children[old].className = " ";
                old = this.index;
                liindex = this.index;
                flag = true;
            }
        }
        /*点击事件结束*/
        for(var i=0;i<4;i++)
        {

            btnall.children[i].index = i ;
            btnall.children[i].onclick = clickfn;
        }
        /*自动化事件*/
        function auto(){
            if(liindex>=3)
            {
                liindex = -1 ;
            }
            if(flag)
            {
                ++liindex;
                flag = false;
                for(var i=0;i<length;i++)
                {
                    Aul.children[i].style.transition = "0.4s "+i*100+"ms";
                    Aul.children[i].style.WebkitTransform = "rotateX("+liindex*90+"deg)"
                }
                btnall.children[liindex].className = "active";
                btnall.children[old].className = " ";
                old = liindex;
                flag = true;
            }
        }
        /*自动化事件结束*/
        var timer = null;
        timer = setInterval(auto,3000);
         /*自动化事件结束*/
         box.onmouseover = function(){
             clearInterval(timer);
         }
         box.onmouseleave = function(){
              timer = setInterval(auto,3000);
         }
         window.onblur = function(){
             clearInterval(timer);
         }
         window.onfocus = function(){
            timer = setInterval(auto,3000);
         }
    }
</script>
</html>

5.动态名片视觉差（纯css实现）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/1.css"/>
</head>
<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <p class="f">欢迎来到H5世界</p>
    </div>
</body>
</html>

css代码：

body{
    display: flex;
    justify-content: center;
    background-color: rgb(119, 157, 193);
}
.a{
    position: relative;
    top: 100px;
    width: 1000px;
    height: 600px;
    background-image: url(../img/1.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.b,.c,.d,.e{
    position: absolute;
    width: 1000px;
    height: 600px;
    filter: drop-shadow(4px 4px 12px rgba(0,0,0,.5));
    background-size: cover;
    opacity: .7;
    transition: 1.5s;
}
.b::after,
.c::after,
.d::after,
.e::after{
    content: "";
    position: absolute;
    width: 1000px;
    height: 600px;
    background-image: url(../img/1.jpg);
}
.b{
    left: -400px;
    transform: rotateZ(100deg);
    /* 绕html页面的z轴旋转100度 */
    overflow: hidden;
}
.b::after{
    transform: rotateZ(-100deg);
}
.c{
    left: -400px;
    transform: rotateZ(-100deg);
    overflow: hidden;
}
.c::after{
    transform: rotateZ(100deg);
}
.d{
    right: -400px;
    transform: rotateZ(105deg);
    overflow: hidden;
}
.d::after{
    transform: rotateZ(-105deg);
}
.e{
    right: -400px;
    transform: rotateZ(-100deg);
    overflow: hidden;
}
.e::after{
    transform: rotateZ(100deg);
}
.f{
    opacity: 0;
    font: 900 50px '';
    letter-spacing: 10px;
    color: rgb(60, 60, 70);
    transition: 1.5s;
}
.a:hover .b{
    left: -570px;
}
.a:hover .c{
    left: -610px;
}
.a:hover .d{
    right: -560px;
}
.a:hover .e{
    right: -610px;
}
.a:hover .f{
    opacity: 1;
}

6. 高仿苹果（动态）UI设计（手风琴button（纯css实现））

html代码：

<!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">
    <link rel="stylesheet" href="./css/index1.css"/>
    <!-- 引入css样式库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <title>仿苹果UI设计</title>
</head>
<body>
    <div class="wrapper">
        <div class="button">
            <div class="icon">
                <i class="fab fa-facebook-f"></i>
            </div>
            <span>Facebook</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-twitter"></i>
            </div>
            <span>Twitter</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-instagram"></i>
            </div>
            <span>Instagram</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-github"></i>
            </div>
            <span>Github</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-youtube"></i>
            </div>
            <span>Youtube</span>
        </div>

    </div>
    
</body>
</html>

css代码：

/* 引入谷歌在线英文字体 */
@import url('http://font.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
    margin: 0;
    padding: 0;
    /* 限制宽高计算方式 */
    box-sizing: border-box;
    /* 设置字体 */
    font-family: "Poppins",sans-serif;
}
html,body{
    /* css3最强的布局，网格布局grid */
    display: grid;
    height: 100%;
    width: 100%;
    /* place-items: center是 align-items: center;（垂直居中）  justify-content: center（水平居中）;这两种的合并写法 */
    place-items: center;
    /* 渐变色 */
    background: linear-gradient(315deg,#74b7e4 0%,#a261ec 74%);
}
.wrapper .button{
    /* inline-block：结合了block可以设置宽高的特性有保持了inline不 */
    display: inline-block;
    height: 60px;
    width: 60px;
    /* float: left;这里可以把浮动去掉，因为上面的inline已经设置好了不换行，或者用父子级关系的flex布局的row实现 */
    margin: 0 5px;
    /* 隐藏溢出元素快部分的内容 */
    overflow: hidden;
    background: #fff;
    /* 设置圆角矩形为50px，其实就是无限接近与圆形 */
    border-radius: 50px;
    /* 手型鼠标出现，当然要是不用div用a的话不需要设置 */
    cursor: pointer;
    /* div的阴影设置 */
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    /* 过渡效果：应用于所有属性并且过渡时间为0.3秒，ease-out：慢速结束过渡效果 */
    transition: all 0.3s ease-out;
}
.wrapper .button:hover{
    /* 结合上面的过渡效果，过渡后的最终形状 */
    width: 200px;
}
.wrapper .button .icon{
    /* 同上 */
    display: inline-block;
    height: 60px;
    width: 60px;
    /* 字体居中 */
    text-align: center;
    /* 同上 */
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
    background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
    background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
    background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
    background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
    background: #FF0000;
}

.wrapper .button .icon i{
    font-size: 25px;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
    color: #fff;
}
.wrapper .button span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
}

7.书本翻页（手表悬停，动态特效（纯css实现））

html代码：

<!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>书本翻页</title>
    <link rel="stylesheet" href="css/1.css"/>
</head>
<body>
    <div class="bigbox">
        <div class="box">
            <div class="card">
                <div class="imgbox">
                    <img src="img/7.jpg">
                </div>
                <div class="text">
                    <h2>彩虹甜甜圈</h2>
                    风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                    着不同味道的水果软心，每一粒都有鲜艳的色
                    彩和醒目的S标记，真正的鲜果滋味，不管你
                    是单独品尝还是一把通吃，都有新鲜感受，激
                    发无穷的想象力！
                </div>
            </div>
            <div class="card">
                <div class="imgbox">
                    <img src="img/7.jpg">
                </div>
                <div class="text">
                    <h2>彩虹甜甜圈</h2>
                    风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                    着不同味道的水果软心，每一粒都有鲜艳的色
                    彩和醒目的S标记，真正的鲜果滋味，不管你
                    是单独品尝还是一把通吃，都有新鲜感受，激
                    发无穷的想象力！
                </div>
            </div>
            <div class="card">
                <div class="imgbox">
                    <img src="img/7.jpg">
                </div>
                <div class="text">
                    <h2>彩虹甜甜圈</h2>
                    风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                    着不同味道的水果软心，每一粒都有鲜艳的色
                    彩和醒目的S标记，真正的鲜果滋味，不管你
                    是单独品尝还是一把通吃，都有新鲜感受，激
                    发无穷的想象力！
                </div>
            </div>
            <div class="card">
                <div class="imgbox">
                    <img src="img/7.jpg">
                </div>
                <div class="text">
                    <h2>彩虹甜甜圈</h2>
                    风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                    着不同味道的水果软心，每一粒都有鲜艳的色
                    彩和醒目的S标记，真正的鲜果滋味，不管你
                    是单独品尝还是一把通吃，都有新鲜感受，激
                    发无穷的想象力！
                </div>
            </div>
        </div>
        <div class="box">
            <div class="card">
                <div class="imgbox">
                <img src="img/7.jpg">
            </div>
            <div class="text">
                <h2>彩虹甜甜圈</h2>
                风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                着不同味道的水果软心，每一粒都有鲜艳的色
                彩和醒目的S标记，真正的鲜果滋味，不管你
                是单独品尝还是一把通吃，都有新鲜感受，激
                发无穷的想象力！
            </div></div>
            <div class="card">
                <div class="imgbox">
                <img src="img/7.jpg">
            </div>
            <div class="text">
                <h2>彩虹甜甜圈</h2>
                风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                着不同味道的水果软心，每一粒都有鲜艳的色
                彩和醒目的S标记，真正的鲜果滋味，不管你
                是单独品尝还是一把通吃，都有新鲜感受，激
                发无穷的想象力！
            </div></div>
            <div class="card">
                <div class="imgbox">
                <img src="img/7.jpg">
            </div>
            <div class="text">
                <h2>彩虹甜甜圈</h2>
                风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                着不同味道的水果软心，每一粒都有鲜艳的色
                彩和醒目的S标记，真正的鲜果滋味，不管你
                是单独品尝还是一把通吃，都有新鲜感受，激
                发无穷的想象力！
            </div></div>
            <div class="card">
                <div class="imgbox">
                <img src="img/7.jpg">
            </div>
            <div class="text">
                <h2>彩虹甜甜圈</h2>
                风靡全球的彩虹果汁糖，脆脆的糖果外衣包裹
                着不同味道的水果软心，每一粒都有鲜艳的色
                彩和醒目的S标记，真正的鲜果滋味，不管你
                是单独品尝还是一把通吃，都有新鲜感受，激
                发无穷的想象力！
            </div></div>
        </div>
    </div>
</body>
</html>

css代码：

*{
    padding: 0;
    margin:0;
}
body{
    background-color: greenyellow;
}
.bigbox{
    height: 100vh;
    /* background: red; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.card{
    width: 200px;
    height: 300px;
    background: #fff;
    transform-style:preserve-3d ;
    transform:  perspective(2000px);
    box-shadow: inset 300px 0 50px rgba(0, 0, 0, 0.5),0 20px 100px rgba(0, 0, 0, 0.5);
    transition: 1s;
}
.card:hover{
    transform:  perspective(2000px) rotate(-10deg);
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5),0 10px 200px rgba(0, 0, 0, .5);
}
.card::before{
    content: '';
    position: absolute;
    top:-5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #475b02;
    transform-origin: bottom;
    transform: skewX(-45deg);
}
.card:after{
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background: #638000;
    transform-origin:left ;
    transform: skewY(-45deg);
}
.card .imgbox{
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: left;
    transform: 1s;
    transition-duration:1s;
    z-index: 1;
}
.card:hover .imgbox{
    transform: rotateY(-135deg);
}
.card .text{
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px;
    z-index: -1;
}

8.鼠标悬停，动态渲染雾光文字特效（纯css实现）

html代码：

<!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">
    <link rel="stylesheet" href="./css/1.css"/>
    <title>Document</title>
</head>
<body>
    <ul>
        <li style="--clr:#00ade1">
            <a href="#" data-text="&nbsp;Python">&nbsp;Python&nbsp;</a>
        </li>
        <li style="--clr:#ff6493">
            <a href="#" data-text="&nbsp;Java">&nbsp;Java&nbsp;</a>
        </li>
        <li style="--clr:#ffdd1c">
            <a href="#" data-text="&nbsp;C++/C#">&nbsp;C++/C#&nbsp;</a>
        </li>
        <li style="--clr:#00dc82">
            <a href="#" data-text="&nbsp;Javascript">&nbsp;Javascript&nbsp;</a>
        </li>
        <li style="--clr:#dc00d4">
            <a href="#" data-text="&nbsp;Php">&nbsp;Php&nbsp;</a>
        </li>
    </ul>
</body>
</html></h5>

css代码：

*{
    margin: 0;
    padding: 0;

}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #252839;
}
ul{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
ul li{
    position: relative;
    list-style: none;
}
ul li a {
    position: relative;
    font-weight: bolder;
    font-size: 8em;
    text-decoration: none;
    line-height: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
ul li a::before{
    content: attr(data-text);
    position: absolute;
    color: var(--clr);
    width: 0;
    overflow: hidden;
    transition: 1s;
    border-right: 20px solid var(--clr);
}
ul li a:hover::before{
    width: 100%;
    filter: drop-shadow(0 0 40px var(--clr));
}

9.滚动视觉差效果（纯css实现）

html代码：

<!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">
    <link rel="stylesheet" href="css/1.css">
    <title>Document</title>
</head>
<body>
    <h1>凌晨的战神，破晓的王者！</h1>
    <div class="bg"><span>hero</span></div>
    <h2>Every dawn is the beginning of a new life for a man.


        The God of War in the early morning <br/><span class="lqj">-- Lu Qingjie</span></h2>
</body>
<script>
    const background = document.querySelector(".bg")
    // 会返回当前文档中第一个类名为 ".bg" 的元素：

    document.addEventListener('scroll',()=>{
        const scrollY = window.scrollY

        if(scrollY !== 0){
            background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`
            //backgroundPosition(背景定位)   （calc:动态定位）举例子：top:calc（50%-50px）==top:50%;margin-top:-50px;

            // 第一个calc控制被字体裁剪的背景在X轴上移动
            // 第二个calc控制被字体裁剪的背景在Y轴上移动
        }
        else{
            background.style.backgroundPosition = ''
        }
    })

</script>
</html>

css代码：

html,body{
    margin: 0;
    padding: 0;
    height: 200vh;
    /* overflow-x: hidden; */
}





.bg{
    background-image: url(../img/雪山.jpg);
    background-size: cover;
    background-position: center center;
    /* 背景图片定位 */
    height: 200vh;
    /* height：200vh：将背景图片调整到两个电脑屏幕的高度 */
    font: 900 39rem '';
    /* font：（字体的粗细程度） （字体的大小）（渲染出使用bg样式的标签里面的文字） */
    -webkit-background-clip: text;
    /* 背景图片的裁剪区域 */
    -webkit-text-fill-color: transparent;
    /* 设置字体的不透明属性：transparent（透明） */
    position: relative;
    text-align: center;
    overflow: hidden;
}
.bg::before{
    content: counter(bg);
    /* 或者直接填:"" */
    background-size: cover;
    background-image: inherit;
    /* 继承父值的背景图值 */
    background-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -99;
}




h1{
    position: absolute;
    text-align: center;
    width: 100%;
    letter-spacing: 10px;
    color: #fff;
}
h2{
    position: absolute;
    letter-spacing: 2px;
    top: 120vh;
    width: 60%;
    color: #fff;
    left: 50%;
    transform: translate(-50%);
    padding: 30px;
    background-color: rgba(0, 0, 0, .3);
}
.lqj{
    padding-left:950px ;
}

10.纯白UI设计实时时钟（高雅简约）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=、, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="1.css"/>
</head>
<body>  
    <!-- <button onclick="">切换主题</button> -->
    <div class="clock">
        <div class="inner-circle">
          <div class="hands">
            <div class="dots"></div>
            <div class="hand hour-hand"></div>
            <div class="hand minute-hand"></div>
            <div class="hand second-hand"></div>
          </div>
        </div>
      </div>

    <script type="text/javascript" src="1.js"></script>
</body>
</html>

css代码：

:root {
    --bg-color: linear-gradient(158.53deg, #eef0f5 14.11%, #e2e4ea 85.89%);
    --clock-bg: linear-gradient(134.17deg, #e6e9ef 4.98%, #e6e9ef 4.99%, #eef0f5 94.88%);
    --clock-border: linear-gradient(170deg, #ffffff, #bac3cf);
    --clock-shadow: 19px 25px 92px -32px rgba(166, 180, 200, 0.45), -20px -20px 61px rgba(255, 255, 255, 0.53),
      13px 14px 12px -6px rgba(166, 180, 200, 0.57);
    --clock-inner-bg: linear-gradient(90deg, #eceef3 0%, #f1f2f7 100%);
    --clock-inner-shadow: inset -12px -12px 30px rgba(255, 255, 255, 0.2), inset 7px 7px 8px rgba(166, 180, 200, 0.52),
      inset 10px 11px 30px -1px rgba(166, 180, 200, 0.71);
    --hand-color: #646e82;
    --second-hand-color: #fd382d;
  }
  /* css 用于自动识别暗色模式  */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: linear-gradient(158.53deg, #363e46 14.11%, #2c343c 85.89%);
      --clock-bg: linear-gradient(134.17deg, #3e464f 4.99%, #424a53 94.88%);
      --clock-border: linear-gradient(170deg, #5d666d, #232a30);
      --clock-shadow: 19px 25px 92px -32px rgba(35, 40, 45, 0.35), -20px -20px 61px rgba(72, 83, 92, 0.25),
        13px 14px 12px -6px rgba(35, 40, 45, 0.5);
      --clock-inner-bg: linear-gradient(248.53deg, #363e46 -12.81%, #2c343c 305.95%);
      --clock-inner-shadow: inset -12px -12px 30px rgba(72, 83, 92, 0.3), inset 7px 7px 8px rgba(35, 40, 45, 0.25),
        inset 10px 11px 30px -1px rgba(35, 40, 45, 0.5);
      --hand-color: #8e98a1;
    }
  }
  * {
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: var(--clock-bg);
  }
  
  .clock {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: var(--clock-bg);
    box-shadow: var(--clock-shadow);
    position: relative;
  }
  /* 利用伪元素和padding实现border渐变效果 */
  .clock::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 1px;
    border-radius: 50%;
    z-index: -1;
    background-image: var(--clock-border);
  }
  
  .inner-circle {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--clock-inner-bg);
    box-shadow: var(--clock-inner-shadow);
  }
  
  /* 表盘刻度 使用最少的元素实现四个刻度 */
  .inner-circle::before,
  .inner-circle::after {
    content: '';
    border-radius: 2px;
    background-color: rgba(166, 180, 200, 0.57);
    position: absolute;
  }
  
  .inner-circle::before {
    width: 2px;
    height: 10px;
    top: 4px;
    left: calc(50% - 1px);
    box-shadow: 0 152px rgba(166, 180, 200, 0.57);
  }
  
  .inner-circle::after {
    width: 10px;
    height: 2px;
    left: 4px;
    top: calc(50% - 1px);
    box-shadow: 152px 0 rgba(166, 180, 200, 0.57);
  }
  
  /* 表盘指针 */
  .hands {
    width: 170px;
    height: 170px;
    position: relative;
  }
  
  .dots {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--hand-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .dots::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--second-hand-color);
  }
  
  .hand {
    width: 3px;
    height: var(--hand-length);
    background-color: var(--hand-color);
    position: absolute;
    border-radius: 3px;
    left: calc(50% - 1.5px);
    top: var(--top);
    z-index: -1;
    transform-origin: center var(--origin-y);
  }
  
  .hour-hand {
    --hand-length: 60px;
    --top: 40px;
    --origin-y: 45px;
  }
  
  .minute-hand {
    --hand-length: 80px;
    --top: 24px;
    --origin-y: 61px;
  }
  
  .second-hand {
    --hand-length: 100px;
    --top: 15px;
    --origin-y: 70px;
    width: 2px;
    left: calc(50% - 1px);
    background-color: var(--second-hand-color);
    position: relative;
    z-index: 1;
  }
  
  .second-hand::after {
    content: '';
    width: 4px;
    height: 22px;
    background-color: var(--second-hand-color);
    position: absolute;
    bottom: -2px;
    border-radius: 2px;
    left: calc(50% - 2px);
  }

js代码：

const secondHand = document.querySelector('.second-hand');
        const minuteHand = document.querySelector('.minute-hand');
        const hourHand = document.querySelector('.hour-hand');

        let date = null;
        let hour = 0;
        let minute = 0;
        let second = 0;
        function initClock() {
        const date = new Date();
        hour = date.getHours();
        minute = date.getMinutes();
        second = date.getSeconds();
        }
        function handRotation(target, deg) {
        target.style.transform = `rotate(${deg}deg)`;
        }
        function clock() {
        date = new Date();
        let hour = (date.getHours() % 12) + date.getMinutes() / 59;
        let minute = date.getMinutes();
        let second = date.getSeconds();

        handRotation(hourHand, hour * 30);
        handRotation(minuteHand, minute * 6);
        handRotation(secondHand, second * 6);

        setTimeout(clock, 500);
        }



        function getCol(cole) {
            document.getElementById("col").style.background = cole;
        }



        
        window.onload = clock();

压轴终场戏！！！各位！！它来了！！！

仿苹果2022下半年最新UI设计（灵动岛UI设计原理设计）！！！！

html代码：

<!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" />
    <link rel="stylesheet" href="1.css"/>
    <title>Document</title>
  </head>

  <body>
    <div class="navigation">
      <span style="--i: 0; --x: -1; --y: 0"><ion-icon name="construct-outline"></ion-icon>
      </span>
      <span style="--i: 1; --x: 1; --y: 0"><ion-icon name="game-controller-outline"></ion-icon></span>
      <span style="--i: 2; --x: 0; --y: -1"><ion-icon name="megaphone-outline"></ion-icon></span>
      <span style="--i: 3; --x: 0; --y: 1"><ion-icon name="person-circle-outline"></ion-icon></span>
      <span style="--i: 4; --x: 1; --y: 1"><ion-icon name="videocam-outline"></ion-icon></span>
      <span style="--i: 5; --x: -1; --y: -1"><ion-icon name="trash-outline"></ion-icon></span>
      <span style="--i: 6; --x: 0; --y: 0"><ion-icon name="stats-chart-outline"></ion-icon></span>
      <span style="--i: 7; --x: -1; --y: 1"><ion-icon name="save-outline"></ion-icon></span>
      <span style="--i: 8; --x: 1; --y: -1"><ion-icon name="cog-outline"></ion-icon></span>
    </div>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script>
        let navigation=document.querySelector('.navigation');
        navigation.onclick=function(){
        navigation.classList.toggle('active')
}
    </script>

  </body>
</html>

css代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* 定义一个视口高度为电脑显示器的高度 */
    background: #10131c;
  }
  
  .navigation {
    position: relative;
    width: 70px;
    height: 70px;
    background: #212532;
    border-radius: 10px;
    /* 设置圆角 */
    /* cursor: pointer; */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    /* 给span添加过渡效果 */
    transition-delay: 0.8s;
    /* 设置过度属性的延迟效果 */
  }
  
  .navigation.active {
    width: 200px;
    height: 200px;
    transition-delay: 0s;
    /* 设置过度属性的延迟效果 */
  }
  
  .navigation span {
    position: absolute;
    /* 添加绝对定位 */
    width: 7px;
    height: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* 添加圆角 */
    transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
    /* calc（）计算长度的函数（可以计算任何长度） */
    /* 设置每个元素的移动属性 */
    transition: transform 0.5s,width 0.5s,height 0.5s,background 0.5s;
    /* 给上方的每个元素移动时（x移动或者，y轴移动时）添加过渡属性 */
    transition-delay: calc(0.1s * var(--i));
    /* 设置过度属性的延迟效果 */
  }
  
  .navigation.active span{
    width: 45px;
    height: 45px;
    background: #333849;
    transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
  
  }
  
  .navigation span ion-icon{
    font-size: 0em;
    /* 当变小之后不需要每一个元素的显示，所以把每一个span的size变为零（小白点） */
    transition: 0.5s;
  }
  .navigation.active span ion-icon{
  
    font-size: 1.35em;
    /* 当变大之后需要每一个元素的显示，所以把每一个span的size变为1.35em（根据自己的需要改写） */
    color: #fff;
  } 
  
  .navigation.active span:hover ion-icon{
    color: #2dfc52;
    filter: drop-shadow(0 0 2px #2dfc52) drop-shadow(0 0 5px #2dfc52) drop-shadow(0 0 15px #2dfc52);
  } 
  /* 最后添加一个hvoer效果！ */