前端,字体图标,盒子显隐,2d形变,盒子阴影

最新推荐文章于 2021-04-24 01:23:53 发布

weixin_30915275

最新推荐文章于 2021-04-24 01:23:53 发布

阅读量114

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/robert-zhou/p/10309197.html

版权

---恢复内容开始---

字体图标
1.将font-awesome-4.7.0文件夹放入项目内
2.在html head中连接
3.在body中导入

盒子显隐

1.使用高度显隐
<p>---恢复内容结束---</p>
  <style>
        div{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin-top: 10px;
            font:900 18px/100px "STsong";
            text-align: center;
        }
        .div1{
            position: relative;
        }
        .div2{
            height:0;
            overflow: hidden;
            position: absolute;
            transition: .3s;
        }
        /*此处不设置兄弟标签的话设置不了div2*/
        .div1:hover ~ .div2{
            height:100px
        }
    </style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
</body>
2.使用display显隐
       .div2{
            display: none;
            position: absolute;
        }
        /*此处不设置兄弟标签的话设置不了div2*/
        .div1:hover ~ .div2{
            display: block;
        }
    </style>
3.使用opacity(透明度)
        .div2{
            opacity: 0;
            position: absolute;
            transition: 0.3s;
        }
        /*此处不设置兄弟标签的话设置不了div2*/
        .div1:hover ~ .div2{
            opacity: 1;
        }
总结:display消失的时候不占位,显示的时候占位
        opacity消失,显示都占位
        height显示的时候占位
        height和opacity有动画效果,display没有

overflow

解决: 超出盒子规定的显示区域外的内容的处理方式
/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/
/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/
/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/

伪类边框

设计边框=>在页面中不占位=>让其定位处理=>脱离文档流=>不占位层级结构复杂
设计一个不占位的边框=>伪类:before|after
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    /*给伪类边框提供定位参考系*/
    position: relative;
}
.box:before {
    content: "";
    
    /*上下边框*/
    width: 180px;
    height: 1px;
    background-color: green;
    /*控制边框位置*/
    position: absolute;
    bottom:0px;
    left: 10px;
    
}

#只能设置两个伪类边框

盒子阴影
```python
box-shadow: x轴偏移 y轴偏移虚化程度阴影宽度阴影颜色, ...;
一个盒子可以拥有多套阴影

2d形变

形变参考点

transform-origin: x轴坐标 y轴坐标

形变属性

transform: rotate() translate() scale();

旋转角度(deg) 偏移距离(px) 缩放比例(无单位)

转载于:https://www.cnblogs.com/robert-zhou/p/10309197.html

weixin_30915275

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端,字体图标,盒子显隐,2d形变,盒子阴影

---恢复内容开始---字体图标1.将font-awesome-4.7.0文件夹放入项目内2.在html head中连接 3.在body中导入盒子显隐1.使用高度显隐<p>---恢复内容结束---</p> <style> div{ width: 100px; height...
复制链接

扫一扫