css案例_下拉三角翻转
生活随笔
收集整理的這篇文章主要介紹了
css案例_下拉三角翻转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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案例_下拉三角翻转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 触觉智能分享-Android ADB工具
- 下一篇： VC其它-如果将VC中的字体换成Verd