css3特效

css3

1、边框：可以创建圆角边框，添加阴影框，省去使用ps制作图片

常用属性：

（1）border-radius：像素/百分比

     ①border-radius的像素值如果等于高的一半，就会形成一个正的圆角。大于高的一半值还是一

     个正圆角。radius是指半径，它求出的原是在矩形上的切面

     ②border-radius还可以分别设置四个方向的值（分别是从左上角开始按顺时针方向的顺序）

     如果定为0px的话就不是圆角，是方角

     ③百分比通常用来设置一个椭圆。因为设置为百分比就不再是一个圆的半径，而是指矩形从高

     和宽的中心点进行变形，设置的四个值分别是设置四个角的百分比

（2）box-shadow：水平阴影的位置(像素) 垂直阴影的位置(像素) 模糊距离(像素) 阴影颜色

     用于设置边框阴影

    

2、css3文本效果

（1）text-shadow：水平阴影的位置(像素) 垂直阴影的位置(像素) 模糊距离(像素) 阴影颜色

     text-shadow是设置文字的阴影的

    

3、css3字体

（1）使用时，在项目中建立好res文件夹用来放资源，把下载好的字体放入其中，先用

     @font-face定义字体名和地址，再在样式表中像使用其他字体一样使用

     例如：

     @font-face{

       font-family:你自定义的字体名

       src:url("字体存放的路径")

     }

     p{

       font-family:使用你定义的字体

       font-size:

     }

     <p>当前文本使用了你不曾见过的字体</p>

    

4、css3过渡

（1）transition：允许css的属性值在一定的时间内平滑的过渡

     <1>语法格式：

        transition:属性名 时间 速度曲线 何时开始

       四个值中只有过渡效果持续的时间不可以省略

       例如：

       transition:width 2s ease-in 1s;

       width 2s —— 整个过渡效果持续的时间

       ease-in —— 指定了过渡的动画效果

       1s —— 过3s后开始执行过渡效果

       ①速度曲线：省略不写的话也会有默认的效果

       linear：规定以相同速度开始至结束的过渡效果（就是说匀速，是连续的效果）

       ease：规定慢速开始，然后变快，最后慢速结束的过渡效果

       ease-in：规定以慢速开始的过渡效果

       ease-out：规定以慢速结束的过渡效果

       ease-in-out：规定以慢速开始和结束的过渡效果

       ②何时开始的那个时间如果你不想等的话直接不写也会有默认的效果

       ③直接就写一个时间的话也可以

       

5、transform转换：旋转、缩放、移动、倾斜，分为2D转换和3D转换（这个属性是用函数定义的）

（1）transform 2D最常用的函数是rotate()

     <1>书写格式：transform:rotate(30deg);

        通过rotate()方法，元素顺时针旋转给定的角度。允许负值（元素将逆时针旋转），以

       deg为单位（旋转的度数），代表了旋转的角度

     <2>如果直接这么写，转得太快在浏览器中看不出变化的话就用transition控制变化的时间

     <3>如果想要图片绕着该图片本身的中心转的话div的width要设置和图片的width一致

（2）transform 3D常用函数有：rotateX()、rotateY()、translate3d()

    <1>rotateX()：元素绕其x轴以给定的度数进行翻转（它是带有透视的）

       需要连续改变rotateX的值才能在浏览器中看出效果

    <2>ratateY()：元素其y轴以给定的度数进行翻转（它是带有透视的）

       需要连续改变rotateX的值才能在浏览器中看出效果

    <3>translate3d(x,y,z):此函数用来规定指定元素在三维空间中的位移（可以是负值）

       x表示在x轴方向的位移

       y表示在y轴方向的位移

       z表示在z轴方向的位移

       一般设置x、y轴就可以使元素朝某个方向产生偏移，x、y轴形成平面的位移。z轴是指元素

       到你眼睛之间的效果，使用较少

    <4>想要时长为无限的动画效果就加infinite

      

6、animation动画：如果需要在css中创建动画需要学习@keyframes规则。在@keyframes中规定某项

css样式，就能创建由当前样式逐渐改为新样式的动画效果

    （1）至少包含两个属性

       <1>规定动画的名称

       <2>规定动画的时长

    写好规则，再使用animation属性来应用到某个元素

    （2）属性可以指定四个值：动画名 动画时长 效果 开始时间

    （3）例如：

      div{width: 100px;height: 100px;background: red;}

        @keyframes myDH {         @keyframes后面要接动画名称

            0%{width: 300px;}       这里的百分比是时间长度

            50%{width: 200px;}

            100%{width: 600px;}

           这里面也可以用from{}

                          to{}写

        }

        div:hover{animation: myDH 2s;}

       <div></div>

       

7、绘制简单特殊图形（三角形、梯形、圆形）并实际应用到列表导航中

    （1）首先需要有个元素作为容器

    （2）

       <1>制作三角形使用的是border属性，内容区宽高值为0

          ①实际上出来的是一个正方形被划分为四个三角形的效果，需要哪个三角形就留哪个border边。比如说需要留下指向右边的三角形，那么留下border-left，上面的三角和下面的三角设置成透明色就可以了

          例如：

           span{

            display: inline-block;width: 0px;height: 0px;

            border-top: 10px solid transparent;

            border-left: 10px solid green;

            border-bottom: 10px solid transparent;

        }

          ②如果想要改变三角形尺寸的话那么全部border的像素都要改变

       <2>制作梯形也是用border属性，width值不为0，height值为0

          ①先把所有的边都写上，然后看需要哪个方向的梯形再把其他的设为透明色transparent

        <3>制作圆形用border-radius属性，width和height值都不为0

    

8、多列布局：让文本呈现多列显示

    （1）属性

       <1>column-count:分几列

       <2>column-gap：列间距（用像素）

       <3>column-rule：设置列之间的宽度，样式和颜色

          column-rule:宽度 样式 颜色

          宽度可选值有thin(细边框)、medium(中等边框)、thick(粗边框)，也可以指定数值

          样式可选值有hidden(隐藏)、dotted(点状)、dashed(虚线)、solid(实线)、

          double(双线)

         

9、css用户界面相关属性

    （1）常用属性

       <1>resize:调整尺寸（指定元素是否由用户去调整大小），可通过指定此属性去实现类似

          textarea的效果，可选值有：

          ①none：用户无法调整元素的尺寸

          ②both：用户可以调整元素的高度和宽度

          需要注意的是使用resize要设置overflow属性，且值不能是visible(overflow:visible

          是元素的默认属性，该值规定内容不被隐藏)，通常使用resize属性时会设置overflow:

          auto（overflow属性：规定当内容溢出元素时发生的事情）

          例如：

              当定义多行文本框textarea时默认情况下用户是可以调整该文本框的大小的

       <2>box-sizing:方框大小调整（允许以“W3C的盒模型”/“IE盒模型”来定义元素以适应区域，也就是说当前元素使用哪种盒模型可以由box-sizing属性指定）

       有两个值：

       ①content-box（标准）

         padding和border不被包含在width和height内(如果直接加padding值的话内部字体的大小会发生改变)，元素实际大小为宽高+border+padding，此为标准模式下的盒模型

       ②border-box（怪异）

        padding和border被包含在width和height中，元素实际大小为你定义了多宽就是多宽，此为怪异模式下的盒模型

        例如：

        两个盒模型的width都为200px；height都为100px；但是怪异盒模型是包含了padding和border一共width：200px；height；100px；，而标准盒模型是padding和border包在外面

       

10、meta标签（meta通常以名值对的形式出现）:用来描述HTML文档的，meta的“名”部分是用来说明描述文档的哪个部分，“值”是被描述的具体信息

    （1）常用属性

       <1>http-equiv：当服务器向浏览器发送文档时，会先发送请求多名值对来告诉浏览器一些信息（做好准备接收哪种类型文档的准备），是meta标签名值对中的“名”

       值：refresh(在指定时间内自动刷新且可以跳转到指定的url)

           content属性里面写几秒钟后跳转、需要跳转到的网址(如果不写网址的话那就是刷新当前的页面)

       例如：

            <meta http-equiv="refresh" content="3,url=http://www.baidu.com"; />   

       <2>name：提供名值对中的名称

       值：

          author 定义了该页面的作者

          keywords 定义了html文档关键字

          description 用于描述文档

       

11、媒体查询：响应式的核心css技术，为的是给不同的媒体类型设定专有的样式表，让样式表有更强的针对性    

    （1）媒体查询语法

    

12、字体图标（代替了设置背景图+no-repeat的做法）

    （1）打开阿里图标，然后点击自己需要用到的图标 → 购物车 → 下载代码 → 解压 → 打开demo_unicode.html → 将除了demo之外的其他全部东西复制到自己创建的图片文件夹下 → 重新看回demo_unicode.html界面 → 选择需要的图片复制&#开始的东西 → 通过link引入之后在body里面在其他标签内粘贴

    （2）在<style></style>(style的class一定要加)中如果想改变图标的大小，直接把图标看做字体就可以了，用font-size：像素改变大小，color：颜色改变颜色

       注意：如果没有改变的话那就是优先级不够，要写详细一点

       

13、sprite(雪碧图)：也叫css精灵，是一种网页图片处理方式，允许你将一个页面涉及到的所有零星图片都包含到一张大图中，这样一来，当访问该页面时，有从前的多次请求变为一次请求。

    （1）原理：其实就是把网页中一些背景图片整合到一张图片文件中再利用css的background-image、background-position属性对这张大图进行定位。

    （2）优点

       <1>减少网页的http请求，提高网页性能

       <2>减少图片字节

       <3>解决命名困扰

     总结：其实就是一个图片整合技术，目的是通过整合图片减少对服务器的请求数量从而加快页面加载速度（就是将所有的小图片放到一个大图片里面然后通过背景图片的定位来进行显示）

     可以先在浏览器页面调整background-position，调整对图片位置之后再把数据复制到编译工具中。如果需要调整背景图片大小的话可以加display：inlin-block，再设置height（width不用设置，否则字体的格式也会变化）

    （3）如何使用雪碧生成工具

     <1>用PS把需要的图片切出来

     <2>打开CssSprite.exe文件

        下载地址：http://download.csdn.net/detail/wx247919365/8641795

     <3>点击左上角按钮打开图片

     <4>排列图片：可以点击按钮来排列，也可以自己拖动排列，拖动完程序会根据图片的位置生成面积最小的雪碧图

     <5>是否是手机端：勾选后雪碧图的大小会缩小2倍

     <6>代码生成：有sass和css两个选项，选择css

     <7>大图片类型要选择png，图片背景色为Transparent透明

       

    （4）滑动门：div的display设置为none来隐藏，div：hover的display设置为block达到当鼠标悬停在li列表上时才会出现某一个区域（滑动门是另外一个div，开始时被隐藏，鼠标悬停时出现，既然是div就也要设置width和height才能显示）