一：渐变：
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变
1. linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果
语法：linear-gradient ( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
参数说明：
- 第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
- 第二个参数是起点颜色,可以指定颜色的位置
- 第一个参数表示线性渐变的方向，
- to left：设置渐变为从右到左。相当于: 270deg;
- to right：设置渐变从左到右。相当于: 90deg;
- to top：设置渐变从下到上。相当于: 0deg;
- to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
div{ width: 400px; height: 400px; margin: 100px auto; background: linear-gradient(0deg,red,orange,yellow,green, #00ffff,blue,purple); }
2 . radial-gradient 径向渐变指从一个中心点开始沿着四周产生渐变效果
语法 <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
取值：
- <color>：指定颜色。Rgba hsla
- size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
- shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
- <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
.div1{
width: 200px;
height: 200px;
margin: 10px auto;
/*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
background: radial-gradient(circle at center,red,blue);
}
.div2{
width: 200px;
height: 200px;
border-radius: 100px;
margin: 10px auto;
/*设置径向渐变效果:从指定坐开始，从一种颜色到另外一种颜色*/
background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
}
.div3{
width: 200px;
height: 200px;
border-radius: 100px;
margin: 10px auto;
/*设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置*/
background: radial-gradient(circle at 50px 50px,#eeffff 0%,#666 70%,rgba(33,33,33,0.8) 80%);
}
/*指定渐变的形状*/
.div4{
width: 200px;
height: 100px;
margin: 10px auto;
/*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
background: radial-gradient(ellipse at center,red,green,blue);
}
/*指定渐变的size*/
.div5{
width: 200px;
height: 100px;
margin: 10px auto;
/*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边*/
background: radial-gradient(circle closest-side at center,red,green,blue);
}
/*使用系统提供的位置设置*/
.div6{
width: 200px;
height: 100px;
margin: 10px auto;
/*设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色*/
background: radial-gradient(circle at top right,red,green,blue);
}
二 背景
1.background-size属性：
语法：background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
参数说明：
- auto：此值为默认值，保持背景图片的原始高度和宽度;
- number：此值设置具体的值，可以改变背景图片的大小;
- percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
- cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
- contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
- 当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。
.div1{
width: 200px;
height: 200px;
margin:10px auto;
/*默认的背景设置，会让背景图片从左上角原点位置进行设置，不会自动的让背景图片适应容器的大小从而进行缩放*/
background: url("../images/1.jpg");
}
.div2{
width: 200px;
height: 200px;
margin:10px auto;
background: url("../images/1.jpg");
/*设置背景图片的大小,指定大小，有可能会让背景图片变形*/
background-size: 200px 200px;
}
.div3{
width: 200px;
height: 200px;
margin:10px auto;
background: url("../images/1.jpg");
/*设置背景图片的大小,cover:会让宽或者高适应当前容器的宽或者高，进行等比例缩放，但是超出的部分不会显示，所以有些图片的区域可能会无法显示*/
background-size: cover;
}
.div4{
width: 200px;
height: 200px;
margin:10px auto;
background: url("../images/1.jpg") no-repeat;
/*设置背景图片的大小,cover:会让宽或者高适应当前容器的宽或者高，进行等比例缩放，图片完全在容器以内，但是在不重复背景图片的情况下，会造成容器的部分区域空白*/
background-size: contain;
}
2. background-origin:
作用：background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值是left top左上角
语法：background-origin: padding-box|border-box|content-box;
三：过渡：
语法: transition: property duration timing-function delay;
参数说明: transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay
| 值 | 描述 |
| 规定设置过渡效果的 CSS 属性的名称。 | |
| 规定完成过渡效果需要多少秒或毫秒。 | |
| 规定速度效果的速度曲线。 | |
| 定义过渡效果何时开始。 |
tansition-timing-function: 属性规定过渡效果的速度曲线
| 值 | 描述 |
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
div{
width: 200px;
height: 200px;
background-color: red;
/*添加单个过渡效果*/
/*transition:background-color 2s;*/
/*也可以同时设置多个过渡效果*/
/*transition:background-color 2s,left 1s;*/
/*可以设置某个过渡效果的延迟*/
/*transition:background-color 2s,left 1s 1s;*/
/*可以设置过渡效果的速率曲线*/
/*transition:background-color 2s,left 1s ease-out 1s;*/
/*还可以一次性的为所有属性添加过渡效果*/
transition:all 1s;
position: absolute;
left: 0;
top: 0;
}
四: 2D转换:
通过 CSS3 transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.
2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点
- 语法：translate(tx) | translate(tx,ty)
- tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
- ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。
- 也可以使用translateX(tx) 或者 translateY(ty)
div:hover{
/*设置两个值，第一个参数表示X方向 第二个参数表示Y方向*/
/*transform: translate(100px,100px);*/
/*也可以只传入一个参数，表示X方向*/
/*transform: translate(100px);*/
/*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
transform:translateY(100px);
}
2D缩放： scale()：缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于01的值，让元素显得更大.缩放是参照元素中心点。
- 语法：scale(sx|ty) | scale(sx,sy)
- sx：用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会让对象在X轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。
- sy：用来指定纵向坐标（Y轴）方向的缩放量，如果值为0.01~0.99之间，会让对象在Y轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大
- 也可以使用scaleX(sx) 或者scaleY(sy)
div:hover{
/*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
/*transform: scale(2,0.5);*/
/*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
/*transform: scale(2);*/
/*也可以指定具体方向上的缩放*/
transform: scaleX(2);
}
2D旋转：rotate()：旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
语法：rotate(a);
a: 代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转
div:hover{
/*传入旋转的角度，如果正值，则进行顺时针旋转*/
/*transform: rotate(90deg);*/
/*如果传入负值，则逆时针旋转*/
transform: rotate(-270deg);
}
2D翻转： skew()：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状
- 语法：skew(ax) | skew(ax,ay)
- ax：用来指定元素水平方向（X轴方向）倾斜的角度。
- ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。
- 也可以使用skewX(sx) 或者 skewY(sy)
div:hover{ /*在X方向上倾斜30度*/ transform: skewX(30deg); }
transform-origin: 允许你改变被转换元素的位置。
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: red;
/*添加过渡*/
transition:all .5s;
/*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
transform-origin: 0px 0px;
}
div:hover{
transform: scale(2);
}
五 :3D转换：
3D移动
方法：translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)
div:hover{
/*Y轴移动+100px*/
/*transform:translateY(100px);*/
/*X轴移动100px*/
/*transform:translateX(100px);*/
/*x轴和Y轴方向同时移动*/
transform:translate3d(100px,100px,0px);
}
3D缩放
方法 : scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()
div{
/*Y轴方向放大1倍*/
/*transform: scaleX(2);*/
/*X轴方向缩小0.5*/
/*transform: scaleX(0.5);*/
/*x轴和Y轴方向同时进行缩放*/
transform: scale3d(2,0.5,1);
}
3D旋转
- rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
- rotateX(angle) 是元素依照x轴旋转；
- rotateY(angle) 是元素依照y轴旋转；
- rotateZ(angle) 是元素依照z轴旋转
div:hover{
/*Y轴方向旋转45度*/
/*transform: rotateY(45deg);*/
/*X轴方向旋转90度*/
/*transform: rotateX(90deg);*/
/*x轴和Y轴方向同时进行旋转放*/
transform: rotate3d(1,1,0,45deg);
}
透视/景深效果
- perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
- perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心
- transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中)：
| 值 | 描述 |
| flat | 子元素将不保留其 3D 位置-平面方式。 |
| preserve-3d | 子元素将保留其 3D 位置—立体方式。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
opacity: 0.5;
/*设置一下默认的变换，否则由于观察角度在正面，无法看到立方体*/
transform: rotateX(-30deg) rotateY(30deg);
/*保持3D效果*/
transform-style: preserve-3d;
/*景深透视效果*/
perspective: 0px;
}
/*公共样式*/
.front,.back,.left,.right,.top,.bottom{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.left{
background: red;
transform: translateX(-100px) rotateY(-90deg);
}
.right{
background: green;
transform: translateX(100px) rotateY(90deg);
}
.front{
background: blue;
transform: translateZ(100px);
}
.back{
background: pink;
transform: translateZ(-100px);
}
.top{
background: orange;
transform: translateY(-100px) rotateX(90deg);
}
.bottom{
background: purple;
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
六 动画
必要元素：
1.通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
2.通过百分比将动画序列分割成多个节点；
3.在各节点中分别定义各属性
4.通过animation将动画应用于相应元素；
animation样式常用属性：
- 动画序列的名称:animation-name: move;
- 动画的持续时间:animation-duration: 1s;
- 动画的延时:animation-delay: 1s;
- 播放状态:animation-play-state: paused|running;
- 播放速度:animation-timing-function: linear;
- 播放次数 反复:animation-iteration-count: 1;
- 动画播放完结后的状态:animation-fill-mode: forwards;
- 循环播放时，交叉动画:animation-direction: alternate;
无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 756px;
height: 86px;
margin:100px auto;
background-color: #ddd;
overflow: hidden;
}
div > ul{
width: 200%;
list-style: none;
animation: move 7s infinite linear;
}
div > ul > li{
width:126px;
float: left;
}
div > ul > li > img{
width:100%;
}
div:hover >ul{
animation-play-state: paused;
}
@keyframes move {
from{
transform: translateX(0px);
}
to{
transform: translateX(-756px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="./image/1.jpg" alt=""></li>
<li><img src="./image/2.jpg" alt=""></li>
<li><img src="./image/4.jpg" alt=""></li>
<li><img src="./image/5.jpg" alt=""></li>
<li><img src="./image/6.jpg" alt=""></li>
<li><img src="./image/7.jpg" alt=""></li>
<li><img src="./image/1.jpg" alt=""></li>
<li><img src="./image/2.jpg" alt=""></li>
<li><img src="./image/4.jpg" alt=""></li>
<li><img src="./image/5.jpg" alt=""></li>
<li><img src="./image/6.jpg" alt=""></li>
<li><img src="./image/7.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
时钟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
padding: 0px;
margin: 0px;
}
.clock{
position: relative;
width: 300px;
height: 300px;
border: 10px solid #cccccc;
margin: 100px auto;
border-radius: 50%;
}
.line{
position: absolute;
width: 8px;
height: 300px;
background-color: #cccccc;
left: 50%;
transform: translate(-50%,0);
}
.line.line2{
transform:translate(-50%,0) rotateZ(30deg);
}
.line.line3{
transform:translate(-50%,0) rotateZ(60deg) ;
}
.line.line4{
transform:translate(-50%,0) rotateZ(90deg);
}
.line.line5{
transform:translate(-50%,0) rotateZ(120deg);
}
.line.line6{
transform: translate(-50%,0) rotateZ(150deg) ;
}
.cover {
width: 250px;
height: 250px;
border-radius: 50%;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.hour,.minute,.second{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
}
.hour{
width: 6px;
height: 80px;
background-color: red;
transform-origin: center bottom;
animation: clockAnimation 43200s linear infinite;
}
.minute{
width: 6px;
height: 90px;
background-color: blue;
transform-origin: center bottom;
animation: clockAnimation 3600s linear infinite;
}
.second{
width: 2px;
height: 100px;
background-color: green;
/*设置旋转轴心*/
transform-origin: center bottom;
/*添加动画*/
animation: clockAnimation 60s infinite steps(60);
}
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
width: 20px;
height: 20px;
background-color: #cccccc;
}
@keyframes clockAnimation {
from{
transform:translate(-50%,-100%) rotate(0deg);
}
to{
transform:translate(-50%,-100%) rotate(360deg);
}
}
</style>
<title>Document</title>
</head>
<body>
<div class="clock">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
</body>
</html>七：多列布局
- 常用属性：
- column-count: 属性设置列的具体个数
- column-width: 属性控制列的宽度
- column-gap: 两列之间的缝隙间隔
- column-rule: 规定列之间的宽度、样式和颜色
- column-span: 规定元素应横跨多少列(n:指定跨n列 all:跨所有列)
.wrapper{
width:1054px;
padding:20px;
margin:0 auto;
font-family: "微软雅黑",Arial;
/*设置以几列的方式显示*/
column-count:2;
/*指定列宽*/
column-width:500px;
/*指定列与列之间的间距*/
column-gap: 50px;
/*指定列与列之间间隙的样式*/
/*column-rule:2px dotted red*/
/*相对应下面的三个属性*/
column-rule-color:red;
column-rule-style:dotted;
column-rule-width:2px;
}
.wrapper > h4{
column-span: all;
}
八. 伸缩布局
- 重要属性
- display:flex:如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)
- justify-content: 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式,语法：justify-content：flex-start | flex-end | center | space-between | space-around
- flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
- flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
- center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
- space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
- space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
- flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。
- flex-direction： flex-direction：row | row-reverse | column | column-reverse
- flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。
- row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
- row-reverse：对齐方式与row相反。
- column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
- column-reverse：对齐方式与column相反。
-
- flex-wrap： flex-wrap：nowrap | wrap | wrap-reverse
- nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
- wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse：反转 wrap 排列。
- flex-wrap： flex-wrap：nowrap | wrap | wrap-reverse
-
- flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
-
-
- 语法：flex: [flex-grow] [flex-shrink] [flex-basis]：大多数情况下没必要使用这种语法，当使用flex缩写时，大多数情况下没必要使用这种语法
- flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例
- flex: auto：属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间
-
-
扫一扫
5566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
