CSS 的各种模块

最新推荐文章于 2024-05-13 23:54:30 发布

stanwuc

最新推荐文章于 2024-05-13 23:54:30 发布

阅读量743

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/stanwuc/article/details/102726944

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、过渡模块(transition)

1、基本使用

使用的时候需要指明需要过渡效果的属性和过渡的时长
然后还需要属性发生变化才能看到我们设置的过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #div1 {
            width: 100px;
            height: 100px;
            background: blue;
            transition: height 5s, width 5s;
        }

    </style>
</head>
<body>

<div id="div1"></div>

<script>
    onload = function () {
        var oDiv = document.getElementById("div1");
        oDiv.onclick = function (ev) {
            this.style.width = '200px';
            this.style.height = '200px';
        }
    }
</script>

</body>
</html>

hover伪类所有的标签都可以用；
多属性的过渡效果的写法如下；

div{
    transition-property:width,height;
    transition-duration:5s,5s;
}

2、其他属性

transition-delay：设置动画延迟的；
transition-timing-function：设置动画的速度的（linear、ease-in-out）

3、连写格式

transition：属性时长速度延迟；
后面两个值可以省略；
多属性依旧使用逗号隔开即可；
多属性的过渡都一样的话可以这样写：transition：all 5s；

二、2d转换模块

1、基本入门

平移：`transform：translate（x，y）`

旋转：`transform：rotate（45deg）`

缩放：`transform：scale（x，y）`

以1为界，大于为放大，水平垂直方向的缩放一样时可以只写一个值；

综合：`transform：rotate(45deg) translate(x，y) scale(x，y)`

旋转的同时坐标系也跟着旋转，会影响后面的平移；
书写的顺序也是会影响最后的转换效果的

2、形变中心

默认就是元素的中心点，可以通过设置来改变；
transform-origin三种取值：像素、百分比、关键字
transform-origin：50% 50%；

3、旋转轴向

rotateX（）；rotateY（）；rotateZ（）；
默认绕 Z 轴转；

4、透视属性

就是近大远小的视觉效果；
perspective：500px；后面的属性值的含义是从多远的距离看，越近效果越明显；
perspective 这个属性要加在父容器上面，子元素可以看到这种效果；

5、阴影

盒子阴影

box-shadow：水平偏移垂直偏移模糊度阴影扩展颜色
简写只要前面的3个属性即可；
阴影分内外阴影，默认外阴影，默认颜色和盒子的内容颜色一样；

box-shadow: 10px 10px 5px red;

文字阴影

text-shadow：水平偏移垂直偏移模糊度颜色
颜色的默认和盒子的一样；

三、动画模块

1、基本使用

动画与过渡的异同

动画无需人为触发，而过渡需要；

动画的三要素

动画名称：animation-name
动画时长：animation-duration
动画内容：

@keyframes fff｛
    from{
        ...
    }
    to{
        ...
    }
｝

/*创建动画的第二种形式*/
@keyframes fff｛
    0%{
        ...
    }
    50%{
        ...
    }
    100%{
        ...
    }
｝

2、其他属性

animation-delay：动画延迟；
animation-timing-function：动画的速度；
animation-iteration-count：动画的循环次数；
animation-direction：是否来回运动；
animation-play-state：动画暂停或播放状态；
animation-fill-mode：规定动画开始或者结束时的状态（none、backwards、forwards、both）；

连写

animation：名称时长速度延迟次数往返
简写保证三要素即可

div{
	animation:run 2s linear 5s infinite alternate;
}
@keyframes run {
    from{
        width:100px;
    }
    to{
        width:200px;
    }
}

四、3d转换模块

要想呈现3d效果给父元素加 transform-style：preserve-3d；

1、正方体

ul li 布局；每个面进行平移和旋转的变化，注意旋转的角度；
为保证前后上下四个面的内容正确显示，先旋转再平移，旋转的角度分别为 90、180、270、0
左右的两个面和内容无关，随意；

2、长方体

在正方体的基础上前后上下四个面水平方向进行缩放；左右两个面根据缩放的情况增加平移的距离；
父元素被缩放了，子元素也会跟着缩放；

五、背景相关

1、背景尺寸(background-size)

具体属性值可以是
- 具体像素；
- 百分比；
- 宽或高等比拉伸（只需把宽或高设置成为 auto 即可）；
- cover：等比拉伸知道背景填满元素；
- contain：等比拉伸直到宽或者高达到元素额界限；

2、背景定位区域(background-origin)

设置背景图片从盒子模型的哪个部分开始填充；
属性值：padding-box（默认）；border-box；content-box；

3、背景绘制区域(background-clip)

属性值和 origin 的属性值是一样的；默认是border；

4、多重背景设置

就是给一个元素设置多张的背景图片，用背景定位的属性来布局；

div{
    background:url("") no-repeat top left,url("") no-repeat top right;
}

六、媒体查询（@media）

1、概述

使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
@media 可以针对不同的屏幕尺寸设置不同的样式，可以用来设计响应式的页面；
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；

2、针对浏览器尺寸的CSS

@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {
    body{background:grey}
}

3、针对特定方向的CSS

@media screen and (orientation: landscape) {
    #nav { float: left }
}

@media screen and (orientation: portrait) {
    #nav { float: none }
}
/*landscape 是宽大于高*/

4、针对不同设备的CSS

设备宽高

@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {}

像素比率

@media (device-pixel-ratio: 2) {
    body { background: url(twiceasbig.png) }
}

移动设备禁用缩放：head 里面设定元标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

设备的DPI

@media screen and (resolution: 326dpi) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }

宽高比

@media screen and (device-aspect-ratio: 16/9) { /* */ }

5、其他的 @ 规则

@import “test.css”;引入其他的样式表，可以将长而复杂的样式表剪短用这个引入，更加方便管理
@font-face;用来引入我们想要使用的字体

@font-face {
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}
p { font-family: "font of all knowledge", arial, sans-serif; }

stanwuc

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 的各种模块

 过渡模块1、基本使用使用的三要素：属性变化；哪个属性需要过渡；效果的时长；hover伪类所有的标签都可以用；注意：多属性的过渡效果的写法如下；div{ transition-property:width,height; transition-duration:5s,5s;}2、其他属性transition-delay：设置动画延迟的；t...
复制链接

扫一扫