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="images/hongtaoJ.png" alt="">
        <img src="images/hongtaoQ.png" alt="">
        <img src="images/hongtaoK.png" alt="">
        <img src="images/fangkuaiJ.png" alt="">
        <img src="images/fangkuaiQ.png" alt="">
        <img src="images/fangkuaiK.png" alt="">
    </div>

    <h3>为transform添加多个属性</h3>
    <div class="dunpai">
        <img src="images/dunpai1.png" alt="">
        <img src="images/dunpai2.png" alt="">
        <img src="images/dunpai3.png" alt="">
        <img src="images/dunpai4.png" alt="">
        <img src="images/dunpai5.png" alt="">
        <img src="images/dunpai6.png" alt="">
        <img src="images/dunpai7.png" alt="">
        <img src="images/dunpai8.png" alt="">
        <img src="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：设置镜头在平面的位置，默认为元素的中心