CSS 页面特效初步_it博客站

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

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

CSS 选择器标记选择器(a)、类别选择器(.)、id选择器(#) 页面中包含 CSS 行内样式、内嵌式链接式(较常用，链接外部CSS样式是最常见的一种引用样式表的方式)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <!-- 设置文件为 stylesheet 文本样式表 文件类型为 text/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>
   </head>
   <body>
      <div>initial res</div>
      

      <div class ="mydiv">changing res</div>
   </body>
</html>

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

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

CSS3多列效果展示：

CSS3瀑布流效果展示

原文地址：https://blog.csdn.net/u013630349/article/details/51727215?ops_request_misc=&request_id=82e9f7c9543d4e73bf6aefb5fae95707&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-13-51727215-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

HuaShen

CSS 页面特效初步

目录

打赏作者

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

QQXML 卡片菜单代码分享

【iapp】手电筒源码

【分享】🔥测量大师🔥测量身高🔥内置众多功能

当前未登陆哦

关于此站

学习网站

优秀排版个人博客

(穷逼博主)在线接单