CSS 页面特效初步

你的名字 2022-09-21 13:17 197阅读 0赞

CSS 文件主要由 选择符、属性和属性值 构成。

**选择符**，又称为选择器，不同标记由不同选择器控制

**CSS 选择器** 
标记选择器(a)、类别选择器(.)、id选择器(\#) 
**页面中包含 CSS** 
行内样式、内嵌式 
链接式(较常用，链接外部CSS样式是最常见的一种引用样式表的方式) 
<link rel='外部文档和调用文档之间的关系' href='CSS文档的绝对或者相对路径' type='外部文件的MIME类型'>

<linkrel='stylesheet' href='css.css' type='text/css'>

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 测试一下背景颜色是否可继承
 </body>
 </html>

body{
        /*设置网页背景颜色*/
        /*background-color:darkgray;*/
        background-image: url("001.jpg");
        background-repeat: no-repeat;
        /* 背景图片是否固定 */
        background-attachment: fixed;
    }
    p{
        /*列长和列宽的设置*/
        width: 240px;
        padding:4px;
        /*background-color:brown;*/
        background-image: url("001.jpg");
    }

CSS3特效 包括 平移、旋转、过度、动画、多列和瀑布流。

CSS3 能够对元素进行移动缩放转动拉长或者拉伸，转换是使元素改变形状、尺寸和位置的一种效果。可以使用 2D、3D 来转换元素。  
3D方法  
rotateX()和rotateY()  
2D方法  
tanslate()、rotate()、scale()、skew()、matrix()

**CSS3的尺度变化特效代码示例**

div{
        width:100px;
        height:100px;
        background-color: chartreuse;
    }
     
    /*.mydiv{*/
        /*transform: translate(200px,100px);!* 平移 *!*/
        /*-webkit-transform:translate(200px,100px);!* 支持safari和chrome *!*/
        /*-ms-transform: translate(200px,100px);!* 支持 IE(360也是ie内核) *!*/
        /*-o-transform: translate(200px,100px);!*opera *!*/
        /*-moz-transform:translate(200px,100px);!*firfox*!*/
    /*}*/
     
    /*.mydiv{*/
        /*transform: skew(5deg,5deg);!* 倾斜 *!*/
        /*-webkit-transform: skew(5deg,5deg);!* 支持 safari和chrome*!*/
        /*-ms-transform: skew(5deg,5deg);!* 支持 IE(360也是ie内核) *!*/
        /*-o-transform: skew(5deg,5deg);!* opera*!*/
        /*-moz-transform:skew(5deg,5deg);!*firfox*!*/
    /*}*/
     
    /*.mydiv{*/
        /*margin-top: 200px;*/
        /*transform: scale(1,2);!*尺度缩放*!*/
        /*-webkit-transform: scale(1,2);!* 支持 safari和chrome*!*/
        /*-ms-transform: scale(1,2);!* 支持 IE(360也是ie内核) *!*/
        /*-o-transform: scale(1,2);!* opera *!*/
        /*-moz-transform: scale(1,2);!*firfox*!*/
    /*}*/
     
    /*.mydiv{*/
        /*transform:rotate(200deg);!*旋转角度*!*/
        /*-webkit-transform: rotate(200deg);!* 支持 safari和chrome*!*/
        /*-ms-transform: rotate(200deg);!* 支持 IE(360也是ie内核) *!*/
        /*-o-transform: rotate(200deg);!*支持 opera *!*/
        /*-moz-transform: rotate(200deg);!*支持 firfox*!*/
    /*}*/
     
    .mydiv{
        transform:rotateX(200deg);/*旋转角度*/
        -webkit-transform: rotateX(200deg);/* 支持 safari和chrome*/
        -ms-transform: rotateX(200deg);/* 支持 IE(360也是ie内核) */
        -o-transform: rotateX(200deg);/*支持 opera */
        -moz-transform: rotateX(200deg);/*支持 firfox*/
    }

<!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="utf-8">
 <title> dynamic web page</title>
 <link rel="stylesheet"type="text/css" href="style.css"></link>
 </head>
 <body>
 <div>initial res</div>
 
 <div class ="mydiv">changing res</div>
 </body>
 </html>

CSS3过度渡是元素从一种样式转换成另一种样式，常见属性如下：

![Center][]

**CSS3也可以创建动画，动画的创建要遵循@keyframes规则；**

**CSS3多列效果展示：**

![Center 1][]

**CSS3瀑布流效果展示**

![Center 2][]

[Center]: /images/20220721/e1b7195a55224f61a27dc1f91e0a5d0d.png
[Center 1]: /images/20220721/510eea10f73b4d5783ee9ffe01cb4557.png
[Center 2]: /images/20220721/28a542622a1c4215a7c64c245d15035a.png