过渡和动画
过渡 可以指定一个属性发生变化时的切换方式
transition-property:对象1，对象2；transition-duration:100ms, 200ms;transition-function:时序函数；可选值 ease先加速在减速 linear匀速 ease-in加速 ease-out 减速 steps(2，end /start)分成几步完成transition-delay:延迟动画和过度类似 动画自动执行
必须设定一个关键帧 关键帧设定了动画执行的每一个步骤 @keyframes Animation_name{ /* 0% */ from{ margin-left:0; } /* 100% */ to{ margin-left:700px; } } .box{ animation-name:Animation_name; animation-duration:4s; } 2. 可选属性 animation-timing-function : linear 线性 ease 以低速开始，然后加快，在结束前变慢 ease-in 以低速开始 ease-out 以低速结束 ease-in-out 以低速开始和结束 animation-duration：动画周期 time; animation-delay:定义动画开始前等待的时间，以秒或毫秒计。默认值是 0 time; animation-iteration-count: 定义被播放的次数 n|infinite; animation-direction: 定义是否应该轮流反向播放动画 normal | alternate animation-play-state: 定义是否暂停 paused | running 简写 animation: name duration timing-function delay iteration-count direction;less
less是css的预处理语言 是css的增强版
css中也支持设置变量
定义–color:#111;应用var(–color);语法包含结构
.box1{ color:123; .box2{ color:yellow; } // box2是box1的后代元素 } // 定义变量个事@变量名 @width:100px; @b:yellow; @c:box6; // 作为类名使用.@{c} .@{c}{ background:url("@{c}/1.jpg") // 作为路径 } .box6{ height:300px; width:$height; // 引用之前的变量 就近原则谁近引用谁 } &表示外层父元素 .box5{ .box6{ &：hover{ // 表示给.box5 .box6设置一个hover效果 // 表示外层父元素 } } } .p1{ color:#123456; background:#555; } // :extend() 对指定样式进行扩展 就是分组选择器 .p2:extend(p1){ width:100px; } // 编译结果 .p4(){ color:#456; } // 这是一个公共的类不在css中实际存在但是可以被引用 .p{ .p4; } // 编译结果 .p{ color:#456; } // 混合函数 .test(@w,@h,@c){ width:@w; hight:@h; color:@c; } // 调用混合函数 div{ .test(100px,200px,#bfa) .test(@w：100px,@hight:200px,@c:#bfa) } color:avarge(color_1,color_2); // 去颜色的平均值 color:darken(#bfa,10%); - @import "123.less"; - 引入123.less文件 * 在less中可以直接加减乘除运算flex布局
弹性布局 flex使元素具有弹性 让元素可以跟随页面大小的改变而改变弹性容器：可以通过设置display：flex; 块级弹性元素 inline-flex flex-direction:可选值 row 左向右 row-reverse column column-reverse 从上而下 /从下而上主轴 弹性元素的排列方向 侧轴：flex-wrap:nowrap;不换行 wrap；沿y轴换行 wrap-reverse;justify-content:如何分配主轴上的空间flex-start 元素按照主轴起边排列 flex-end 终边排列 center 元素居中排列 space-around 空白分配到元素两侧；align-content:如何分配辅轴上的空间align-items：元素之间的关系 辅轴上的对齐方式 （是否拉伸 以及对齐方式）可选值 stretch 拉伸 center 弹性元素：弹性元素的子元素是弹性元素 flex-grow:指定弹性元素的伸展的系数，默认为0，多出来的空间分配 ；flex-shrink:收缩系数 当父元素不够装的时候按比例伸缩。默认值1flex-basis:元素基础像素；// 基础的长度如果是row的话 指定的是宽度简写属性flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;order:决定他弹性元素的排列顺序。移动端适配
可以通过meta标签来调整视口大小 <meta name="viewport" content="device-width,initial-scale=1.0" 单位vw指的是1%的完美视口宽度布局的时候使用less 把px转换为rem响应式布局
使用媒体查询 语法
媒体类型 all screen屏幕 print打印设备
@media only screen and (max-width:768px){ @media (width:500px){ body{ background:#bfa; } } } // 当视口宽度为500时有效 // min-width：视口最小宽度 // max-width：视口最大宽度 // 在屏幕切换的时候，样式会改变的变化 被称为断点 // 超小屏幕 max-width:768 小屏幕 min-width:768px min-width:992 中型屏幕 大屏幕min-width:1200px