CSS如何动态下拉div盒子、移动div盒子和展开div盒子

最新推荐文章于 2023-07-27 11:05:11 发布

半杯可可

最新推荐文章于 2023-07-27 11:05:11 发布

阅读量1.6k

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_67840539/article/details/130739942

版权

前言：css是层叠样式表，是一种用于网页设计的语言，它可以为HTML和XML文档添加样式和布局。我们通过css可以控制文本的颜色、字体大小、字体间距等等。css是强大的工具，它可以使我们的网页更加的美观，提高用户的阅读体验！

动态下拉、移动和动态移动展开

如何动态下拉div盒子、移动div盒子和展开div盒子？

关键属性
动态下拉
动态移动
动态移动展开

一、关键属性

用的的几个关键的属性

position用于指定html元素在文档的位置，css提供了postion五种的属性值，这里不过多解释

只需要知道：relative 是绝对路径值

position:relative ;

transition给元素添加动态效果，通过这个 transition属性你可以指定元素在什么时候更改状态

0.3表示在0.3秒时候元素该发生什么

transition: all 0.3s ease-out;

opacity不透明度，它可以给元素设置透明程度

opacity: .8;

transform属性用于对元素进行变换，比如左变换，右边变换，上下变换，展开、合并变换等

它可以实现很多有趣的效果

translateX 是向右移动

translateY 是向下移动

还有很多，可以百度了解

transform:translateX(200px)

二、动态下拉

直接上代码，自己c+v测试

<!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>
       
        #div1{
            border:1px solid red;
            background: blue;
            width: 300px;
            height: 300px;
            cursor: pointer;
            float: left;
        }
        #div2{
            border:1px solid black ;
            background:black;
            width: 100px;
            height: 0px;
            position:relative ;
            transition: all 0.3s ease-out;
        }

        
        #div1:hover #div2{
            background: green;
            opacity: .8;
            height: 200px;
   
        }


    </style>
</head>
<body>   
 <!--下拉展开-->
<div class = "div1" id =  "div1">

    <div calss = "div2" id  = "div2">


    </div>  
    
</div>

</body>
</html>

三、动态移动

直接上代码，自己c+v测试

<!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>
       
        #div3{
            border:1px solid red;
            background: blue;
            width: 300px;
            height: 300px;
            cursor: pointer;
            margin-left: 500px;
            float: left;
            
        }
        #div4{
            border:1px solid black ;
            background:black;
            width: 100px;
            height: 200px;
            position:relative ;
            transition: all 0.3s ease-out;
        }

        
        #div3:hover #div4{
            background: green;
            opacity: .8;
            transform:translateX(200px)
   
        }

    </style>
</head>
<body>   


<!--动态移动-->
<div  id =  "div3">

    <div id  = "div4">


    </div>  
    
</div>

</body>
</html>

四、动态移动展开

直接上代码，自己c+v测试

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

        #div5{
            border:1px solid red;
            background: blue;
            width: 300px;
            height: 300px;
            cursor: pointer;

            float:right;
            
        }
        #div6{
            border:1px solid black ;
            background:black;
            width: 0px;
            height: 200px;
            position:relative ;
            transition: all 0.3s ease-out;
        }

        
        #div5:hover #div6{
            background: green;
            opacity: .8;
            width: 100px;
            transform:translateX(200px)
   
        }

     

    </style>
</head>
<body>   
<!--动态移动展开-->
<div  id =  "div5">

    <div id  = "div6">


    </div>  
    
</div>

</body>
</html>

总结：这些css样式，是非常简单的，只要记住关键属性，多上手，多练就很好记住！

半杯可可

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS如何动态下拉div盒子、移动div盒子和展开div盒子

css是层叠样式表，是一种用于网页设计的语言，它可以为HTML和XML文档添加样式和布局。我们通过css可以控制文本的颜色、字体大小、字体间距等等。css是强大的工具，它可以使我们的网页更加的美观，提高用户的阅读体验！动态下拉、移动和动态移动展开。
复制链接

扫一扫