css案例_下拉三角翻转

css案例_下拉三角翻转常见于下拉导航、表单下拉多选等场景。

原理：三角可以看成是一个只具有右边框和底部边框的方形盒子通过 transform: rotate(45deg); 顺时针翻转45度得来的。当触摸时通过 transform: rotate(225deg); 旋转225度（原本的45度再向上翻转180度）得来。

html部分：

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

css部分：

div {/* 本盒子用来模拟需要添加三角的表单、下拉链接 */position: relative;width: 235px;height: 35px;border: 1px solid black;
}/* after伪元素 */
div::after {position: absolute;top: 12px;right: 12px;content: "";width: 8px;height: 8px;border-right: 2px solid #000;border-bottom: 2px solid #000;transform: rotate(45deg);/* 添加过渡 */transition: all .4s;
}div:hover::after {transform: rotate(225deg);
}

css案例_下拉三角翻转相关推荐

css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
css实现列表下拉菜单 by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS t ...
css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
利用HTML，CSS实现动态下拉菜单
利用HTML,CSS实现动态下拉菜单 HTML部分 CSS部分静态部分动态部分三角符号运行效果 HTML部分 <!DOCTYPE html> <html><hea ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...
利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单 1.效果鼠标移到[搜索引擎],自动弹出其下拉菜单,在下拉菜单里移动,光条随之移动. 2.代码 <!DOCTYPE html> <html lang=&q ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...

css案例_下拉三角翻转

css案例_下拉三角翻转

css案例_下拉三角翻转相关推荐

最新文章

热门文章