Web_HTML+CSS_First_Asignment
Assignment_01:
- 使用HTML+CSS做出以下网页页面：
<!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/reset.css">
<style>
.bang {
width: 280px;
height: 620px;
background-color: #EEE;
border-radius: 3px;
box-shadow: 2px 2px 5px #999;
}
.bang li {
width: 280px;
height: 41px;
/* border: 1px solid red; */
line-height: 41px;
}
.bang li > span {
margin-left: 30px;
}
.bang li.active {
width: 280px;
height: 170px;
}
.bang > li > img {
width: 110px;
/* margin: 30px; */
margin-left: 25px;
padding-top: 25px;
float: left;
}
.img-left {
width: 120px;
height: 120px;
float: right;
margin-top: 25px;
}
.img-left > p {
width: 120px;
height: 50px;
margin-top: 20px;
}
.img-left > p >img {
float: left;
}
.even {
background-color: #EEE;
}
.odd {
background-color: #DDD;
}
.all {
text-align: right;
/* margin-right: 10px; */
}
.all > a{
color: #222;
}
</style>
</head>
<body>
<ul class="bang">
<li class="active even">
<img src="img/mv.png" alt="">
<div class="img-left">
<h3>飙升榜</h3>
<p>
<img src="img/play.png" alt="">
<img src="img/play.png" alt="">
</p>
</div>
</li>
<li class="odd">
<span>1 不重逢</span>
</li>
<li class="even">
<span>2 温暖的房子</span>
</li>
<li class="odd">
<span>3 永不熄灭的火焰</span>
</li>
<li class="even">
<span>3 永不熄灭的火焰</span>
</li>
<li class="odd">
<span>3 永不熄灭的火焰</span>
</li>
<li class="even">
<span>3 永不熄灭的火焰</span>
</li>
<li class="odd">
<span>3 永不熄灭的火焰</span>
</li>
<li class="even">
<span>3 永不熄灭的火焰</span>
</li>
<li class="odd">
<span>3 永不熄灭的火焰</span>
</li>
<li class="even">
<span>3 永不熄灭的火焰</span>
</li>
<li class="odd all">
<a href="#">查看全部></a>
</li>
</ul>
</body>
</html>Assignment_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="/Web前端 内容/code/learn/CSS/reset.css">
<style>
body{
background-color: #ccc;
}
@keyframes taijiRotate {
from {
transform: rotate(0deg);
}to {
transform: rotate(360deg);
}
}
.taiji{
width: 0px;
height: 300px;
border-left: 150px solid white;
border-right: 150px solid black;
/* 圆角效果 */
border-radius: 50%;
transition: all 0.4s;
animation: taijiRotate linear 5s infinite;
}
.taiji::before{
content: "";
display: block;
width: 50px;
height: 50px;
border: 50px solid white;
border-radius: 50%;
background-color: black;
margin-left: -74px;
}
.taiji::after{
content: "";
display: block;
width: 50px;
height: 50px;
border: 50px solid black;
border-radius: 50%;
background-color: white;
margin-left: -74px;
}
.taiji:hover{
box-shadow: 18px 0px 30px rebeccapurple,
-18px 0px 30px rgb(9, 185, 212),
0px 18px 30px rgb(210, 9, 147),
0px -18px 30px rgb(232, 220, 8);
}
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>Assignment_03:
- 发光按钮的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发光按钮测试</title>
<style type="text/css">
html {
font-size: 200px;
}
* {
margin: 0;
padding: 0;
background: #ccc;
}
.btn {
margin: 200px;
height: 50px;
width: 200px;
border: none;
background: #8260DE;
border-radius: 1rem;
text-transform: uppercase;
transition: all 0.5s;
}
.btn:hover {
box-shadow: 5px 0px 20px #8260DE,
-5px 0px 20px #8260DE,
0px 5px 20px #8260DE,
0px -5px 20px #8260DE;
background: #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn">this a button</button>
</body>
</html>
Assignment_04:
- 旋转立方体案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个旋转立方体的实现</title>
<style>
body {
/* 3d视距，如果没有，无法透视出3D效果 */
perspective: 5000px;
}
.container {
width: 200px;
height: 200px;
margin: 300px auto;
/*border: 1px solid red;*/
position: relative;
/* 以3D显示效果 */
transform-style: preserve-3d;
/* 开始执行动画 */
animation: myRotate 5s 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 {
/*底部的一张图片*/
/* 需要缩进200px，作为底部 */
transform: translateZ(-200px);
}
.container>img:last-child {
/* 顶部的一张图片*/
/*display: none;*/
}
.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 class="container">
<img src="img/cjq01.png" alt="">
<img src="img/cjq02.png" alt="">
<img src="img/cjq03.png" alt="">
<img src="img/cjq04.png" alt="">
<img src="img/cjq05.png" alt="">
<img src="img/cjq06.png" alt="">
</div>
</body>
</html>