WEB第三次作业-CSDN博客

本文链接：https://blog.csdn.net/2201_75913164/article/details/135206912

1.3D立方体旋转

<!DOCTYPE html>

<head>

<title>3D立方体旋转</title>

<style>

body {

perspective: 5000px;

}

.container {

width: 200px;

height: 200px;

margin: 300px auto;

position: relative;

transform-style: preserve-3d;

animation: myRotate 10s infinite linear;

}

@keyframes myRotate {

from {

transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

}

to {

transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);

}

.container>img {

width: 200px;

height: 200px;

position: absolute;

}

.container:hover >img:first-child {

transform: translateZ(-300px);

}

.container:hover >img:last-child {

transform: translateZ(100px);

}

.container:hover img:nth-child(2) {

transform: rotateY(-90deg) translateZ(100px);

}

.container:hover img:nth-child(3) {

transform: rotateX(90deg) translateZ(100px);

}

.container:hover img:nth-child(4) {

transform: rotateY(90deg) translateZ(100px);

}

.container:hover img:nth-child(5) {

bottom: -200px;

transform-origin: top;

transform: rotateX(-90deg) translateZ(100px);

}

.container>img:first-child {

transform: translateZ(-200px);

}

.container>img:last-child {

}

.container>img:nth-child(2) {

left: -200px;

transform-origin: right;

transform: rotateY(-90deg);

}

.container>img:nth-child(3) {

top: -200px;

transform-origin: bottom;

transform: rotateX(90deg);

}

.container>img:nth-child(4) {

right: -200px;

transform-origin: left;

transform: rotateY(90deg);

}

.container>img:nth-child(5) {

bottom: -200px;

transform-origin: top;

transform: rotateX(-90deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

成品图

2.旋转的太极图案

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>画太极图案</title>
       <style >
           * {
               margin: 0;
               padding: 0;
               background: #ccc;
           }
           .taiji {
               width: 0;
               height: 300px;
               border-left: 150px solid #000000;
               border-right: 150px solid #FFFFFF;
               border-radius: 50%;
               animation: myRotate 2s linear infinite;
           }

           @keyframes myRotate{
               from{transform: rotate(0deg);}
               to{transform: rotate(360deg);}
           }

           .taiji::before {
               display: block;
               content: "";
               background: white;
               height: 50px;
               width: 50px;
               border-radius: 50%;
               border: 50px solid #000000;
               margin-left: -72px;
           }
           .taiji::after {
               display: block;
               content: "";
               background: black;
               height: 50px;
               width: 50px;
               border-radius: 50%;
               border: 50px solid white;
               margin-left: -72px;
           }

       </style>
   </head>
   <body>
       <div class="taiji">

       </div>
   </body>
</html>

成品图

3.页面灰度化

<!DOCTYPE html>

<head>

<style>

html{

filter: grayscale(100%);

}

td{

vertical-align: top;}

</style>

</head>

<body>

<table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td style="font-size: 26px;;width: 400px;text-align: center;">账号密码登录</td>

</tr>

<tr>

</tr>

<tr>

"推荐使用"<a href="#">快速安全登录</a>"防止盗号"

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

"忘记密码|注册新账号|意见反馈"

</td>

</tr>

</tbody>

</table>

</td>

<td>

<table>

<tr>

</tr>

<tr>

<td>

<hr>

</td>

</tr>

<tr>

"将获得以下权限"

</td>

</tr>

<tr>

<td>

<hr>

</td>

</tr>

<tr>

<td>

"全选"

</td>

</tr>

<tr>

<td>

<hr>

</td>

</tr>

<tr>

<td>

"获得您的昵称，头像，性别及会员信息"

</td>

</tr>

<tr>

</tr>

<tr>

<td>

"授权后表明您已同意"

<a href="#">qq登录服务协议</a>

</td>

</tr>

</table>

</td>

</tr>

</tbody>

</table>

</form>

</body>

</html>

成品图

4.发光按钮

<!DOCTYPE html>

<head>

<style>

body {

display: flex;

justify-content: center;

background-color: #202020;

}

button {

position: relative;

margin-top: 300px;

padding: 20px 60px;

cursor: pointer;

transition: 0.5s all;

background-color: black;

}

button span {

color: gold;

font-size: 50px;

font-family: '正楷';

}

button:hover {

box-shadow: inset 0px 0px 25px #ff7700;

}

button:active {

margin-top: 305px;

transition: 0.2s all;

box-shadow: inset 0px 0px 25px #ffaf6a;

}

button div {

transition: 0.5s all;

position: absolute;

background-color: #ff7700;

box-shadow: 0 0 15px #ff7700, 0 0 30px #ff7700, 0 0 50px #ff7700;

}

button .top {

width: 15px;

height: 2px;

top: 0;

left: 0;

}

button .bottom {

width: 15px;

height: 2px;

bottom: 0;

right: 0;

}

button .left {

width: 2px;

height: 15px;

top: 0;

left: 0;

}

button .right {

width: 2px;

height: 15px;

right: 0;

bottom: 0;

}

button:hover .top,button:hover .bottom {

width: 100%;

}

button:hover .left,button:hover .right {

height: 100%;

}

</style>

</head>

<body>

</button>

</body>

</html>

成品图

5.下拉菜单

<!DOCTYPE html>

<head>

<h1>延安大学教学管理系统</h1>

<style>

.dropdown-btn {

background-color: rgba(0, 0, 0, 0.783);

color: white;

padding: 16px;

font-size: 20px;

border: none;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-menu {

display: none;

position: absolute;

background-color: white;

min-width: 150px;

box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.4);

z-index: 1;

}

.dropdown-menu a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-menu a:hover {

background-color: #ccccccf1;

}

.dropdown:hover .dropdown-menu {

display: block;

}

</style>

</head>

<body>

</div>

</body>

</html>