0
点赞
收藏
分享

微信扫一扫

HTML+CSS使用

yellowone 2023-12-23 阅读 31

一、旋转太极图

HTML+CSS使用_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>

* {
    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+CSS使用_css_02

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


三、页面灰度化

HTML+CSS使用_html_03

HTML+CSS使用_css_04


<!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立方体相册

HTML+CSS使用_css_05

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


五、发光按钮组

HTML+CSS使用_css_06

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




举报

相关推荐

HTML+CSS

html+css 案例

HTML+CSS 2022.4.22

【html+css】阴影

HTML+CSS基础

HTML+CSS笔记

前端html+css笔记

HTML+CSS笔记4

html+css学习(中)

0 条评论