文章详细介绍了CSS3的位移、旋转、缩放等变换属性，动画的创建与应用，移动设备适配技术，包括视口、媒体查询、rem和vw单位，以及Less预处理器的使用。此外，还涵盖了响应式网页设计和Bootstrap的基本框架与组件。
目录
day01
05位移-基础语法
转换transform
translate（x轴反向移动值，y轴方向移动值）
正负都可以 px或者%
transform: translate(-100px, 100px);
transition: all 0.3s; /* 3秒变换 */
05位移居中
子盒子在父盒子中居中
.father {
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.son {
top: 50%;
left: 50%;
position: absolute;
width: 200px;
height: 100px;
background-color: pink;
/* 旧方案 得算*/
/* margin-left: -100px;
margin-top: -50px; */
/* 新方案 :位移*/
transform: translate(-50%, -50%);
}位移——开门
/* 鼠标移动到父级，两个儿子闪开 */
.father:hover .son:nth-child(1) {
transform: translateX(-100%);
}
.father:hover .son:nth-child(2) {
transform: translateX(100%);
}
.son:nth-child(2) {
background-color: red;
}06-旋转
使用rotate实现元素旋转效果
transform：rotate（角度） 单位deg
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 5s;
}
.box:hover {
transform: rotate(180deg);
}原点设置
使用transform-origin属性改变转换原点，以方位名词控制
/* 默认以盒子中心点 */ /* 改变中心点 */
transform-origin: center bottom;
07复合属性
多重转换 transform
transform: translateX(800px) rotate(360deg);
08缩放
使用scale改变元素的尺寸
语法：transform：scale（x轴缩放倍数，y轴缩放倍数）；
一般情况下，只设置一个，scale值大于1表示放大，小于1表示缩小。
/* 缩放比没有单位 */
/* 常规设置两个方向缩放比，只设置一个值，xy方向 公用一个比例*/
transform: scale(2);opacity透明度，1全看得见，0看不见；
10渐变
background-image: linear-gradient(red, blue); background-image: linear-gradient(transparent, rgba(0, 0, 0, .6));transparent同父亲颜色一样透明
/* 方向to right角度:0deg(默认角度180deg）渐变 */
background-image: linear-gradient(to right, red, blue);12——3D位移
空间转换
透视
使用perspective属性实现透视效果
body {
/* 开启近大远小效果 */
/* 一般给body加 */
/* 范围800-1200px */
/* 盒子与电脑屏幕初始化值设置 */
/* 值越小盒子变换动作越大 */
perspective: 800px;
}13-3D旋转
14-3D呈现
day02-动画
animation
/* 定义动画 */
/* key:关键字 frames：帧 */
@keyframes ani {
from {
/* 状态 */
background-color: palegoldenrod;
}
to {
background-color: darkcyan;
}
}
/* 使用动画 animation：动画名称 动画时长 */
div {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
animation: ani 3s;
}
/* 动画 补帧 */多帧
@keyframes ani {
0% {
transform: scale(1);
}
30% {
transform: scale(2);
}
60% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}动画属性
案例走马灯
<style>
.box {
width: 1200px;
height: 270px;
border: 3px solid #000;
overflow: hidden;
}
.main {
width: 4000px;
height: 270px;
display: flex;
animation: move 6s linear infinite;
}
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-2800px);
}
}
img {
width: 400px;
height: 270px;
}
</style>
</head>
<body>
<div class="box">
<div class="main">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.png" alt="">
<img src="./images/4.png" alt="">
<img src="./images/4.png" alt="">
<img src="./images/4.png" alt="">
<!-- 假的 -->
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
</div>
</div>
</body>day03移动适配
视口
07-二倍图
08-适配方案
- 宽度适配：宽度自适应，高度不变
百分比布局 flex布局
- 等比适配：宽高等比缩放
rem 和 vw
09-百分比布局了解
<style>
* {
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
/* 固定定位 */
.toolbar {
position: fixed;
left: 0;
bottom: 0;
background-color: #ccc;
height: 50px;
width: 100%;
}
.toolbar ul {
display: flex;
}
.toolbar ul li {
width: 25%;
text-align: center;
}
.toolbar ul li img {
height: 50px;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<a href="#"><img
src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png"
alt=""></a>
</li>
<li>
<a href="#"><img
src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/48787/24/12910/3390/5d9c4b12Ee63270e4/4481f5b3dbad979d.png"
alt=""></a>
</li>
<li>
<a href="#"><img
src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/45205/32/12889/3890/5d9c4b12E7bc2c425/dd60fafbde8542ca.png"
alt=""></a>
</li>
<li>
<a href="#"><img
src="https://img12.360buyimg.com/img/s130x100_jfs/t1/203343/14/10880/3097/61641568E184a8e0b/4522f6ec5bb9b10b.png"
alt=""></a>
</li>
</ul>
</div>
</body>10-rem适配
12-媒体查询
媒体特性 书写顺序：
max-width：最大宽度（从小到大）
min-width：最小宽度（从大到小）
@media(max-width:768px) {
/* 小于768px 为pink */
html {
background-color: pink;
}
}
@media(min-width:768px) {
/* 大于为chartreuse */
html {
background-color: chartreuse;
}
}媒体查询-外部css
<link rel="stylesheet" media="(max-width:768px)" href="./css/index.css">
媒体呈现-完整写法-了解
14-flexible使用
16-less
less注释
单行注释 //
多行注释 /* */
less运算
less嵌套
less变量
作用：存储数据，方便使用和修改。
语法：@变量名：数据；
使用变量：css属性：@变量名；
@myColor: red;
.banner {
background-color: @myColor;
}
.size {
background-color: @myColor;
}
.hean {
background-color: @myColor;
}22-less导入
作用：导入less公共样式文件；
语法：导入: @import "文件路径”
提示：less可以省略后缀
@import url(./base.less);
// 导入less 两种方法
@import "./1.less";23-less导出
//out: ./abc/css.css
// less文件的第一行就是导出设置
// out:false 禁止导出
.banner {
background-color: #fff;
}day04
响应式网页
方法：1、媒体查询
2.bootstrap
适配方案
- vw:相对单位，视口宽度的百分之一
- vh：相对单位，视口高度的百分之一
object-fit属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。CSS object-fit 属性 | 菜鸟教程
day05
bootstrap响应式布局
Bootstrap · The most popular HTML, CSS, and JS library in the world.
- Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
1.引入bootstrap
<link rel="stylesheet" href="./bootstrap/css/bootstrap-grid.min.css">
2、调用类名：container：响应式布局版心类。
<div class="container">测试</div>栅格系统
全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网
一行最多占12列，col-md-1代表一行12个盒子，每个占一份，col-md-3代表一行4个盒子，占3份。
组件
- 引入样式表
- 引入js文件
- 复制结构，修改内容
4882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
