CSS 页面特效初步

最新推荐文章于 2024-07-28 20:04:07 发布

原创最新推荐文章于 2024-07-28 20:04:07 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #动画 #特效 #瀑布流

JavaWeb贴士专栏收录该内容

70 篇文章

订阅专栏

本文介绍了CSS3的各种特效，包括平移、旋转、过渡及动画等，并提供了详细的代码示例。此外，还讲解了如何使用链接式引入外部CSS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    <!-- 设置文件为 stylesheet 文本样式表 文件类型为 text/css 文件绝对路径-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
    <p>测试一下背景颜色是否可继承</p>
</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>
        <br>
        <div class ="mydiv">changing res</div>
    </body>
</html>

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