字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

字体图标

'''

fa框架: http://fontawesome.dashgame.com/

下载 => 引入css文件

引入字体图标库

<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">

设置预定好的类名

<i class="fa fa-**"></i>

'''

盒子显隐

'''

1.显示效果

display: none; # 没有任何显示效果

消失的时候在页面中不占位，显示的时候在页面中占位

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>盒子显隐</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: yellow;

            margin-top: 10px;

        }

        .d1{

            display: none;

        }

        .ctrl:hover ~ .d1{

            display: block;

        }

    </style>

</head>

<body>

    <div class="ctrl">控制</div>

    <div class="d1">1</div>

    <div class="d2">2</div>

    <div class="d3">3</div>

</body>

</html>

2.盒子透明度

opacity: 0; # 所在区域留白

消失显示在页面中都占位

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>盒子显隐</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: yellow;

            margin-top: 10px;

        }

        .d2{

            opacity: 0;

        }

        .ctrl:hover ~ .d2{

            opacity: 1;

        }

    </style>

</head>

<body>

    <div class="ctrl">控制</div>

    <div class="d1">1</div>

    <div class="d2">2</div>

    <div class="d3">3</div>

</body>

</html>

只要盒子在页面中有占位,就会影响其他盒子布局, 所以显隐的盒子都需要进行定位处理

将上述代码修改如下:

.d1{

    display: none;

    position: absolute;

}

.d2{

    opacity: 0;

    position: absolute;

}

opacity可以动画处理, display不能动画处理

opacity能过渡动画 => 0~1之间可以找出多个中间点, 比如0.5

display不能过渡动画 => 原因none与block是两个状态点(中间找不出存在的第三个状态点)

'''

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;

}

'''

盒子阴影

'''

注意:

1.盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)

2.盒子可以绑定多套阴影图层

3.阴影图层永远相对于显示图层进行偏移

语法:

box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色, ...;

虚化程度采用的是镜像界面,从中心往外扩

阴影宽度:四个边都会增加设置的宽度

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>盒子阴影</title>

    <style>

        body{

            margin: 0;

        }

        .box{

            width: 200px;

            height: 200px;

            /*盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)*/

            /*background-color: rgba(0,0,0,0);*/

            background-color: red;

            margin: 220px auto;

            /*验证阴影图层永远相对于显示图层进行偏移*/

            /*position: relative;*/

            /*top: 200px;*/

            /*box-shadow: 0 0 0 0 orange;*/

            box-shadow: 220px 0 0 20px orange,-220px 0 200px 0 green,0 220px 0 0 yellow,0 -220px 0 0 black, 220px 220px 0 0 wheat;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

设置盒子阴影:

.wrap {

    width: 200px;

    height: 260px;

    background-color: orange;

    margin: 50px auto;

}

.wrap:hover {

    box-shadow: 0 5px 20px -5px #424242;

}

'''

2d形变

'''

# 形变参考点(盒子左上角为原点)

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

# 形变属性

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

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

1.形变多个效果要同时赋值给transform属性

transform: rotate(1080deg) translateX(-300px);  # ①

2.属性值之间的先后顺序往往也会导致过程的不同

transform: translateX(-300px) rotate(1080deg); # ②过程的运动效果与①不同

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>形变</title>

    <style>

        .b{

            width: 150px;

            height: 150px;

            background-color: orange;

            margin: 10px auto;

            font: 100 50px/150px "STSong";

            color: blue;

            text-align: center;

            transition: 1s linear;

        }

        /*设置形变参考点*/

        /*.b1{*/

            /*transform-origin: 0 0;*/

        /*}*/

        /*b1旋转形变 角度(deg)*/

        .b1:hover{

            transform: rotate(1080deg);

        }

        /*b2绕x轴旋转*/

        .b2:hover{

            transform: rotateX(1080deg);

        }

        /*b3绕y轴旋转*/

        .b3:hover{

            transform: rotateY(1080deg);

        }

        /*b4绕z轴旋转*/

        .b4:hover{

            transform: rotateZ(1080deg);

        }

        /*b5沿着x轴偏移*/

        .b5:hover{

            transform: translateX(300px);

        }

        /*b6沿着Y轴偏移*/

        .b6:hover{

            transform: translateY(300px);

        }

        /*1.形变多个效果要同时赋值给transform属性

          2.属性值之间的先后顺序往往也会导致过程的不同

        */

        .b7:hover{

            transform: translateX(300px) rotate(1080deg);

        }

        .b8:hover{

            transform: rotate(1080deg) translateX(300px);

        }

        /*缩放比例*/

        /*b9 x,y同时扩大两倍*/

        .b9:hover{

            transform: scaleX(2) scaleY(2);

        }

        .b10:hover{

            /*b10 x,y同时扩大;两倍*/

            /*transform: scale(2);*/

            /*b10 x扩大两倍,y缩小为原来一半*/

            transform: scale(2,0.5);

        }

    </style>

</head>

<body>

    <div class="b b1">1</div>

    <div class="b b2">2</div>

    <div class="b b3">3</div>

    <div class="b b4">4</div>

    <div class="b b5">5</div>

    <div class="b b6">6</div>

    <div class="b b7">7</div>

    <div class="b b8">8</div>

    <div class="b b9">9</div>

    <div class="b b10">10</div>

</body>

</html>

'''

字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变的更多相关文章

day50 盒子显隐2D形变
复习 1.浮动布局解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...
前端,字体图标,盒子显隐,2d形变,盒子阴影
---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入盒子显隐 1.使用高度显隐 <p>-- ...
盒子显隐，伪类边框，盒子阴影,2d平面形变
-盒子显隐显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...
盒子模型的overflow属性，border属性，padding与margin属性
今天要写的是CSS布局—盒子模型首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(c ...
CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
《转载》详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
详解 CSS 属性 - 伪类和伪元素的区别（再也不用概念盲了！！！）
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

随机推荐

cocos2dx 3.x(打开网页webView)
#include "ui/CocosGUI.h" using namespace cocos2d::experimental::ui; WebView *webView = Web ...
C#使用HttpWebRequest与HttpWebResponse模拟用户登录
模拟艺龙旅游网登录想模拟登录,首先整理一下流程 1.通过360浏览器(IE,火狐等等)F12开发人员工具抓到相关数据 2.获取验证码(拿到cookie),登录时也需要使用 3.登录 -------- ...
springmvc注解式开发
搭建环境后端控制器无需实现接口,添加相应的注解 springmvc配置文件中无需注册controller springmvc配置文件中添加组件扫描器.注解驱动涉及常用的注解 @controller ...
react native 使用TabNavigator编写APP底部导航
第一步,下载依赖 npm install react-native-tab-navigator --save 第二步,引入 import TabNavigator from 'react-native ...
node.js初识01
1.对于node.js的安装在这里就不做过多的介绍了,安装成功后,可以通过cmd 输入node -v查看node的版本号,如图所示 2.开始我们的hello world,通过cmd进入所属文件夹,输入 ...
python之mysqldb模块安装
之所以会写下这篇日志,是因为安装的过程有点虐心.目前这篇文章是针对windows操作系统上的mysqldb的安装.安装python的mysqldb模块,首先当然是找一些官方的网站去下载:https:/ ...
ABC2
OpenCV http://www.cnblogs.com/skyfsm/p/7263773.html http://www.cnblogs.com/skyfsm/p/7613314.html SQL ...
linux ~/ 和 /
/是目录层的分隔.表示符.只有一个/表明是root,/etc/表明是根目录下面的etc目录(当然目录最后不需要/,但有/直接表明他是目录,没有末尾的/,那么/etc需要检测一下确定是目录还是文件,虽然 ...
VMWare虚拟机 window文件传递
无论是将虚拟机的文件传到window上或者是将window上文件传到虚拟机上: 都可以选中文件,然后拖动文件到另一个系统上提前:虚拟机安装了VMWARE Tools 1)window上文件拖到虚拟机 ...
Sitecore xDB基础知识 - 识别用户，联系人，访客，客户
体验数据库(xDB)是Sitecore平台的关键元素,特别是当您希望将解决方案提升到简单的内容管理要求之外时.它用于跟踪您的用户(即联系人,访客,客户)与您网站的互动方式.营销人员可以使用此数据来了解 ...

字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

字体图标

盒子显隐

overflow属性

伪类设计边框

盒子阴影

2d形变

字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变的更多相关文章

随机推荐

热门专题