一、旋转太极图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转太极图</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div class="taiji">
</div>
</body>
</html>* {
margin: 0;
padding: 0;
background-color: #ccc;
}
.taiji{
width: 0;
height: 300px;
border-left: 150px solid #000000; /* 设置左边框样式 */
border-right: 150px solid #FFFFFF; /* 设置右边框样式 */
border-radius: 50%; /* 角半径50度 */
animation: myRotate 2s linear infinite;
/* 将myRotate这个动画效果应用于此，时间为两秒钟，速度为线性，循环方式为无限循环 */
}
@keyframes myRotate { /* 定义帧动画 名字是myRotate */
from{
transform: rotate(0deg); /* 旋转效果 初始度数 */
}
to{
transform: rotate(360deg);
}
}
.taiji::before{
/*创建一个伪元素，并设置其显示属性为块级元素（block）。同时，使用 content 属性为空字符串，表示该伪元素没有内容*/
display: block;
content: "";
background-color: white;
height: 50px;
width: 50px;
border-radius: 50%;
border: 50px solid black;
margin-left: -72px; /*左边距-72 即超出父容器72px*/
}
.taiji::after{
display: block;
content: "";
background-color: black;
height: 50px;
width: 50px;
border-radius: 50%;
border: 50px solid white;
margin-left: -72px;
}二、下拉菜单
（只做了俩按钮）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div class="top">
<table class="a">
<tbody>
<tr>
<td class="center">
<table id="">
<tr>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 首页 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 校情总揽
<div class="fontstyle57559-content">
<span><a href="#" style="text-decoration: none;">学校简介</a></span>
<span><a href="#" style="text-decoration: none;">现任领导</a></span>
<span><a href="#" style="text-decoration: none;">历史沿革</a></span>
<span><a href="#" style="text-decoration: none;">领导关怀</a></span>
<span><a href="#" style="text-decoration: none;">延大名人</a></span>
<span><a href="#" style="text-decoration: none;">延大校训</a></span>
<span><a href="#" style="text-decoration: none;">延大校歌</a></span>
<span><a href="#" style="text-decoration: none;">学校标志</a></span>
<span><a href="#" style="text-decoration: none;">延大校历</a></span>
</div>
</span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 机构设置
<div class="fontstyle57559-content">
<span><a href="#" style="text-decoration: none;">党群机构</a></span>
<span><a href="#" style="text-decoration: none;">行政机构</a></span>
<span><a href="#" style="text-decoration: none;">教学单位</a></span>
<span><a href="#" style="text-decoration: none;">业务部门</a></span>
<span><a href="#" style="text-decoration: none;">科研机构</a></span>
<span><a href="#" style="text-decoration: none;">附属部门</a></span>
</div>
</span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 人才培养 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 招生就业 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 科学研究 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 师资队伍 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 党建思政 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 学风建设 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 图书馆 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td class="po">
<a href="#">
<span class="fontstyle57559"> 校友总会 </span>
</a>
</td>
<td class="leaderfont57559">|</td>
<td>
<a href="#">
<span class="fontstyle57559"> 公共服务 </span>
</a>
</td class="po">
<td class="leaderfont57559">|</td>
<td>
<a href="#">
<span class="fontstyle57559"> 网办大厅 </span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.a{
height: 46px;
width: auto;
border: 0;
margin: auto;
background-color: #8f000b;
text-decoration: none;
}
.center{
width: 100%;
height: 20px;
font-family: 微软雅黑;
font-size: 14px;
color: #fff;
}
.top{
width: 100%;
height: 46px;
background-color: #8f000b;
}
span.fontstyle57559{
font-size: 11pt;
text-decoration: none;
font-family: 微软雅黑;
color: #ffffff;
line-height: 160%;
position: relative;
}
a{
text-decoration: none;
}
#po{
position: relative;
display: inline-block;
}
div.fontstyle57559-content{
display: none; /*隐藏*/
width: 100px;
position: absolute;
background-color: grey;
z-index: 1;
}
/* span.fontstyle57559:hover div.fontstyle57559-content{
display: block;
} */
.fontstyle57559-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.po:hover div.fontstyle57559-content{
display: block;
}
三、页面灰度化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灰度化页面</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<p class="zhang">
在人生的旅途中，我们常常会遭遇各种挫折和困难。有些人因此而沮丧和颓废，但也有一些人能够以积极的心态面对这些挑战。这些人坚信，只要坚持努力和奋斗，就一定能够克服一切困难并取得成功。
</p>
<p class="ye">
一个有追求的人，永远不会满足于现状。他会不断追求进步，不断拓展自己的能力和见识。尽管路途上会有很多曲折和坎坷，但只要坚定信心，就一定能够走向成功
</p>
<p class="mian">
人们常说，成功是一种态度，而不是一种结果。这是因为，只有拥有积极的心态和坚定的信心，才能够在面对挫折时不断前行。而如果心态不够端正，即使获得了一些成就，也可能会因为心态不稳而失去它们。
</p>
<p class="wen">
一个人如果能够以平常心面对得失，就能够更加专注于自己的目标。他不会因为一时的成功而骄傲自满，也不会因为一时的失败而沮丧颓废。这样的人会持续不断地努力，不断追求进步，直到实现自己的目标。
</p>
<div class="hui">
</div>
<div><img src="../立方体相册/img/mv2.png" id="tu"></div>
</body>
</html>*{
padding: 0;
margin: 0;
}
body {
filter: grayscale(100%);
}
.zhang{
color: red;
}
.ye{
color: aquamarine;
}
.mian{
color: green;
}
.wen{
color: chartreuse;
}
.hui{
width: 100px;
height: 100px;
background-image: radial-gradient(red, gold, red);
margin: 10px auto;
}
#tu{
display: block;
width: 400px;
margin: 10px auto;
}
四、3D立方体相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方体相册</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div class="cube">
<img src="img/mv1.png" alt="">
<img src="img/mv2.png" alt="">
<img src="img/mv3.png" alt="">
<img src="img/mv4.png" alt="">
<img src="img/mv6.png" alt="">
<img src="img/mv5.png" alt="">
</div>
</body>
</html>
body{
perspective: 5000px;
}
.cube{
width: 200px;
height: 200px;
margin: 300px auto; /* 上下边距300px，左右边距自动居中 */
position: relative;
transform-style: preserve-3d; /* 表示子元素会保留其在三维空间中的位置和变换 */
animation: myRotate 5s infinite linear;
}
@keyframes myRotate{
from{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
/* 分别绕x,y,z轴旋转角度0度 */
}
to{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.cube > img{
width: 200px;
height: 200px;
position: absolute;
}
.cube>img:first-child {
/*底部的一张图片*/
/* 需要缩进200px，作为底部 */
transform: translateZ(-200px);
}
.cube>img:last-child {
/* 顶部的一张图片*/
/*display: none;*/
}
.cube>img:nth-child(2) {
/* 左侧 */
left: -200px;
transform-origin: right; /*用于指定元素变换的原点*/
transform: rotateY(-90deg);
}
.cube>img:nth-child(3) {
/* 上侧 */
top: -200px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.cube>img:nth-child(4) {
/* 右侧 */
right: -200px;
transform-origin: left;
transform: rotateY(90deg);
}
.cube>img:nth-child(5) {
/* 下侧 */
bottom: -200px;
transform-origin: top;
transform: rotateX(-90deg);
}
五、发光按钮组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div class="fa">
<a href="#" class="dian">点赞</a>
</div>
<div class="fa">
<a href="#" class="guan">关注</a>
</div>
<div class="fa">
<a href="#" class="ping">评论</a>
</div>
<div class="fa">
<a href="#" class="shou">收藏</a>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
background-color: grey;
}
.fa {
width: 100px;
height: 100px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center; /*垂直居中*/
align-items: center;
}
a {
text-decoration: none;
display: block;
width: 140px;
height: 60px;
margin: 40px;
line-height: 60px;
text-align: center;
position: relative;
color: white;
}
/* dianzan */
.fa .dian::before{
}
.fa .dian::after{
top: 0;
left: 0;
border-right: 0;
border-bottom: 0;
}
.fa .dian:hover{
background-color: plum;
color: #000;
}
.fa .dian:hover, ::before, ::after{
width: 138px;
}
/* guanzhu */
.fa .guan::before{
}
.fa .guan::after{
top: 0;
left: 0;
border-right: 0;
border-bottom: 0;
}
.fa .guan:hover{
background-color: yellow;
color: #000;
}
.fa .guan:hover, ::before, ::after{
width: 138px;
}
/* pinglun */
.fa .ping::before{
}
.fa .ping::after{
top: 0;
left: 0;
border-right: 0;
border-bottom: 0;
}
.fa .ping:hover{
background-color: green;
color: #000;
}
.fa .ping:hover, ::before, ::after{
width: 138px;
}
/* shoucang */
.fa .shou::before{
}
.fa .shou::after{
top: 0;
left: 0;
border-right: 0;
border-bottom: 0;
}
.fa .shou:hover{
background-color: red;
color: #000;
}
.fa .shou:hover, ::before, ::after{
width: 138px;
}