css基础练习

最新推荐文章于 2024-07-02 17:48:40 发布
最新推荐文章于 2024-07-02 17:48:40 发布
阅读量190 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yfy0308/article/details/135177115
版权

一，旋转太极

效果展示：

实现代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
        background-color: cornsilk;
       }

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


        .taiji{
            width: 0px;
            height: 200px;
            border-left: 100px solid #000000;
			border-right: 100px solid #FFFFFF;
            border-radius: 50%;
            position: relative;
            animation: myRotate 2s linear infinite;

        }
        .t1{
            width: 50px;
            height: 50px;
            background-color: black;
            border: 25px solid white;
            border-radius: 50%;
            position: absolute;
            left: -50px;
            bottom: 0px;
        }
        .t2{
            width: 50px;
            height: 50px;
            background-color: white;
            border: 25px solid black;
            border-radius: 50%;
            position: absolute;
            left: -50px;    
        }


    </style>
</head>
<body>
    <div class="taiji">
        <div class="t1"></div>
        <div class="t2"></div>
    </div>
    
</body>
</html>

二，下拉菜单

效果展示：

实现代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        ul{
            list-style: none;  
        }
        li{
            width: 100px;
            height: 30px;
            float: left;
            text-align: center;
            line-height: 30px;
            background: rgb(43, 43, 66);
        }
        .box{
            display: none;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 30px;
        }     
        .li1{
            position: relative;
        }
        .li1:hover .b1{
            display: block;
        }
        p{
            width: 99px;
            height: 32px;
            background: rgb(43, 43, 66);
            margin: 0;
        }
        a{
            color: aliceblue;
            text-decoration: none;
        }
    </style>
</head>
<body>
      <div class="d1">
        <ul>
            <li class="li1">
                <a href="https://www.bilibili.com/">父级菜单1</a>
                <div class="box b1">
                    <p><a href="#">子级菜单1</a></p>
                    <p><a href="#">子级菜单2</a></p>
                    <p><a href="#">子级菜单3</a></p>
                </div>
        </li>
        <li class="li1">
            <a href="https://www.bilibili.com/">父级菜单2</a>
            <div class="box b1">
                    <p><a href="#">子级菜单1</a></p>
                    <p><a href="#">子级菜单2</a></p>
                    <p><a href="#">子级菜单3</a></p>
            </div>
       </li>
        <li class="li1">
            <a href="https://www.bilibili.com/">父级菜单3</a>
             <div class="box b1">
                <p><a href="#">子级菜单1</a></p>
                <p><a href="#">子级菜单2</a></p>
                <p><a href="#">子级菜单3</a></p>
             </div>
        </li>
            
      </div>
</body>
</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>
    <style>
        *{
            margin: 0;
        }
        html{
         filter: grayscale(1);
        }
    .father{
        margin: auto;
        border: 1px solid red;
        width: 1300px;
        height: 1500px;
    }    
    .goods{
      border: 1px solid red;
      width: 270px;
      height: 410px;
      display: inline-block;
      border-radius: 15px;
    }
    img{
        width: 270px;
    }
    p{
        margin-top: 10px;
    }
    .p1{
        color: red;
        font-size: 20px;
    }
    
    
</style>
</head>
<body>
    <div class="father">
    <div class="goods">
       <img src="./images/rem.webp">
       <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
       <p class="p1">￥999</p>
       <p class="p2">动漫游戏模型店</p>
    </div>

    <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

     <div class="goods">
        <img src="./images/rem.webp">
        <p>[现货GSC]从零开始的异世界生活雷姆1/4手办周边蕾姆动漫摆件</p>
        <p class="p1">￥999</p>
        <p class="p2">动漫游戏模型店</p>
     </div>

</div>



    
</body>
</html>

四，3D立体旋转 

效果展示：

实现代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 5000px;
        }
        .container{
            width: 200px;
            height: 200px;
            margin: 300px auto;
            position: relative;
            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/a.jpg">
        <img src="img/b.jpg">
        <img src="img/c.jpg">
        <img src="img/d.jpg">
        <img src="img/e.jpg">
        <img src="img/f.jpg">
    </div>




    
</body>
</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>
    <style>
        body{
           background: black;
        }
        .box1{
            margin: 200px auto;
            width: 500px;
            height: 500px;
        }
        .box{
            width: 120px;
            height: 60px;
            margin: 50px auto;        
        }
        .d1{
            border: 3px solid rgb(0, 255, 55);
            position: relative;
        }
        .d2{
            border: 3px solid rgb(240, 108, 14);
            position: relative;
        }
        .d3{
            border: 3px solid rgb(17, 130, 236);
            position: relative;
        }
        .D1{
            width: 60px;
            height: 30px;
            border: 4px solid black;
            position: absolute;
            left: -3px;
            top: 26px;
        }
        .D2{
            width: 60px;
            height: 30px;
            border: 4px solid black;
            position: absolute;
            right: -3px;
            top: -3px;
        }
        .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: rgb(0, 255, 55);
            color: rgb(5, 53, 78);
            box-shadow: 5px 5px 5px rgb(0, 255, 55);
        }
        .b2{
            background-color: rgb(240, 108, 14);
            color: rgb(5, 53, 78);
            box-shadow: 5px 5px 5px rgb(240, 108, 14);
        }
        .b3{
            background-color: rgb(17, 130, 236);
            color: rgb(5, 53, 78);
            box-shadow: 5px 5px 5px rgb(17, 130, 236);
        }
        button:hover{
            width: 105px;
            height: 52.5px;
            border-radius: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box d1"><div class="D1"></div><div class="D2"></div><button class="button b1">点赞</button></div>
        <div class="box d2"><div class="D1"></div><div class="D2"></div><button class="button b2">投币</button></div>
        <div class="box d3"><div class="D1"></div><div class="D2"></div><button class="button b3">收藏</button></div>
    </div>
</body>
</html>

css练习
ZhaoXuWen23的博客
01-29 176
伪类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a:link{ color: red; }{#初始值是红色#} a:visited { color: blue; }{
css基础练习.rar
09-07
"css基础练习.rar"可能包含了用于教学或自我学习的实例，比如`chapter2.html`可能是教程的第二章节，涵盖了更深入的CSS知识，而`images`目录则可能包含与HTML页面相关的图片资源。 1. **CSS选择器**：CSS的选择器是...
CSS练习题
道阻且长，行则将至。
03-08 645
CSS练习题 人们都说抖音记录美好生活，我说博客记录美好生活！随手练练CSS 1、margin——控制网页元素的位置，页面效果如下： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>控制网页元素的位置</title> <link href="style/2-7.css" rel="stylesheet" type="text/css">
CSS练习
S_numb的博客
01-01 487
1. QQ导航栏 html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ导航栏</title> <link rel="stylesheet" href="css/style.css"&g...
se-wdp-ue:一个包含所有WDP3 202021 HTML和CSS基础练习资源的资源库
05-04
WDP3练习– HTML和CSS基础 在三个练习中，我们将构建一个小的投资组合网站，包括一个主页和一些子页面。 您将需要的工具 您选择的文本编辑器，例如Visual Studio Code，Atom，Sublime Text，WebStorm等。 您选择的...
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
前端小白的HTML-CSS基础练习
2. CSS基础： - CSS选择器：元素选择器、类选择器、ID选择器、属性选择器、伪类选择器等。 - 盒模型：边距（margin）、边框（border）、填充（padding）、内容（content）。 - 布局技术：浮动（float）、定位...
div css练习div css练习div css练习div css练习
04-20
本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用能力。 首先，`div`元素在HTML中是一个通用的容器，它可以包含其他HTML元素，常用于组织和划分页面结构。通过设置div的样式，我们可以控制其在...
css的练习
最新发布
weixin_67252311的博客
07-02 500
根据下列要求，给index.html文件中的内容添加样式。注：具体颜色可以用工具拾取，或者颜色相近即可。页面效果如上图。
CSS的简单练习
zhangtaoloving的专栏
10-19 476
.Div{         width: 1050px;         height: 580px;         /*background-color: red;*/         margin: auto;         margin-top: 20px;         border: 1px solid;         }          .div1{    
HTML/CSS 练习
MartinYP的博客
07-12 726
html/css 实践练习 学习记录
css页面练习
qq_73831912的博客
07-10 150
【代码】css页面练习。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值