CSS基础
定位盒子完美居中
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
/*这是以前的写法，碰到宽度为奇数不好除的就不行了，同时还需要计算，如果盒子变大了还需要重新手动计算，不适用*/
/*margin-left: -100px;
margin-top: -100px;
*/
/*这是完美写法，translate水平移动距离，且 % 是参照自己的宽度为标准的，而不是参照父级盒子的标准*/
transform: translate(-50%,-50%);
}
旋转 rotate
img {
margin: 200px;
transition: transform 0.6s;
/*设置变形圆点为左上角，可以精确到像素*/
transform-origin: top left;
}
img:hover {
/*旋转180%*/
transform: rotate(180deg);
}
| transform-origin | 设置旋转中心点 |
|---|---|
| transform: rotate() | 设置旋转角度，单位 deg |
demo：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 225px;
height: 150px;
margin: 300px;
position: relative;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
transform-origin: top right;
transition: transform 2s;
}
div:hover img:first-child {
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="img/6.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/1.jpg" alt="" />
</div>
</body>
3D变形（CSS3）
CSS3的3D坐标系
- x轴：左负右正
- y轴：上负下正
- z轴：内负外正
rotateXYZ()
img {
margin: 100px;
transition: transform 2s;
}
img:hover {
/*沿着x轴旋转*/
transform: rotateX(360deg);
/*沿着y轴旋转*/
transform: rotateY(360deg);
/*沿着z轴旋转*/
transform: rotateZ(360deg);
}
透视perspective
给3D变形的对象的父级标签加上透视，可以使3D效果更好，perspective越小效果越明显。
demo：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
/*透视*/
perspective: 500px;
}
img {
margin: 100px;
transition: transform 2s;
}
img:hover {
/*沿着y轴旋转*/
transform: rotateY(360deg);
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="" />
</body>
translate3d
| translateX() | 沿x轴移动 ，沿x轴可以控制对象的水平位移 |
|---|---|
| translateY() | 沿y轴移动 ，沿y轴可以控制对象的升降，垂直位移 |
| translateZ() | 沿z轴移动，沿z轴可以控制对象的大小，近大远小 |
| translate3d(x,y,z) | 沿x，y，z轴运行 |
demo1 开门
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father {
width: 450px;
height: 300px;
background: url(img/1.jpg) no-repeat;
margin: 100px auto;
position: relative;
perspective: 1000px; /*给父盒子添加透视效果*/
}
.door-l,
.door-r {
background-color: red;
width: 50%;
height: 100%;
position: absolute;
border: 1px solid #000000;
transition: transform 2s;
}
.door-l {
left: 0px;
top: 0px;
transform-origin: left; /*左侧盒子按左边翻转*/
}
.door-r {
right: 0px;
top: 0px;
transform-origin: right;
}
.door-l::before,
.door-r::before {
content: '';
border: 1px solid #000000;
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
position: absolute;
transform: translateY(-50%);
}
.door-l::before {
right: 10px;
top: 50%;
}
.door-r::before {
left: 8px;
top: 50%;
}
.father:hover .door-l{
transform: rotateY(-90deg); /*往左边翻动*/
}
.father:hover .door-r{
transform: rotateY(90deg); /*往右边翻动*/
}
</style>
</head>
<body>
<div class="father">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
demo2 翻转图片
涉及新技术：
| backface-visibility: hidden; | 只要不是正面对着屏幕的就隐藏 |
|---|
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
transition: transform 2s;
}
div img:first-child {
z-index: 1; /*将qian.svg的图片提上来*/
backface-visibility: hidden; /*不是正面对着屏幕的就隐藏*/
}
div:hover img{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="img/qian.svg" alt="" />
<img src="img/hou.svg" alt="" />
</div>
</body>
CSS动画
| 属性 | 值 | 描述 |
|---|---|---|
| @keyframes | 定义动画 | |
| animation | 定义动画名称 动画时间 运动曲线 何时开始 播放次数 运动方向 | 动画综合写法 |
| animation-name | 任意合法标识符 | 定义动画名称 |
| animation-duration | 例：2s | 动画播放的总时间 |
| animation-timing-function | ease（默认值） | 运动曲线：逐渐慢下来 |
| linear | 运动曲线：匀速 | |
| ease-in | 运动曲线：加速 | |
| ease-out | 运动曲线：减速 | |
| ease-in-out | 运动曲线：先加速后减速 | |
| animation-delay | 例：2s | 规定动画开始时间，默认为0s |
| animation-iteration-count | 例：2 | 规定动画播放次数，默认一次，这是2次 |
| infinite | 规定动画播放次数:无限次 | |
| animation-direction | normal（默认） | 规定动画播放方向：正方向 |
| reverse | 规定动画播放方向：反方向 | |
| alternate | 先正后反，持续交替 | |
| alternate-reverse | 先反后正，持续交替 | |
| animation-play-state | running（默认值） | 规定动画运行 |
| paused | 规定动画停止 |
demo1：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*定义动画*/
@keyframes go{
/*运动起始点*/
from{
transform: translateX(0);
}
/*运动结束点*/
to{
transform: translateX(1000px);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/*引用动画*/
animation: go 2s ease 0s infinite alternate; /*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 运动方向;*/
}
</style>
</head>
<body>
<div></div>
</body>
demo2分组动画：
以百分数进行分段运动
/*定义动画*/
@keyframes go{
/*运动起始点*/
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(1000px,0,0);
}
50% {
transform: translate3d(1000px,500px,0);
}
75% {
transform: translate3d(0,500px,0);
}
/*运动结束点*/
100% {
transform: translate3d(0,0,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/*引用动画*/
animation: go 8s ease 0s infinite alternate; /*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 运动方向;*/
}
demo3小车奔跑
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
animation: car 6s infinite;
}
@keyframes car{
0% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(1000px,0,0);
}
51% {
/*小车翻转*/
transform: translate3d(1000px,0,0) rotateY(180deg);
}
100% {
transform: translate3d(0,0,0) rotateY(180deg);
}
}
</style>
</head>
<body>
<!--小车图片-->
<img src="img/car.jpg" width="100px"/>
</body>
demo4：图片无缝滚动
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
/*去除小点*/
list-style: none;
width: 200%;
}
div {
width: 882px;
height: 86px;
border: 1px solid #000000;
margin: 100px auto ;
overflow: hidden;
}
div li img {
float: left;
}
div ul {
animation: moving 5s linear 0s infinite reverse;
}
@keyframes moving{
from{
transform: translateX(0px);
}
to{
/*值必须是负的*/
transform: translateX(-882px);
}
}
div:hover ul {
/*鼠标悬停动画停止*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/nav1.jpg" alt="" /></li>
<li><img src="img/nav2.jpg" alt="" /></li>
<li><img src="img/nav3.jpg" alt="" /></li>
<li><img src="img/nav4.jpg" alt="" /></li>
<li><img src="img/nav5.jpg" alt="" /></li>
<li><img src="img/nav6.jpg" alt="" /></li>
<li><img src="img/nav7.jpg" alt="" /></li>
<!--这边必须将滚动的图片复制两次-->
<li><img src="img/nav1.jpg" alt="" /></li>
<li><img src="img/nav2.jpg" alt="" /></li>
<li><img src="img/nav3.jpg" alt="" /></li>
<li><img src="img/nav4.jpg" alt="" /></li>
<li><img src="img/nav5.jpg" alt="" /></li>
<li><img src="img/nav6.jpg" alt="" /></li>
<li><img src="img/nav7.jpg" alt="" /></li>
</ul>
</div>
</body>
CSS3伸缩布局
以前的伸缩布局是百分比的方式调整宽度，可以随着窗口大小的变化而变化，但是如果有了边距等复杂元素，计算会变得非常复杂
设置响应式伸缩布局模式：
/*给父盒子添加响应式伸缩布局，可以让子盒子在同一行显示*/
display:flex;
/*给父盒子添加调整排列方式：*/
flex-direction:column; /*默认值为row水平排列，column垂直排列，row-reverse水平倒序排列，column-reverse垂直倒序排列*/
demo：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*给父盒子添加响应式伸缩布局，可以让子盒子在同一行显示*/
display: flex;
/*设置响应式最小宽度不能小于300px，目的是为了保护盒子不会太过因为窗口大小的变化而变形失真*/
min-width: 300px;
}
.son1,
.son2,
.son3 {
height: 100%;
}
.son1 {
flex: 1; /*子盒子添加的份数,没有单位*/
background-color: pink;
}
.son2 {
flex: 2; /*子盒子添加的份数,没有单位*/
margin: 0 10px;
background-color: #D2691E;
}
.son3 {
flex: 1; /*子盒子添加的份数,没有单位*/
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
justify-content属性，水平对齐方式
| 值 | 描述 |
|---|---|
| flex-start | 默认值，让子元素从父元素的开头开始排序，盒子顺序不变 |
| flex-end | 让子元素从父元素的结尾开始排序，盒子顺序不变 |
| center | 让子元素在父元素的中间显示 |
| space-between | 左右子元素贴近父元素两边，中间的子元素平分外边距 |
| space-around | 给所有子元素添加平均的外边距 |
demo：
.father {
width: 900px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
display: flex;
justify-content: center;
}
.son {
/*给子盒子设置宽度，使所有子盒子的宽度加起来不能平铺整个父盒子的宽度*/
width: 200px;
height: 100%;
background-color: pink;
}
.father .son:nth-child(2) {
background-color: #800080;
}
效果：
- flex-start
- flex-end
- center
- space-between
- space-around
align-items属性，垂直对齐方式
| 值 | 描述 |
|---|---|
| flex-start | 默认值，让子元素上对齐 |
| flex-end | 让子元素下对齐 |
| center | 让子元素居中对齐 |
| stretch | 在子元素不提供高度的前提下，可以让子元素拉伸适应父亲的高度相当于 height:100%; |
demo：
.father {
width: 900px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.son {
width: 200px;
height: 100px;
background-color: pink;
}
.father .son:nth-child(2) {
background-color: #800080;
}
效果：
- flex-start
- flex-end
- center
- stretch（子元素不能给高度！）
flex-wrap控制换行
| 值 | 描述 |
|---|---|
| nowrap | 默认值，强制不换行，收缩在一行显示 |
| wrap | 自适应换行 |
| wrap-reverse | 翻转换行 |
demo：
.father {
width:700px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
}
.son {
width: 200px;
height: 50px;
background-color: pink;
}
.father .son:nth-child(2) {
background-color: #800080;
}
.father .son:nth-child(4) {
background-color: #800080;
}
- nowrap
- wrap
- wrap-reverse
align-content 对齐
align-content 与 align-items的区别
- align-content 是针对多行对齐
- align-items 是针对一行对齐
align-content 的使用前提：
必须对父元素设置以下属性，否则不起效果
/*设置布局方式：响应式伸缩布局*/
display: flex;
/*设置排列方式：水平排列*/
flex-direction: row;
/*设置换行：自动换行*/
flex-wrap:wrap;
| 值 | 描述 |
|---|---|
| stretch | 在子元素不提供高度的前提下，可以让子元素拉伸适应父亲的高度相当于 height:100%; |
| center | 让子元素居中对齐 |
| flex-start | 默认值，让子元素在父元素的开头上边线对齐 |
| flex-end | 让子元素在父元素的下边线对齐 |
| space-between | 左右子元素贴近父元素两边，中间的子元素平分外边距 |
| space-around | 给所有子元素添加平均的外边距 |
demo：
.father {
width:700px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.son {
width: 200px;
height: 50px;
background-color: pink;
}
.father .son:nth-child(2n) {
background-color: #800080;
}
效果：
-
stretch
-
center
-
flex-start
-
flex-end
-
space-between
-
space-around
order 控制子项目的排列顺序
order：从小到大排序，默认值为0，可以为负值
demo：把5盒子放到最前面
.father .son:nth-child(5) {
order: -1;
}
BFC
什么是BFC
BFC 是一个独立的渲染区域，它规定了父级元素内部的子元素如何布局，与父元素之外的区域毫不相干。
产生BFC的条件
- 必须是块内元素或链表或表格
display:block; display:list-item; display:table; - 给上面这些类型的元素添加下列属性可以触发BFC
- float属性不为 none
- position 为 absolute 或 fixed
- display 为 inline-block，table-cell，table-caption，flex，inline-flex
- overflow 不为 visible
BFC元素所具有的特性
- 在 BFC 中，盒子默认从顶端开始垂直一个接一个的排列
- 在同一个BFC中，盒子垂直方向的 margin距离为最大的那一个
- 子盒子与父盒子的margin距离是从 border 的内边缘开始算的
- BFC 的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
- 计算 BFC 高度时，自然也会检测到浮动盒子的高度
BFC的作用
-
清除内部浮动
-
解决外边距合并问题
demo：<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father { width: 300px; border: 1px solid pink; overflow: auto; } .son1, .son2 { width: 100px; height: 100px; background-color: pink; } .son1 { margin-bottom: 100px; } .son2 { background-color: blueviolet; margin-top: 150px; } .other { /*开启BFC，使son1和son2不在同一个BFC中，这样他们的外边距就是100+150=250*/ overflow: hidden; } </style> </head> <body> <div class="father"> <div class="other"> <div class="son1"></div> </div> <div class="son2"></div> </div> </body> -
可以使下面的盒子不会与浮动盒子产生交集
.father { width: 300px; border: 1px solid pink; } .son1 { width: 100px; height: 100px; background-color: pink; float: left; } .son2 { background-color: plum; overflow: hidden; /*创建BFC区域*/ }不使用BFC可以实现文字环绕效果：
对son2使用BFC，两个盒子将没有交集
背景渐变色
浏览器私有前缀
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | Google Chrome，Chrome，Safari，Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer，Edge |
| -khtml- | Konqueror |
背景渐变色
/*两种颜色的渐变色*/
background: linear-gradient(渐变的起始位置,起始颜色,结束颜色);
/*多种颜色的渐变色*/
background: linear-gradient(渐变的起始位置,颜色1 0%,颜色2 50%,颜色3 80%,颜色4 100%);
demo：
div {
width: 200px;
height: 200px;
margin: 0 auto;
/*背景渐变,兼容性问题很严重,必须在前面添加浏览器的私有前缀*/
/*兼容谷歌等浏览器*/
background: -webkit-linear-gradient(top,red,green);
/*兼容火狐等浏览器*/
background: -moz-linear-gradient(top,red,green);
}
CSS3 W3C统一验证工具
网址：http://validator.w3.org/unicorn/
验证步骤：
验证通过：
CSS压缩
CSS压缩的目的是为节约空间和资源
CSS压缩网站：http://tool.chinaz.com/Tools/CssFormat.aspx
旋转轮播图
需要用到的技术：
-
透视
-
过渡
-
preserve-3d，让子盒子具有3D效果
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { perspective: 1000px; } div { width: 300px; height: 200px; margin: 100px auto; background: url(img/1.jpg) no-repeat; background-size: cover; position: relative; transform-style: preserve-3d; transition: all 5s linear; } div nav { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } div nav:nth-child(1) { background: url(img/1.jpg) no-repeat; background-size: cover; transform: rotateY(0deg) translateZ(400px); } div nav:nth-child(2) { background: url(img/2.jpg) no-repeat; background-size: cover; transform: rotateY(60deg) translateZ(400px); } div nav:nth-child(3) { background: url(img/3.jpg) no-repeat; background-size: cover; transform: rotateY(120deg) translateZ(400px); } div nav:nth-child(4) { background: url(img/4.jpg) no-repeat; background-size: cover; transform: rotateY(180deg) translateZ(400px); } div nav:nth-child(5) { background: url(img/5.jpg) no-repeat; background-size: cover; transform: rotateY(240deg) translateZ(400px); } div nav:nth-child(6) { background: url(img/6.jpg) no-repeat; background-size: cover; transform: rotateY(300deg) translateZ(400px); } div:hover { transform: rotateY(360deg); } </style> </head> <body> <div> <nav></nav> <nav></nav> <nav></nav> <nav></nav> <nav></nav> <nav></nav> </div> </body>
靶心制作
需要用到的技术：
-
盒子圆角
-
盒子居中对齐
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .round1, .round2, .round3, .round4, .round5 { border: 10px solid #000000; border-radius: 50%; background-color: blue; display: flex; justify-content:center; align-items:center; } .round1 { width: 500px; height: 500px; } .round2 { width: 400px; height: 400px; } .round3 { width: 300px; height: 300px; } .round4 { width: 200px; height: 200px; } .round5 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="round1"> <div class="round2"> <div class="round3"> <div class="round4"> <div class="round5"></div> </div> </div> </div> </div> </body>
来源：CSDN
作者：码仆的逆袭
链接：https://blog.csdn.net/qq_34191426/article/details/103357715