欢迎关注b站：小淼前端
有更多的视频讲解+源代码可领取哦~
欢迎关注b站：小淼前端
有更多的视频讲解+源代码可领取哦~
欢迎关注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=" Python"> Python </a>
</li>
<li style="--clr:#ff6493">
<a href="#" data-text=" Java"> Java </a>
</li>
<li style="--clr:#ffdd1c">
<a href="#" data-text=" C++/C#"> C++/C# </a>
</li>
<li style="--clr:#00dc82">
<a href="#" data-text=" Javascript"> Javascript </a>
</li>
<li style="--clr:#dc00d4">
<a href="#" data-text=" Php"> Php </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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/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效果！ */
本文转载自: https://blog.csdn.net/lbcyllqj/article/details/126909527
版权归原作者 lqj_本人 所有， 如有侵权，请联系我们删除。
版权归原作者 lqj_本人 所有， 如有侵权，请联系我们删除。