HTML5和CSS3六CSS3三

代码下载地址

线性渐变

linear-gradient(direction, color-stop1, color-stop2, …)：线性渐变是沿着一条直线产生渐变效果。

值	描述
direction	定义渐变效果方向或角度（to left：从右到左相当于270deg、to bottom：从上到下相当于180deg，这个是默认值、to right：从左到右相当于90deg、to top：从下到上相当于0deg；当然也可以是其他角度值）。
color-stop1, color-stop2,…	色标是要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％到 100％之间的百分比值，或沿渐变轴的长度值）。

        .div1 {/*渐变不是单一色，产生的是图像，所以使用background*/background: linear-gradient(90deg, red 0%, cyan 100%);}.div2 {background: linear-gradient(to bottom, red 0%, cyan 100%);}.div3 {background: linear-gradient(30deg, red 0%, cyan 100%);}.div4 {background: linear-gradient(to left, red 0%, green 50%, blue 100%);}

径向渐变

radial-gradient(shape size at position, start-color, …, last-color)：径向渐变是由中心向四周产生的渐变效果。

值	描述
shape	定义渐变的形状。可能的值：ellipse（默认，会适配当前形状）、circle（产生正圆渐变）
size	定义渐变的尺寸。可能的值：farthest-corner（默认，最远角）、closest-side（最近边）、closest-corner（最近角）、farthest-side（最远边）
position	定义渐变的位置。默认值是 “center”。可以赋值坐标或关键值（left、right、top、bottom、center）。
start-color, …, last-color	色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％到 100％之间的百分比值，或沿渐变轴的长度值）。

        .div5 {background: radial-gradient(red, cyan);}.div6 {background: radial-gradient(circle, red, cyan);}.div7 {background: radial-gradient(circle at top, red, cyan);}.div8 {background: radial-gradient(circle closest-corner at 60% 55%, blue, green, yellow, black);}.div9 {background: radial-gradient(circle closest-side at 100px 100px, blue 0%, green 50%, yellow 75%, black 100%);}

重复渐变

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …)：重复线性渐变，同线性渐变
repeating-radial-gradient(shape size at position, start-color, …, last-color)：重复径向渐变，同径向渐变

        .div10 {background: repeating-linear-gradient(to right, white 0%, white 10%, black 10%, black 20%);}.div11 {background: repeating-radial-gradient(circle closest-side at center, white 0%, white 10%, black 10%, black 20%);}

背景

background-color：添加背景颜色

        div.div1 {background-color: skyblue;}

background-image：添加背景图片；

如果图片大于容器，会从左上角开始放置图片将被裁剪；如果图片小于容器，图片会被平铺

        div.div2 {background-image: url("images/huliena.jpeg");}div.div3 {background-image: url("images/message.png");}

background-repeat：设置背景图片平铺；

round值会缩放图片以适配容器；space值会产生间距以适配容器

        div.div4 {background-image: url("images/message.png");background-repeat: round;}div.div5 {background-image: url("images/message.png");background-repeat: space;}

background-attachment：设置滚动容器的背景行为；

滚动容器时，fixed值背景图片的位置固定不变；scroll值背景图片跟随容器滚动
滚动容器内容时，fixed值背景图片的跟随内容滚动；scroll值背景图片不会跟随容器滚动

        div.div6 {background-image: url("images/message.png");background-attachment: fixed;}div.div7 {background-image: url("images/message.png");background-attachment: scroll;}div.div8 {background-image: url("images/message.png");overflow: scroll;background-attachment: local;}div.div9 {background-image: url("images/message.png");overflow: scroll;background-attachment: scroll;}

background-size：设置背景图片的尺寸大小

auto——原始宽高，可与宽高尺寸大小、比例搭配使用则按比例缩放
宽高尺寸大小——宽高像素数值
宽高尺寸比例——容器宽高百分比
contain——按比例缩放让容器适配容纳整个图片
cover——按比例缩放让图片适配填满整个容器

        div.div10 {background-image: url("images/huliena.jpeg");background-repeat: no-repeat;background-size: auto;}div.div11 {background-image: url("images/huliena.jpeg");background-repeat: no-repeat;background-size: 400px auto;}div.div12 {background-image: url("images/huliena.jpeg");background-repeat: no-repeat;background-size: 50% auto;}div.div13 {background-image: url("images/huliena.jpeg");background-repeat: no-repeat;background-size: auto 50%;}div.div14 {background-image: url("images/huliena.jpeg");background-repeat: no-repeat;background-size: contain;}div.div15 {background-image: url("images/one.png");background-repeat: no-repeat;background-size: contain;}div.div16 {background-image: url("images/huliena.jpeg");background-repeat: no-repeat;background-size: cover;}div.div17 {background-image: url("images/one.png");background-repeat: no-repeat;background-size: cover;}div.div18 {width: 100%;height: 360px;background-image: url("images/red.jpg");background-size: cover;/*定位图片居中*/background-position: center;}

background-origin：设置背景原点的位置

border-box——从border的位置开始填充背景，会与border重叠
padding-box——从padding的位置开始填充背景，会与padding重叠
content-box——从content的位置开始填充背景

background-clip：设置裁剪，控制显示的内容

border-box——显示border以内的内容
padding-box——显示padding以内的内容
content-box——显示content以内的内容

        a {width: 300px;height: 300px;margin: auto;margin-top: 20px;padding: 100px;box-sizing: border-box;display: block;border: solid 1px red;background-image: url("images/pictures.jpeg");background-position: -231px -195px;background-origin: content-box;background-clip: content-box;}

边框图片

border-image-source：指定边框图片路径，默认只有填充到四个角
border-image-slice：设置四个方向上的裁切距离，fill将内容也进行填充
border-image-width：边框图片的宽度，如果没有设置这个值，那么宽度就是border中设置的宽度
border-image-outset：边框扩展，把边框图片向外延伸
border-image-repeat：平铺效果，stretch直接拉伸，repeat简单重复平铺，space不缩放图片使用间距来平铺，round缩放图片来平铺

边框图片的本质是背景，不会影响内容的放置，要影响内容需要设置border和padding

简写：

border-image: source slice/width/outset repeat

        div.div19 {width: 300px;height: auto;box-sizing: border-box;background-color: antiquewhite;border: solid 30px red;/* border-image-source: url(images/qipao.png);border-image-slice: 100 fill;border-image-width: 30px;border-image-outset: 0px;border-image-repeat: stretch; *//* 简写 *//* border-image: source slice/width/outset repeat; */border-image: url(images/qipao.png) 100 fill/30px/0 stretch;}

过渡动画

过渡动画执行完毕后，默认会还原到原始状态

transition-property：添加过渡动画属性（all表示为所有属性添加动画，不建议使用all，因为效率低下并且所有属性效果都一样），只能用在产生数值添加过渡动画
transition-duration：过渡动画耗时
transition-timing-function：过渡动画时间函数，控制运动速度（ease in 淡入 ease out 淡出 step(n)动画步数相当于多少帧……）
transition-delay：延迟执行过渡动画时间

简写 transition: 属性耗时时间函数延迟时间, 属性……

由于部分浏览器的一些版本不支持标准写法，建议加上各自浏览器的前缀（-moz-，-webkit-，-o-），下面实现一个手风琴菜单效果案列：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Transition</title><style>* {margin: 0;padding: 0;}h2 {padding: 20px;text-align: center;}h3 {padding: 15px;text-align: center;}div.div1 {width: 100px;height: 100px;background-color: red;position: relative;left: 100px;transition-property: left;transition-duration: 3.5s;transition-timing-function: ease-in-out;transition-delay: 1s;}/* 点击按住 */div.div1:active {left: 1000px;}div.div2 {margin: 0;margin-top: 10px;width: 100px;height: 100px;background-color: cyan;position: relative;left: 100px;transition: left 3.5s ease-in-out 1s, background-color 5s ease-in;}div.div2:active {left: 1000px;background-color: red;}div.div3 {margin: auto;width: 400px;height: auto;}h4 {margin: 0;background-color: azure;height: 44px;line-height: 44px;position: relative;padding-left: 10px;border-left: 2px solid #ccc;border-right: 2px solid #ccc;}h4.top {border-top: 2px solid #ccc;border-bottom: 1px solid #ccc;}h4.center {border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}h4.bottom {border-top: 1px solid #ccc;border-bottom: 2px solid #ccc;}div.itembox {margin: 0;height: 0px;overflow: hidden;background-color: antiquewhite;transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out;-webkit-transition: all 0.35s ease-in-out;-o-transition: all 0.35s ease-in-out;}div.div3:hover > div.itembox {height: 120px;}ul {margin: 0;padding: 10px 20px 10px 20px;list-style: none;line-height: 25px;}</style>
</head>
<body><h2>过渡动画</h2><h3>过渡动画基础</h3><div class="div1"></div><div class="div2">简写</div><h3>手风琴案例</h3><div class="div3"><h4 class="top">国际新闻</h4><div class="itembox"><ul><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li></ul></div></div><div class="div3"><h4 class="center">国内新闻</h4><div class="itembox"><ul><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li></ul></div></div><div class="div3"><h4 class="bottom">市内新闻</h4><div class="itembox"><ul><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li><li>某人又扶老奶奶过马路了</li></ul></div></div>
</body>
</html>

overflow：属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。其属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

Transform变换

transform：实现元素的变化——移动、缩放、旋转，执行完毕后会恢复到原始状态，可以同时添加多个变换效果

二维变换

translate(x, y)：移动，参照元素的左上角，一个参数表示x轴方向，两个参数则分别表示x、y轴方向

translateX()/translateY()：特定方向X/Y的移动

scale()/scaleX()/scaleY()：缩放，参照元素的中心点

rotate()：旋转，参数为旋转角度，参照元素的中心点

skew()/skewX()/skewY()：斜切，参数为倾斜的角度

transform-origin：设置旋转轴心，值可以是X、Y坐标值，也可以是left、top、right、bottom、center关键字

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Transform</title><style>* {margin: 0;padding: 0;}h2 {margin: 20px;text-align: center;}h3 {margin: 15px;text-align: center;}div {width: 100px;height: 100px;margin: auto;margin-top: 10px;background-color: #ccc;transition: transform 0.35s ease-in-out;}div:nth-of-type(1):active {transform: translate(100px, 110px);}div:nth-of-type(2):active {transform: translateX(100px) translateY(110px);}div:nth-of-type(3):active {transform: scale(2, 0.5);}div:nth-of-type(4):active {transform: scaleX(2) scaleY(0.5);}div:nth-of-type(5):active {transform: rotate(90deg);}div:nth-of-type(6):active {transform: skew(45deg, 45deg);}div:nth-of-type(7):active {transform: skewX(45deg) skewY(45deg);}div.pkBox {width: 125px;height: 195px;margin: auto;margin-top: 250px;margin-bottom: 50px;position: relative;background-color: white;}div.pkBox > img {background-color: antiquewhite;width: 100%;height: 100%;position: absolute;transform-origin: center top;transition: transform 0.35s ease-in-out;}div.pkBox:active > img:nth-of-type(1) {transform: rotate(60deg); }div.pkBox:active > img:nth-of-type(2) {transform: rotate(120deg);}div.pkBox:active > img:nth-of-type(3) {transform: rotate(180deg);}div.pkBox:active > img:nth-of-type(4) {transform: rotate(240deg);}div.pkBox:active > img:nth-of-type(5) {transform: rotate(300deg);}div.pkBox:active > img:nth-of-type(6) {transform: rotate(360deg);}div.dunpai {/* 能去除子元素行级元素的间距 */font-size: 0;background-color: white;width: 300px;height: 360px;margin-top: 100px;margin-bottom: 100px;}div.dunpai > img {width: 100px;height: 120px;transition: transform 0.35s ease-in-out;}div.dunpai > img:nth-of-type(1) {transform: translate(-150px, 100px) rotate(60deg) scale(1.3);}div.dunpai > img:nth-of-type(2) {transform: translate(-200px, -90px) rotate(30deg) scale(0.7);}div.dunpai > img:nth-of-type(3) {transform: translate(50px, -50px) rotate(90deg) scale(0.5);}div.dunpai > img:nth-of-type(4) {transform: translate(20px, -150px) rotate(120deg) scale(1.1);}div.dunpai > img:nth-of-type(5) {transform: translate(50px, 60px) rotate(140deg) scale(0.8);}div.dunpai > img:nth-of-type(6) {transform: translate(250px, 100px) rotate(170deg) scale(1.2);}div.dunpai > img:nth-of-type(7) {transform: translate(-40px, -160px) rotate(145deg) scale(0.6);}div.dunpai > img:nth-of-type(8) {transform: translate(-80px, -40px) rotate(180deg) scale(1.2);}div.dunpai > img:nth-of-type(9) {transform: translate(70px, 60px) rotate(240deg) scale(0.8);}div.dunpai:hover > img {transform: none;}</style>
</head>
<body><h2>Transform</h2><h3>二维变化</h3><div>transform</div><div>translateX、translateY</div><div>scale</div><div>scaleX、scaleY</div><div>rotate</div><div>skew</div><div>skewX、skewY</div><h3>扑克牌案例</h3><div class="pkBox"><img src="data:images/hongtaoJ.png" alt=""><img src="data:images/hongtaoQ.png" alt=""><img src="data:images/hongtaoK.png" alt=""><img src="data:images/fangkuaiJ.png" alt=""><img src="data:images/fangkuaiQ.png" alt=""><img src="data:images/fangkuaiK.png" alt=""></div><h3>为transform添加多个属性</h3><div class="dunpai"><img src="data:images/dunpai1.png" alt=""><img src="data:images/dunpai2.png" alt=""><img src="data:images/dunpai3.png" alt=""><img src="data:images/dunpai4.png" alt=""><img src="data:images/dunpai5.png" alt=""><img src="data:images/dunpai6.png" alt=""><img src="data:images/dunpai7.png" alt=""><img src="data:images/dunpai8.png" alt=""><img src="data:images/dunpai9.png" alt=""></div>
</body>
</html>

tranform经典案例，元素中心对齐显示：

        div.circle {width: 300px;height: 300px;border-radius: 150px;position: relative;}div.rect {background-color: aqua;position: absolute;/* 定位百分比参照父元素 */left: 50%;top: 50%;/* transform百分比参照自身 */transform: translate(-50%, -50%);}<h3>经典案例元素中心对齐</h3><div class="circle"><div class="rect"></div></div>

三维变换

translate3d(x, y, z)：x、y、z三个方向偏移

scale3d(x, y, z)：x、y、z三个方向缩放

rotate3d(x, y, z, angle)：沿着x、y、z三个参数构成的空间向量进行三维旋转

        div.transform3d {width: 300px;height: auto;background-color: white;}div.transform3d > div {transition: transform 0.35s ease-in-out;background-color: red;}div.transform3d > div:nth-of-type(1):active {transform: translate3d(100px, 110px, 100px);}div.transform3d > div:nth-of-type(2):active {transform: scale3d(2, 0.5, 3);}div.transform3d > div:nth-of-type(3):active {transform: rotate3d(1, 1, 1, 90deg);}<h3>三维变换</h3><div class="transform3d"><div></div><div></div><div></div></div>

transform-style：使被转换的子元素保留3d变换（设置的是父元素）

值	描述
flat	子元素不保留其3d位置——平面方式
preserve-3d	子元素保留其3d位置——立体方式

立方体案例：

div.box3d {margin-top: 30px;margin-bottom: 50px;position: relative;transform: rotate3d(1, 1, 0, -30deg);transform-style: preserve-3d;}div.box3d > div {position: absolute;opacity: 0.5;}div.box3d > div:nth-of-type(1) {background-color: red;transform: translateZ(50px);}div.box3d > div:nth-of-type(2) {background-color: green;transform: translateZ(-50px);}div.box3d > div:nth-of-type(3) {background-color: blue;transform: translateX(-50px) rotateY(-90deg);}div.box3d > div:nth-of-type(4) {background-color: cyan;transform: translateX(50px) rotateY(90deg);}div.box3d > div:nth-of-type(5) {background-color: pink;transform: translateY(-50px) rotateX(90deg);}div.box3d > div:nth-of-type(6) {background-color: yellow;transform: translateY(50px) rotateX(90deg);}<h3>立方体案例</h3><div class="box3d"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div>

perspective：为元素设置三维透视距离，作用于后代元素而非元素本身，相当于站在多远的距离看

perspective-origin：设置镜头在平面的位置，默认为元素的中心