字体图标,盒子显隐,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 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
随机推荐
- vuex的使用二
1.先看项目的目录结构 2.在main.js里需要引入store这个文件并挂在实例上 import store from './store/store' ............ new Vue({ ...
- MyBatis基础入门《十七》动态SQL
MyBatis基础入门<十七>动态SQL 描述: >> 完成多条件查询等逻辑实现 >> 用于实现动态SQL的元素主要有: > if > trim > ...
- Hibernate.编写xml文件无自动提示信息
Hibernate.编写xml文件无自动提示信息 注意: 配置 xxxx.hbm.xml 文件的自动提示.和配置 hibernate.cfg.xml 文件的提示,操作步骤是一样的.只是复制的文件内容. ...
- struts2.0自定义类型转换
在Struts2.0框架中内置了类型转换器,可以很方便的实现在八大数据类型.Date类型之间的自动转换:此外也可以根据自己的需求自定义数据转换类.如下: 首先看一下项目工程中的目录 1.在新建的web ...
- MOG插件（葡萄牙语，略作翻译）
这次记录下MOG大神的插件,自从我发现了这个插件,似乎开启了一个新世界诶~~~ 网址 https://atelierrgss.wordpress.com 1. MOG_YuruYuri.js CARA ...
- Real Time Credit Card Fraud Detection with Apache Spark and Event Streaming
https://mapr.com/blog/real-time-credit-card-fraud-detection-apache-spark-and-event-streaming/ Editor ...
- Spark学习之路 （三）Spark之RDD
一.RDD的概述 1.1 什么是RDD? RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素 ...
- LoadLibrary加载动态库失败
[1]LoadLibrary加载动态库失败的可能原因以及解决方案: (1)dll动态库文件路径不对.此场景细分为以下几种情况: 1.1 文件路径的确错误.比如:本来欲加载的是A文件夹下的动态库a.dl ...
- python 什么是位置参数？
位置参数是必选参数 ----不能不传, ----不能传一部分, ---必须按顺序传 ----必须传全部参数
- redis的优缺点和使用场景
1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...