web第三次作业

最新推荐文章于 2024-09-15 23:59:26 发布

超级修勾¥

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量564

点赞数 12

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_61572870/article/details/135204175

版权

一、旋转太极图

HTML

<!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>

CSS

* {
    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; 
}

二、下拉菜单

HTML

<!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">
</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>

CSS

*{
    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;
}

三、页面灰度化

HTML

<!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">
</head>
<body>
        <p class="zhang">
            精准与否就是屠宰与手术的区别。
        </p>
        <p class="ye">
            谎言不会伤人，真相才是快刀，合适的话语，胜给锋利的刀子。
        </p>
        <p class="mian">
            优雅，永不过时。
        </p>
        <p class="wen">
            世界既不黑也不白，而是一道精致的灰。
        </p>
        
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}
body {
	filter: grayscale(100%);
}
.zhang{
    color: red;
}
.ye{
    color: aquamarine;
}
.mian{
    color: green;
}
.wen{
    color: chartreuse;
}

四、3D立方体相册

HTML

<!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="./3D立方体图册.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>

CSS

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);
}

五、发光按钮组

HTML

<!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">
</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>

CSS

*{
    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;
}