欢迎关注b站：小淼前端

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

欢迎关注b站：小淼前端

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

欢迎关注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.scrollYif(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效果！ */