CSS3制作下拉框效果

最新推荐文章于 2021-10-19 14:42:03 发布

Kk-87

最新推荐文章于 2021-10-19 14:42:03 发布

阅读量849

点赞数

分类专栏： css 文章标签： css 下拉框

本文链接：https://blog.csdn.net/qq_36712191/article/details/64443722

版权

这里利用的是伪元素的下拉三角效果,三角的两边分别是一个盒子的相邻两边,让盒子定位到需要的位置,并利用transform的rotte属性旋转45度.

transform: rotate(45deg);

给父盒子添加一个子盒子,并给父盒子添加超出隐藏属性.让子盒子隐藏.

overflow: hidden;

给父盒子添加伪类hover,当鼠标经过父盒子的时候,将overflow的值改为默认值visible,让子盒子显示,并让三角旋转225度,让三角朝上.

.box:hover::after {
    transform: rotate(225deg);
}

   
   
   
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul {
       
                list-style: none;
            }
    
            a {
       
                text-decoration: none;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kk-87

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3制作下拉框效果

这里利用的是伪元素的下拉三角效果,三角的两边分别是一个盒子的相邻两边,让盒子定位到需要的位置,并利用transform的rotte属性旋转45度.transform: rotate(45deg);给父盒子添加一个子盒子,并给父盒子添加超出隐藏属性.让子盒子隐藏.overflow: hidden;给父盒子添加伪类hover,当鼠标经过父盒子的时候,将overflo
复制链接

扫一扫