HTML+CSS练习

最新推荐文章于 2024-03-18 11:28:08 发布

疯狂的rabbit.

最新推荐文章于 2024-03-18 11:28:08 发布

阅读量62

点赞数

分类专栏： Web前端文章标签： html css 前端 web

本文链接：https://blog.csdn.net/m0_61665967/article/details/135182883

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、旋转太极

代码：

<!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="太极">

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

css代码：

*{
    background: #ccc;
}

.太极 {
    width: 0px;
    height: 300px;
    border-radius: 50%;
    border-right:150px solid white;
    border-left:150px solid black;
    animation: Routor 5s linear infinite;
}

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

.太极::before{
    display: block;
    content: "";
    background:white;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 50px solid black;
    margin-left: -72px;
}
.太极::after{
    display: block;
    content: "";
    background: 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="nav">
        <ul>
            <li class="l1">
                <a href="#">父菜单1</a>
                <div class="l2">
                    <p><a href="#">子菜单1</a></p>
                    <p><a href="#">子菜单2</a></p>
                </div>
        </li>
        <li class="l1">
            <a href="#">父菜单2</a>
            <div class="l2">
                    <p><a href="#">子菜单1</a></p>
                    <p><a href="#">子菜单2</a></p>
            </div>
       </li>
        <li class="l1">
            <a href="#">父菜单3</a>
             <div class="l2">
                <p><a href="#">子菜单1</a></p>
                <p><a href="#">子菜单2</a></p>
             </div>
        </li>
        </ul>
      </div>
</body>
</html>

css代码：

* {
    margin: 0;
    padding: 0;
}
a {
    color: white;
    font-size: 18px;
    font-weight: bolder;
    text-decoration: none;
}
ul, ol {
    list-style: none;
}
.nav{
    width: 900px;
    height: 64px;
    background: black;
}
li{
    width: 100px;
    height: 64px;
    float: left;
    line-height: 64px;
    background: black;
}
.box{
    display: none;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0px;
    top: 20px;
    margin-top: 20px;
}     
.l1{
    position: relative;
}
.l1:hover .l2{
    display: block;
}
p{
    width: 100px;
    height: 64px;
    background: black;
    margin: 0;
}

三、页面灰度化

代码：

<!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>淘宝案例</title>
    <!-- <link rel="stylesheet" href="css/reset.css"> -->
    <link rel="stylesheet" href="css/淘宝商品.css">
</head>
<body>
    <div class="content">
        <div class="goods">
            <img src="img/冬季衣服.webp" alt="">
            <p class="title">
                <a href="#">棉衣外套男士，冬款加绒加厚保暖，欢迎购买...</a>    
            </p>
            <p class="price">
                <span>￥299.99</span>
                <span>江苏&nbsp;&nbsp;苏州</span>
            </p>
            <p >
                xx旗舰店欢迎您
            </p>
        </div>

        <div class="goods">
            <img src="img/冬季衣服.webp" alt="">
            <p class="title">
                <a href="#">棉衣外套男士，冬款加绒加厚保暖，欢迎购买...</a>    
            </p>
            <p class="price">
                <span>￥299.99</span>
                <span>江苏&nbsp;&nbsp;苏州</span>
            </p>
            <p >
                xx旗舰店欢迎您
            </p>
        </div>

        <div class="goods">
            <img src="img/冬季衣服.webp" alt="">
            <p class="title">
                <a href="#">棉衣外套男士，冬款加绒加厚保暖，欢迎购买...</a>    
            </p>
            <p class="price">
                <span>￥299.99</span>
                <span>江苏&nbsp;&nbsp;苏州</span>
            </p>
            <p >
                xx旗舰店欢迎您
            </p>
        </div>

        <div class="goods">
            <img src="img/冬季衣服.webp" alt="">
            <p class="title">
                <a href="#">棉衣外套男士，冬款加绒加厚保暖，欢迎购买...</a>    
            </p>
            <p class="price">
                <span>￥299.99</span>
                <span>江苏&nbsp;&nbsp;苏州</span>
            </p>
            <p >
                xx旗舰店欢迎您
            </p>
        </div>
    </div>
</body>
</html>

css代码：

* {
    margin: 0;
    filter: greyscale(1);
}

.content {
    width: 1300px;
    height: 2000px;
    border: 1px solid #aaa;
    margin: auto;
}
.goods {
    width: 270px;
    height: 410px;
    border: 1px solid #aaa;
    border-radius: 10px;
    cursor: pointer;
    float: left;
    margin: 10px 22px;
}
.goods:hover {
    border: 1px solid orange;
}
.goods > img {
    width: 270px;
}
p.title {
    height: 50px;
    margin-top: 5px;
}
p.title > a {
    font-size: 18px;
    color: #222;
    text-decoration: none;
}
p.title > a::before {
    content: "天猫";
    display: inline-block;
    width: 28px;
    font-size: 13px;
    color: white;
    background-color: #FF0036;
}
.price {
    margin: 10px 0px;
}
.price>span:first-child {
    font-size: 20px;
    color: orange;
}
.price>span:last-child {
    font-size: 14px;
    color: #aaa;
    margin-left: 20px;
}
.goods>p:last-child {
    margin-top: 15px
}

四、3D立方体旋转

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>旋转立方体相册</title>
    <link rel="stylesheet" href="../css/旋转立方体相册.css">
</head>
<body>
    <div class="container">
        <img src="../豆瓣电影/movie1.jpg" alt="图1">
        <img src="../豆瓣电影/movie2.jpg" alt="图2">
        <img src="../豆瓣电影/movie3.jpg" alt="图3">
        <img src="../豆瓣电影/movie4.jpg" alt="图4">
        <img src="../豆瓣电影/movie5.jpg" alt="图5">
        <img src="../豆瓣电影/movie6.jpg" alt="图6">
    </div>
</body>
</html>

css代码：


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

五、发光按钮组

代码：

<!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="box1">
        <div class="box d1"><button class="button b1">按钮1</button></div>
        <div class="box d2"><button class="button b2">按钮2</button></div>
        <div class="box d3"><button class="button b3">按钮3</button></div>
    </div>
</body>
</html>

css代码：

body{
    background: wheat;
 }
 .box1{
     margin: 200px auto;
     width: 500px;
     height: 500px;
 }
 .box{
     width: 120px;
     height: 60px;
     margin: 50px auto;        
 }
 .d1{
     position: relative;
 }
 .d2{
     position: relative;
 }
 .d3{
     position: relative;
 }
 .button{
     border: 1px solid white;
     border-left: none;
     border-top: none;
     width: 100px;
     height: 50px;
     border-radius: 30px;
     font-size: 25px;
     display: block;
     margin: 5px auto;  
     -webkit-box-reflect: below 2px linear-gradient(transparent,transparent 20%,rgba(15, 14, 14, 0.8));    
 }
 .b1{
     background-color: yellowgreen;
     color:white;
     box-shadow: 5px 5px 5px yellowgreen;
 }
 .b2{
     background-color: red;
     color: white;
     box-shadow: 5px 5px 5px red;
 }
 .b3{
     background-color: blue;
     color: white;
     box-shadow: 5px 5px 5px blue;
 }
 button:hover{
     width: 105px;
     height: 52.5px;
     border-radius: 30px;
 }