你的位置:首页 > 网页设计

[网页设计]CSS3知识点整理一些demo


css3能做什么

响应式开发的基础,然后能实现一些酷炫的效果咯。

以下案例纯css3实现,一点都没用js (入门简单,但是水很深)

叮当猫纯用css3做出         http://codepen.io/airen/pen/icFba

       

如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习

 

边框

1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ border-radius: 100%;就是一个圆了。

border-radios:100px/10px  (水平100,垂直10)

2.阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];(阴影模糊半径:只能是正值;阴影扩展半径:可以是正负值)(自带边框

外阴影x和y(正值)出现在右下;内阴影x和y(正值)出现在左上; 

3.为边框应用图片 border-image:

颜色相关

1.颜色之RGBA 

语法:color:rgba(R,G,B,A) (A为透明度参数,取值在0~1之间,不可为负值)   

2.渐变色彩

 

文字与字体

 

 

1.text-overflow   (clip:剪切;ellipsis:省略标记)

  省略号效果:text-overflow:ellipsis; overflow:hidden;white-space:nowrap

2.嵌入字体@font-face

     

 

3.文本阴影text-shadow  

text-shadow: X-Offset Y-Offset blur color;         x正向右,y正向下;Blur:是指阴影的模糊程度   (text-shadow: 2px 2px 0 red;)

与背景相关的样式

1.background-origin : border-box | padding-box | content-box;背景图片分别是从边框内边距(默认值)内容区域开始显示。背景需要设置no-repeat属性。

 

2.background-clip:默认值为border-box,其他同上

3.background-size:

background-size: auto | <长度值> | <百分比> | cover | contain

①.长度或百分比就设一个值时,图片等比缩放。

②.cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器

③.contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止

4.multiple backgrounds

background:url(http://eg.png) no-repeat left top/200px 55%

CSS3选择器

1.属性选择器:

2.结构性伪类选择器:root (根元素为html)、:not 、:empty、:target、:first-child  、:last-child 、:nth-child(n)  (括号里可以是2n+1、-n+5、even、odd等)、:nth-last-child(n) (同上)

x:first-of-type 、x:nth-of-type(n) (括号里同上)、x:last-of-type、x:nth-last-of-type(n)、only-child (子元素只有唯一)、only-of-type (子元素类型唯一)

 

:enabled、:disabled

 

:checked(选择框加点变化示例)、::selection(改变用鼠标选择网页文本的样式)

 

:read-only(与html中readonly='readonly'配合使用)、:read-write (与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。)

 

::before && ::after(作出如下效果图)

拓展:CSS3实现曲边阴影&&翘边阴影

    

                               曲边阴影                                                                        翘边阴影

 

 曲边阴影方法:把直角阴影写在盒子上,在盒子内部插入两个曲线阴影,通过定位让曲线阴影和直角阴影重合,改变z-index,boarder-radios来达到效果。

 翘边阴影方法:直角阴影加上两个阴影

以下为实现代码

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <title>CSS实现曲线阴影和翘边阴影</title> 5   <meta charset="utf-8"> 6   <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9   <div class="wrap effect">10     <h1>Shadow Effect</h1>11   </div>12   <ul class="box">13     <li><img src="images/photo1.jpg"></li>14     <li><img src="images/photo2.jpg"></li>15     <li><img src="images/photo3.jpg"></li>16   </ul>17 </body>18 </html>

index.html
body{  font-family: Arial;  font-size: 20px;}body,ul{margin: 0;    padding: 0;    list-style-type: none;}.wrap{   width: 70%;   height: 200px;   margin: 50px auto;   background: #fff;}.wrap h1{  font-size: 20px;  text-align: center;  line-height: 200px;}.effect{  position: relative;  box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  }.effect:after,.effect:before{       /*双重叠加*/  content: '';  background: #f00;  position: absolute;  z-index: -1;  top: 50%;  bottom: 0px;  left: 30px;  right: 30px;  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);  -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);  -o-box-shadow:0 0 20px rgba(0,0,0,0.8);  border-radius: 100px/10px;}body{  font-family: Arial;  font-size: 20px;}body,ul{margin: 0;    padding: 0;    list-style-type: none;}.wrap{   width: 70%;   height: 200px;   margin: 50px auto;   background: #fff;}.wrap h1{  font-size: 20px;  text-align: center;  line-height: 200px;}.effect{  position: relative;  box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;  }.effect:after,.effect:before{       /*双重叠加*/  content: '';  background: #f00;  position: absolute;  z-index: -1;  top: 50%;  bottom: 0px;  left: 30px;  right: 30px;  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);  -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);  -o-box-shadow:0 0 20px rgba(0,0,0,0.8);  border-radius: 100px/10px;}.box{  width: 980px;  height: auto;  clear: both;  overflow: hidden;  margin: 20px auto;}.box li{  width: 300px;  height: 210px;  position: relative;  float: left;  background: #fff;  margin: 20px 10px;  border:2px solid #efefef;  box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;  -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;}.box li img{  display: block;  width: 290px;  height: 200px;  margin: 5px;}.box li:before{  content:'';  position: absolute;  z-index: -2;  width: 90%;   /*这里需注意*/  height: 80%;  left: 20px;  bottom: 8px;  background: transparent;  /*透明的*/  box-shadow: 0 8px 20px rgba(0,0,0,0.6);  -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);  -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);  -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);   -webkit-transform:skew(-12deg) rotate(-4deg);  -o-transform:skew(-12deg) rotate(-4deg);  -moz-transform:skew(-12deg) rotate(-4deg);  -ms-transform:skew(-12deg) rotate(-4deg);}.box li:after{  content:'';  position: absolute;  z-index: -2;  width: 90%;   /*这里需注意*/  height: 80%;  right: 20px;  bottom: 8px;  background: transparent;  /*透明的*/  box-shadow: 0 8px 20px rgba(0,0,0,0.6);  -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);  -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);  -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);   -webkit-transform:skew(12deg) rotate(4deg);  -o-transform:skew(12deg) rotate(4deg);  -moz-transform:skew(12deg) rotate(4deg);  -ms-transform:skew(12deg) rotate(4deg);

View Code

css3中变形

transform

旋转--  :rotate(ndeg):n正值 顺时针;n负值 逆时针

扭曲--  :skew(x,y)  :skewX(x)  :skewY(y)

:skewX(x) :skewY(y)

缩放-- :scale(x,y)  :scareX()   :scareY()

位移--  :translate(x,y)  :translateX(x)  :translateY(y)     (不知道元素长和框的情况下也可以实现水平垂直居中)

 :translateX(x):translateY(y)

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><link href="style.css" rel="stylesheet" type="text/css"></head> <body><div class="wrapper">我不知道我的宽度和高是多少,我要实现水平垂直居中  </div></body></html>

index.html
 1 .wrapper { 2  padding: 20px; 3  background:orange; 4  color:#fff; 5  position:absolute; 6  top:50%; 7  left:50%; 8  border-radius: 5px; 9  -webkit-transform:translate(-50%,-50%);10  -moz-transform:translate(-50%,-50%);11  transform:translate(-50%,-50%);12 }

style.css

矩阵--  :matrix(a,b,c,d,e,f) 6个属性的意思的:第一个宽度比例1就是原大小,第二个是上下倾斜1就是2倍,2就是3倍,第三个是左右倾斜,数字和第二个一样的意思,第四个是高度比例1就是原大小,第五个是X方向的像素位移,X方向就是左右,第六个是Y方向的像素位移,X方向就是上下 

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/   到时用参考这

原点--   transform-origin:对元素进行原点位置改变

           

css3中动画

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:第一,在默认样式中声明元素的初始状态样式;第二,声明过渡元素最终状态样式,比如悬浮状态;第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

transition:all .5s ease-in-out .2s;

transition-property:指定过渡或动态模拟的CSS属性

:常见过渡属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:过渡函数

transition-delay:过渡延迟时间

 

连写:-webkit-animation:move 10s ease-in 0.5s infinite

关键帧:@Keyframes

 1 @Keyframes changecolor{ 2  0%{ 3   background: red; 4  } 5  20%{ 6   background:blue; 7  } 8  40%{ 9   background:orange;10  }11  60%{12   background:green;13  }14  80%{15   background:yellow;16  }17  100%{18   background: red;19  }20 }21 div {22  width: 300px;23  height: 200px;24  background: red;25  color:#fff;26  margin: 20px auto;27 }28 div:hover {29  animation: changecolor 5s ease-out .2s;30 }

style.css

调用动画  animation:name  要与@keyframes连用

设置动画播放时间  animation-duration:    完成从0%到100%一次动画所需时间

设置动画播放方式  animation-timing-function

设置动画开始播放的时间  animation-delay

设置动画播放次数  animation-iteration-count:infinate (无限次)

设置动画播放方向  animation-direction:normal(默认) / alternate(偶数次反方向播放)

设置动画的播放状态  animation-play-state:running(默认)/paused

设置动画时间外属性  animation-fill-mode:none/forwards/backwords/both       【解析:有些人可以一路走到底(forwards),有些人在遭受伤害后可以恢复到以前(none),甚至有些人可以从伤痛中快速的逃离(backwards),然而有些人已经回不去了,也不知道后面的路该如何走下去(both)】

             

属性值

效果

none

默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果

布局样式相关

多列布局——columns:width count   (产生报纸的效果)

多列布局——column-width:auto(默认) | <length> 

多列布局——column-count:auto | <integer>

 

列间距  column-gap:normal(默认) | <length>

列表边框column-rule:width style color

属性值

属性值说明

column-rule-width

类似于border-width属性,主要用来定义列边框的宽度,其默认值为“medium”,column-rule-width属性接受任意浮点数,但不接收负值。但也像border-width属性一样,可以使用关键词:medium、thick和thin。

column-rule-style

类似于border-style属性,主要用来定义列边框样式,其默认值为“none”。column-rule-style属性值与border-style属值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。

column-rule-color

类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent(透明色)

跨列设置 column-span:none(默认) | all(元素跨越所有列)

 

盒子模型  box-sizing:content | border-box | inherit   (这地方了解清楚的话要知道W3C标准盒模型和IE传统下盒模型) 理解这是又多掌握了一个布局利器

属性值

属性值说明

content-box

默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / height

border-box

重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。

inherit

使元素继承父元素的盒模型模式

content-box的width是定义内容区域的宽度,然后border、padding什么的,都在内容区域外,导致整个盒子的宽度变大。
border-box的width是定义整个盒子的宽度,所以在border、padding相同的情况下,内容宽度会变小。

 

伸缩布局(Flexbox)

display:flex;

flex-direction:row(水平) | column(垂直);

align-items:flex-start | flex-end | center;(水平方向)

 

justify-content:flex-start | flex-end | center;(垂直方向)

 

Flex项目自动收缩:需要给每个flex项目设置flex属性设置需要伸缩的值。

.bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }

 

 Media Queries && Responsive设计

W3C总共列出了10种媒体类型,其中ScreenAllPrint为最常见的三种媒体类型。

设备类型

All

所有设备

Braille

盲人用点字法触觉回馈设备

Embossed

盲文打印机

Handheld

便携设备

Print

打印用纸或打印预览视图

Projection

各种投影设备

Screen

电脑显示器

Speech

语音或音频合成器

Tv

电视机类型设备

Tty

使用固定密度字母栅格的媒介,比如电传打字机和终端

引用方法:link标签、@import和CSS3新增的@media   具体参考http://www.imooc.com/code/1393

Media Queries使用方法:@media 媒体类型and (媒体特性){你的样式}

@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;}}

设备屏幕的输出宽度Device Width、not关键词、only关键词  (做响应式网站前必须过一遍)

 

Responsive设计

1.流体网格  2.弹性图片  3.媒体查询 4.屏幕分辨率 5.主要断点

 

这次先整理到这了,下回再学习整理响应式部分的知识点,和大家一起进步!