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

前言：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样式，是非常简单的，只要记住关键属性，多上手，多练就很好记住！

CSS如何动态下拉div盒子、移动div盒子和展开div盒子相关推荐

利用HTML，CSS实现动态下拉菜单
利用HTML,CSS实现动态下拉菜单 HTML部分 CSS部分静态部分动态部分三角符号运行效果 HTML部分 <!DOCTYPE html> <html><hea ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...
css div 下拉框内容自适应,div+css模拟select下拉框
无标题文档 .mod_select ul{margin:0;padding:0;} .mod_select ul:after{ display: block; clear: both; visibil ...
css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
css案例_下拉三角翻转
css案例_下拉三角翻转 css案例_下拉三角翻转常见于下拉导航 .表单下拉多选等场景. 原理:三角可以看成是一个只具有右边框和底部边框的方形盒子通过 transform: rotate(45de ...
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
css实现列表下拉菜单 by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS t ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单 1.效果鼠标移到[搜索引擎],自动弹出其下拉菜单,在下拉菜单里移动,光条随之移动. 2.代码 <!DOCTYPE html> <html lang=&q ...

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

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

一、关键属性

二、动态下拉

三、动态移动

四、动态移动展开

CSS如何动态下拉div盒子、移动div盒子和展开div盒子相关推荐

最新文章

热门文章