关于css3的一些知识点

最新推荐文章于 2024-07-13 11:46:18 发布

js易大师

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量162

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/wangshuze123/article/details/108112316

版权

CSS Sprite?
```
 CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。
 它允许你将一个页面涉及到的所有零星图片都包含到一-张大图中去加载。
```
特点：优化网页的手段，提高加载速度。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

通过PS工具中的切片工具，可以非方便的测量位置和大小。

在线处理雪碧图：http://alloyteam.github.io/gopng
超大图居中？
1. 用背景 : background : center 0;
2. 用图片 : position:relative; left:50%; margin-left:-容器的一半。

滑动门？

选项卡、标签页（tab）

 特殊元素要添加 唯一的class标识。

轮播图？

考虑一下切换的方向，左右排列，还是上下，还是叠加。
模拟实现一些漂亮的控件？

复选框、上传按钮：
label方式
position + opacity方式

下拉菜单：也可以模拟
ul -> li
input type=“hidden”

6.transition过渡
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-property:width ,height;
all表示所有的属性，默认值

    transition-duration  :  规定完成过渡效果需要多少秒或毫秒。
        transition-duration 需要加时间单位是  s秒 ms毫秒       1s  ===1000ms

    transition-delay  :1s;  定义过渡效果何时开始。
        transition-delay:2s;延时的效果
        transition-delay:-2s;延时的效果
    transition-timing-function  :  规定速度效果的速度曲线。
        transition-timing-function:   
                linear-----------------匀速
                ease（默认值）-----------------逐渐慢下来
                ease-in-----------------加速
                ease-out-----------------减速
                ease-in-out-----------------先加速后减速
                cubic-bezier----------------- （ http://cubic-bezier.com ） 

    复合写法： transition:all 2s linear
              transition:2s linear all
              transition:2s all linear
    注意:当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
            transition:2s 3s linear all

7.transform变形
translate : 位移
transform:translate(x,y);
transform:translateX(100PX);
transform:translateY(100PX);
transform:translateZ(100PX);

        scale       :  缩放
            transform:scale(num);
                num是倍数，正常为1.
            transform:scale(num1，num2);
                两个值，分别代表w h

            transform:scaleX(num);只针对宽
            transform:scaleY(num);只针对高
            transform:scaleZ(num);
        rotate      :  旋转
            transform: rotate(num) num是旋转的角度30deg
            正值：顺时针旋转
            负值：逆时针旋转
            表示一个角：角度deg 或 弧度rad

            rotateX(3D)
            rotateY(3D)
            rotateZ(2D)   
    注 : rotate()跟rotateZ()是等价关系。

        skew :  斜切
            transform : skew( num1, num2) : num1 和num2都是角度，针对的是x和y
            transform : skewX( )
            transform : skewY( )
            注: skew没有3d写法。
        注：设置多个值时候的顺序；先执行后面的，在执行前面的
        位移会受到后面要执行的缩放、旋转和斜切的影响。
        注：所有的变形不会影响其他元素，类似于相对定位。
        注:变形操作对inline(内联元素)不起作用的。
tranform-origin 基点位置 

    主要是针对旋转和缩放，默认都是中心点为基点。
    设置transform-origin的基点位置。设置transform-origin的基点位置。

animation动画：(可复合)

原理：逐帧动画。会把整个运动过程，划分为100份。
    animation-name : 设置动画的名字 (自定义的)
    animation-duration : 动画的持续时间
    animation-delay : 动画的延迟时间
    animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
    animation-timing-function : 动画的运动形式
            linear-----------------匀速
            ease（默认值）-----------------逐渐慢下来
            ease-in-----------------加速
            ease-out-----------------减速
            ease-in-out-----------------先加速后减速
            cubic-bezier----------------- （ http://cubic-bezier.com ） 

@keyframes 动画的名字{
        from{}/*起点位置*/等价于0%
        to{}/*终点位置*/等价于100%
}
注：默认情况下，元素运动完毕后，会停到起始位置。

animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
        none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
        backwards  :  在延迟的情况下，让0%在延迟前生效
        forwards  :  在运动结束的之后，停到结束位置
        both  :  backwards和forwards同时生效

animation-direction  :  属性定义是否应该轮流反向播放动画。
        alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
        reverse : 永远都是反向 , 从100%~0%
        normal (默认值) : 永远都是正向 , 从0%~100%

一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/

9.animate.css

   基本使用：
        animated : 基类(基础的样式，每个动画效果都需要加)
        infinite : 动画的无限次数

10.transform3D相关属性

    rotateX() : 正值向上翻转
    rotateY() : 正值向右翻转
    translateZ() : 正值向前，负值向后
    scaleZ() : 立体元素的厚度

        3d写法
        scale3d() : 三个值 x y z
        translate3d() : 三个值 x y z
        rotate3d() : 四个值 0|1(x轴是否添加旋转角度)  0|1(y轴是否添加旋转角度)  0|1(z轴是否添加旋转角度)  deg
   
erspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。
    3D的眼镜

    rotateX
    rotateY
    translateZ
    scaleZ

    注：反馈回来的立体，仅限于平面。

transform-style : 3D空间
    flat  (默认值2d)、preserve-3d   (3d，产生一个三维空间)

    注：只要是有厚度的立体图形，就必须添加3D控件。

    注：在立方体中默认会沿着第一个面进行旋转。
        tranform-origin : x y z; (z不能写单词，只能写数字)

perspective-origin : 景深-基点位置，观察元素的角度。

backface-visibility : 背面隐藏
    hidden、visible (默认值)

3d写法( 扩展学习 )
    scale3d() : 三个值 x y z
    translate3d() : 三个值 x y z
    rotate3d() : 四个值 0|1(x轴是否添加旋转角度)  0|1(y轴是否添加旋转角度)  0|1(z轴是否添加旋转角度)  deg
        rotate3d(1,1,1,30deg);
    scale translate skew

11.背景扩展

background-size:背景图的尺寸大小
    cover：覆盖
    contain：包含

background-origin：背景图的填充位置
(默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。)
    padding-box (默认):在padding区域填充背景图。
    border-box:在边框border区域填充背景图。
    content-box:在内容content区域填充背景图。

background-clip : 背景图的裁切方式
    padding-box 
    border-box (默认) 
    content-box 	
复合样式：当位置与裁切都写时候，第一个表示位置，第二个表示裁切。

12.CSS3渐变

background-image:linear-gradient(to top, red ，blue);
background-image:linear-gradient( num  deg, red ，blue);
background-image:linear-gradient( red 25% ,blue 75%);
        linear-gradient : 线性渐变
            to top:表示去哪儿方向
            num deg:角度以底下中点为起点bottom位置，顺时针转。
            red 25% ,blue 75%表示从25%到75%渐变，0~25%与75~100%没有变化。
        radial-gradient : 径向渐变

13.字体图标
font-face是CSS3中的一个模块，他主要是把自已定义的Web字体嵌入到你的网页中。

    @font-face{}
        所有的自定义的字体都会放到一个文件中: xxx. svg
        .eot  .woff 这些文件主要是用来适配不同的环境或操作系统。


好处：
    1.可以非常方便的改变大小和颜色
    2.放大后不会失真
    3.减少请求次数和提高加载速度
    4.简化网页布局
    5.减少设计师和前端工程师的工作量
        第三方库：
        www.iconfont.cn

    6.可使用计算机没有提供的字体。

文字阴影？

text-shadow
x
y
blur
color
多阴影

注：默认情况下，阴影的颜色跟文字的颜色相同。
盒子阴影？

box-shadow
x
y
blur : 模糊值
spread : 范围
color
inset : 内阴影 outset(默认值：外阴影 , 写上outset不会生效，不写就是外阴影)
多阴影

注：默认盒子的阴影就是黑色。
浏览器前缀？
浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。

chrome safari -webkit-
ie -ms-
firefox -moz-
opear -o-
遮罩?
mask
url
repeat
x
y
w
h
多遮罩

注：需要在服务器环境下，之前通过右键打开方式都是本地打开。
注：如何在服务器环境下打开这个页面，下载插件：live server
倒影
box-reflect
above 上
below 下
left 左
right 右
距离
遮罩 | 渐变
注：渐变必须是不透明渐变到透明

扩展：利用scale为-1实现翻转。

19.正常情况下，CSS是不支持运算的?

    width:400px -200px -> 宽度失效了

    calc() :可以进行四则运算
    width:calc(100% - 200px);
    width :width:calc(100% * 2);
注:运算的时候，需要在运算符两边添加空格
注:乘除的时候，是只写倍数的，不写单位。
注:应用场景，在百分比与像素进行计算的时候，用的比较多。

js易大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css3的一些知识点

CSS Sprite? CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一-张大图中去加载。特点：优化网页的手段，提高加载速度。好处可以减少图片的质量，网页的图片加载速度快减少图片的请求的次数，加快网页的打开通过PS工具中的切片工具，可以非方便的测量位置和大小。在线处理雪碧图：http://alloyteam.github.io/gopng超大图居中？用背景 : background : center 0;用图片 : ..
复制链接

扫一扫