第十节：CSS3 高级应用

最新推荐文章于 2022-04-30 22:57:52 发布
最新推荐文章于 2022-04-30 22:57:52 发布
阅读量314 收藏 3
点赞数 1
分类专栏： 全栈开发学习日记 # 第二章：CSS 样式 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41952539/article/details/107936271
版权

第八课时：CSS3 高级应用

2.8.1 过渡

CSS3 提供的过渡属性，可以在不使用 Flash 的动画或者 JavaScript 脚本的情况下，为元素从一种 样式转变为另一种样式时添加效果，如：渐显、渐弱、动画快慢 等


transition-property 属性

用于指定应用过渡效果的 CSS 属性的名称，通常在用户将指针移动到元素上时发生，当指定的 CSS 属性改变时，过渡效果才开始

属性值说明
none没有属性会获得过渡效果
all所有属性都将获得过渡效果
property定义应用过渡效果的 CSS 属性名称，多个名称之间以逗号隔开
语法格式：
transition-property: none | all | property;

<head>
    <style type="text/css">
        /* 设置 div 的宽高，字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            background-color: blue;
            -webkit-transition-property: background-color;		/* Safari、Chrome 浏览器兼容代码 (-webkit-) */
            -moz-transition-property: background-color;			/* Firefox 浏览器兼容代码 (-moz-) */
            -o-transition-property: background-color;			/* Opera 浏览器兼容代码 (-o-) */
        }
    </style>
</head>
<body>
    <div> 使用 transition-property 属性 改变元素背景颜色 </div>
</body>

transition-duration 属性

定义过渡效果所花费的时间，默认值为 0，常用单位是 秒(s) 或 毫秒(ms)

语法格式：
transition-duration: time;

<head>
    <style type="text/css">
        /* 设置 div 的宽高，字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* 改变元素背景颜色 */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* 指定过渡效果所花费的时间 */
            -webkit-transition-duration: 5s;		/* Safari、Chrome 浏览器兼容代码 (-webkit-) */
            -moz-transition-duration: 5s;			/* Firefox 浏览器兼容代码 (-moz-) */
            -o-transition-duration: 5s;			/* Opera 浏览器兼容代码 (-o-) */
        }
    </style>
</head>
<body>
    <div> 使用 transition-duration 属性 定义过渡效果发费的时间 </div>
</body>

transition-timing-function 属性

规定过渡效果的速度曲线，默认值为 “ease”

属性值说明
linear指定以相同速度开始至结束的过渡效果，等同于：cubic-bezier(0,0,0,1)
ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于：cubic-bezier:(0,25,0.1,0,35,1)
ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于：cubic-bezier(0,0,0.58,1)
ease-out指定以慢速结束（淡出效果）的过渡效果，等同于：cubic-bezier(0,42,0,0.58,1)
ease-in-out指定以慢速开始和结束的过渡效果，等同于：cubic-bezier(0,42,0,0.58,1)
cubic-bezier(n,n,n,n)定义用于加速或减速的贝赛尔曲线的形状，它们的值在0~1
语法格式：
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

<head>
    <style type="text/css">
        /* 设置 div 的宽高，字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* 改变元素背景颜色 */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* 指定过渡效果所花费的时间 */
            -webkit-transition-duration: 5s;
            -moz-transition-duration: 5s;
            -o-transition-duration: 5s;
            
            /* 指定动画以慢速开始和结束的过渡效果 */
            -webkit-transition-timing-function: ease-in-out;	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transition-timing-function: ease-in-out;		/* Firefox 浏览器兼容代码 */
            -o-transition-timing-function: ease-in-out;			/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 transition-duration 属性 指定过渡效果的速度曲线 </div>
</body>

transition-delay 属性

规定过渡效果从何时开始，默认值为 0，常用单位是 秒(s) 或 毫秒(ms)

属性值可以 为 正整数、负整数 和 0

  • 当设置为负数时，过渡动作会从该时间点开始，之前的动作被截取
  • 设置为正数时，过渡动作会延迟触发
语法格式：
transition-delay: time;

<head>
    <style type="text/css">
        /* 设置 div 的宽高，字体变粗 */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* 改变元素背景颜色 */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* 指定过渡效果所花费的时间 */
            -webkit-transition-duration: 5s;
            -moz-transition-duration: 5s;
            -o-transition-duration: 5s;
            
            /* 指定动画以慢速开始和结束的过渡效果 */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            
            /* 指定动画延迟 2秒触发 */
            -webkit-transition-delay: 2s;	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transition-delay: 2s;		/* Firefox 浏览器兼容代码 */
            -o-transition-delay: 2s;		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 transition-delay 属性 指定过渡效果延迟触发 </div>
</body>

transition 属性

复合属性，用于在一个 属性中设置 transition-property、transition-duration、transition-timing-function、transition-delay 四个过渡属性

无论单个属性还是简写属性，使用时都可以实现多个过渡效果

如果设置 简写属性 可以设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔

语法格式：
transition: property duration timing-function delay;

/* 指定 边框 过渡时间5s，以慢速开始和结束，延迟2秒触发 */
transition: border-radius 5s ease-in-out 2s;

2.8.2 变形

CSS3 中，通过 transform 属性 可以实现变形效果，如：移动、倾斜、缩放 以及 翻转元素 等

认识 transform 属性

transform 属性 的默认值为 none，适用于内联元素和块元素，表示不进行变形

transform-function 用于设置变形函数，可以是一个或多个变形函数列表

transform-function 函数说明
matrix()定义矩形变换，即：基于 X 和 Y 坐标重新定位元素的位置
translate()移动元素对象，即：基于 X 和 Y 坐标重新定位元素
scale()缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数 和 小数
rotate()旋转元素对象，取值为一个度数值
skew()倾斜元素对象，取值为一个度数值
语法格式：
transform: none | transform-functions;

2D 转换

transform 属性 可以实现 元素的 平移、缩放、旋转、倾斜 及 旋转 效果，这些变形才做都是以元素的中心点为基准进行的

  1. 平移

    使用 translate() 方法 能够重新定义元素的坐标，实现平移效果。该函数包含两个参数，用于定义 X轴 和 Y 轴坐标

    translate() 方法 移动元素时，基点默认为元素的中心点，然后指定 X 坐标 和 Y 坐标 进行移动

    语法格式：
transform: translate(x-value, y-value);

    <head>
    <style type="text/css">
        /* 设置 div 的宽高，字体变粗 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: translate(100px, 30px);
            -ms-transform: translate(10px, 20px);		/* IE9 浏览器兼容代码 */
            -webkit-transform: translate(100px, 20px);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: translate(100px, 20px);		/* Firefox 浏览器兼容代码 */
            -o-transform: translate(100px, 20px);		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 translate() 方法 平移元素 </div>
</body>

  1. 缩放

    scale() 用于缩放元素大小，该函数包含两个参数值，分别用来定义 宽度（X轴）和 高度（Y轴）的缩放比例

    x-axis 和 y-axis 参数值可以是 正数、负数 和 小数

    • 正数：放大元素
    • 负数：翻转元素，然后再缩放元素
    • 小数：小于 1 的小数可以缩小元素
    语法格式：
transform: scale(x-axis, y-axis);

    <head>
    <style type="text/css">
        /* 设置 div 的宽高 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: scale(2,3);
            -ms-transform: scale(2,3);		/* IE9 浏览器兼容代码 */
            -webkit-transform: scale(2,3);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: scale(2,3);		/* Firefox 浏览器兼容代码 */
            -o-transform: scale(2,3);		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 scale() 方法 放大缩放属性 </div>
</body>

  1. 倾斜

    skew() 方法 能够让元素倾斜，该函数包含两个参数值，分别用来定义 X轴 和 Y轴 坐标倾斜的角度

    x-angle 表示相对于 X轴 进行倾斜，y-angle 表示相对于 Y轴 进行倾斜。如果省略了第二个值，则取默认值 0

    语法格式：
transform: skew(x-angle, y-angle);

    <head>
    <style type="text/css">
        /* 设置 div 的宽高 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: skew(20deg, 30deg);
            -ms-transform: skew(20deg, 30deg);		/* IE9 浏览器兼容代码 */
            -webkit-transform: skew(20deg, 30deg);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: skew(20deg, 30deg);		/* Firefox 浏览器兼容代码 */
            -o-transform: skew(20deg, 30deg);		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 skew() 进行倾斜 </div>
</body>

  1. 旋转

    rotate() 方法 能够旋转指定的元素对象，主要在二维空间内进行操作。该方法允许传入负值，元素将逆时针旋转

    语法格式：
transform: rotate(angle);

    <head>
    <style type="text/css">
        /* 设置 div 的宽高 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: rotate(30deg);
            -ms-transform: rotate(30deg);		/* IE9 浏览器兼容代码 */
            -webkit-transform: rotate(30deg);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: rotate(30deg);		/* Firefox 浏览器兼容代码 */
            -o-transform: rotate(30deg);		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 rotate() 进行旋转 </div>
</body>

  1. 更改变换的中心点

    transform-origin 属性 可以 改变元素的中心点

    如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开

    参数值介绍：

    • x-axis：定义视图被置于 X轴 的何处。可能的值有：left、center、right、length、%
    • y-axis：定义视图被置于 Y轴 的何处。可能的值有：top、center、bottom、length、%
    • z-axis：定义视图被置于 Z轴 的何处。可能的值有：length
    语法格式：
transform-origin: x-axis y-axis z-axis;

    <head>
    <style type="text/css">
        /* 设置 div 的宽高 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: rotate(30deg);
            -ms-transform: rotate(30deg);		/* IE9 浏览器兼容代码 */
            -webkit-transform: rotate(30deg);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: rotate(30deg);		/* Firefox 浏览器兼容代码 */
            -o-transform: rotate(30deg);		/* Opera 浏览器兼容代码 */
            
            transform-origin: 20% 40%;			/* 更改原点坐标位置 */
        }
    </style>
</head>
<body>
    <div> 使用 transform-origin 属性 更改坐标中心点 </div>
</body>

3D 转换

  1. rotateX() 方法

    用于指定元素围绕 X轴 旋转

    参数 a 用于定义旋转的角度值，单位为 deg。值为正数时，元素围绕 X轴 顺时针旋转，负数时，逆时针旋转

    语法格式：
transform: rotateX(a);

    <head>
    <style type="text/css">
        /* 设置 div 的宽高 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: rotateX(30deg);
            -ms-transform: rotateX(30deg);		/* IE9 浏览器兼容代码 */
            -webkit-transform: rotateX(30deg);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: rotateX(30deg);		/* Firefox 浏览器兼容代码 */
            -o-transform: rotateX(30deg);		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 rotateX() 方法围绕 X轴 旋转 </div>
</body>

  1. rotateY() 方法

    用于指定元素围绕 Y轴 旋转

    参数 a 用于定义旋转的角度值，单位为 deg。值为正数时，元素围绕 Y轴 顺时针旋转，负数时，逆时针旋转

    语法格式：
transform: rotateY(a);

    <head>
    <style type="text/css">
        /* 设置 div 的宽高 */
        div { width: 400px; height: 200px; }
        
        div {
			transform: rotateY(30deg);
            -ms-transform: rotateY(30deg);		/* IE9 浏览器兼容代码 */
            -webkit-transform: rotateY(30deg);	/* Safari、Chrome 浏览器兼容代码 */
            -moz-transform: rotateY(30deg);		/* Firefox 浏览器兼容代码 */
            -o-transform: rotateY(30deg);		/* Opera 浏览器兼容代码 */
        }
    </style>
</head>
<body>
    <div> 使用 rotateX() 方法围绕 Y轴 旋转 </div>
</body>

    rotateZ() 方法

    rotateZ() 函数 和 rotateX() 函数、rotateY() 函数 功能一样，区别在于 rotateZ() 函数 用于制定一个元素围绕 Z轴 旋转

    仅从视觉角度上看，rotateZ() 函数让元素顺时针或逆时针旋转，与 rotate() 效果等同，但它不是在 2D 平面上的旋转

  2. rotate3D() 方法

    在三维空间里，轴的旋转是围绕一个 [x,y,z] 向量并经过元素原点

    属性值：

    • x：代表横向坐标位移向量的长度
    • y：代表纵向坐标位移向量的长度
    • z：代表 Z轴 位移向量的长度
    • angle：角度值，主要用来指定元素在 3D 空间旋转的角度。值为正数时，顺时针旋转，负数时，逆时针旋转

其他转换属性及方法
转换属性说明
transform向元素应用 2D 或 3D 转换
transform-origin允许改变被转换元素的位置
transform-style规定被嵌套元素如何在 3D 空间中显示
perspective规定 3D 元素的透视效果
perspective-origin规定 3D 元素的底部位置
backface-visibility定义元素在不面对屏幕时是否可见
转换方法说明
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换没使用 16个值 的4*4矩阵
translate3d(x,y,z)定义 3D 转换
translateX(x)定义 3D 转换，仅使用用于 X轴 的值
translateY(y)定义 3D 转换，仅使用用于 Y轴 的值
translateZ(z)定义 3D 转换，仅使用用于 Z轴 的值
scale3d(x,y,z)定义 3D 缩放转换
scaleX3d(x)定义 3D 缩放转换，通过给定一个 X轴 的值
scaleY3d(y)定义 3D 缩放转换，通过给定一个 Y轴 的值
scaleZ3d(z)定义 3D 缩放转换，通过给定一个 Z轴 的值
rotate3d(x,y,z)定义 3D 旋转
rotateX(x)定义 X轴 的 3D 旋转
rotateY(y)定义 Y轴 的 3D 旋转
rotateX(z)定义 Z轴 的 3D 旋转
perspective(n)定义 3D 转换元素的透明视图

2.8.3 动画

@keyframes

使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态

@keyframes 规则用于创建动画，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐变为新样式的动画效果

属性值：

  • animationname：表示当前动画的名称，将作为引用时的唯一标识，因此不能为空
  • keyframes-selector：关键帧选择器，即指定当前关键帧要应用到的整个动画过程中的位置，值可以是一个 百分比、from 或 to
    • 其中，from 和 0% 效果相同，表示动画的开始，to 和 100% 效果相同，表示动画的结束
  • css-style：定义执行到当前关键帧时对应的动画状态，由 CSS 样式定义，不能为空
语法格式：
@keyframes 'animationname' {
    keyframes-selector{css-styles;}
}


/* 动画完全透明开始，到完全不透明结束 */

@keyframes 'appear' {
    /* 方法一： */
    0% { opacity: 0;}
    100% { opacity: 1;}
    
    /* 方法二： */
    from { opacity: 0;}
    to { opacity: 1;}
    
    /* 方法三：实现淡入淡出效果*/
    from,to {opacity: 0;}		/* 动画开始结束状态为：完全透明 */
    20%,80% { opacity: 1;}		/* 动画的中间状态为：完全不透明 */
}

animation-name 属性

animation-name 属性 用于定义动画名称，为 @keyframes 动画规定名称。初始值为 none，适用于所有块元素和行内元素

animationname 参数用于规定需要绑定到选择器的 keyframe 的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画

语法格式：
animation-name: keyframename | none;

div {
    animation-name: header;		/* 绑定动画名称 */
}

@keyframes header {				/* 定义动画效果 */
    from { opacity: 0;}
    to { opacity: 1;}
}

animation-duration 属性

animation-duration 用于定义动画完成所需要的时间，以秒（s）或者毫秒（ms）计算，默认值为 0

语法格式：
animation-duration: time;


div {
    animation-name: header;
    animation-duration: 2s;		/* 设置动画时长 */
}

@keyframes header {
    from { opacity: 0;}
    to { opacity: 1;}
}

animation-timing-function 属性

animation-timing-function 用于规定动画的速度曲线，可以定义使用哪种方式来执行动画效果，默认值为 ease，适用于所有的块元素和行内元素

属性值说明
linear动画从头到尾的速度是相同的
ease默认。动画慢速开始，逐渐加快，再以慢速结束
ease-in动画慢速开始
ease-out动画慢速结束
ease-in-out的哦动画以慢速开始和结束
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0~1 的数值
语法格式：
animation-timing-function: value;


div {
    animation-timing-function: ease-in;
}

animation-delay 属性

animation-delay 属性用于定义执行动画效果之前延迟的时间，即动画什么时候开始

语法格式：
animation-delay: time;


div {
    animation-delay: 2s;		/* 动画延迟 2s 开始 */
}

animation-iteration-count 属性

animation-iteration-count 属性用于定义动画的播放次数。初始值为 1，适用于所有的块元素和行内元素

  • 如果属性值为 number，则用哪个与定义动画播放的次数
  • 如果属性值是 infinite，则指定动画循环播放
语法格式：
animation-iteration-count: number | infinite;


animation-iteration-count: 2;			/* 定义动画播放 2次 */
-webkit-animation-iteration-count: 2;	/* Safari 和 Chrome 浏览器兼容代码 */

animation-direction 属性

animation-direction 属性定义当前动画播放的方向，即动画播放完毕后是否逆向交替循环。适用于所有的块元素和行内元素

该属性有两个值，默认值为 normal，表示动画每次都会正常显示。如果属性值为 alternate，则动画会在奇数次数正常播放，而在偶数次数逆向播放

语法格式：
animation-direction: normal | alternate;


div {
    animation-direction: alternate;				/* 动画会在奇数次数正常播放，偶数次数逆向播放 */
    -webkit-animation-direction: alternate;		/* Safari 和 Chrome 浏览器兼容代码 */
}

animation 属性

与 transition 属性一样，animation 属性也是一个简写属性，用于在一个属性值中设置 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction 六个动画属性

使用 animation 属性时，必须指定 animation-name 和 animation-direction 属性，否则持续的时间为 0，并且永远不会播放动画

语法格式：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;


/* 必要属性 */
animation: mymove alternate;

animation: mymove 5s linear 2s 3 normal;		/* mymove 动画，时长5秒，均速播放，延迟2秒播放，播放3次，正常显示 */
孤安先生
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3高级应用
04-09
CSS3高级应用
第15周 CSS3高级应用（2）.rar
06-01
在本课程"第15周 CSS3高级应用（2）"中，我们将深入探讨CSS3的一些高级特性，这些特性能够帮助开发者实现更具创新性和交互性的网页设计。虽然CSS3已经广泛应用于网页布局和美化，但其高级功能往往不被新手所熟知。...
【CSS3高级应用】
橙子的博客
04-30 888
CSS3高级应用一、页面中的多媒体嵌入二、CSS3中过渡效果一级目录 一、页面中的多媒体嵌入 网页除了可以放置图片和文字，还可以放置音频和视频。 1、视频： 标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示内部的子元素。 (1)视频格式 <video src=“视频文件名” controls muted autoplay loop><p>你的浏览器不支持此视频格式<p></video> .mp4：mpe
CSS3 高级应用（过渡、变形、动画）、滤镜、精灵图、字体图标、CSS初始化、及相关技巧等
YuLong的博客
04-29 1680
文章目录CSS3高级应用过渡变形动画多媒体嵌入图像视频音频 CSS3高级应用 在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。 过渡 属性 描述 属性值 transition-property 用于指定过渡效果 ①none ②all ③prpperty（定义多个名称用逗号分隔） transition-duration 用于指定过渡的持续时间 s/ms
css3高级应用
weixin_45740885的博客
06-02 94
过渡transition transition-property; 指定过渡属性。 transition-duration； 指定时间。 transition-timing-function； 指定效果（平缓，快慢，慢块。。。。）。 transition-delay； 上什么时候开始。 例如： transition：border-radius 5s ease-in-out 2s; 转换transform translate(x-value,y-value); x为正，向右；y为正，向下； s..
css3share:CSS3的技术份额
05-09
随着浏览器对CSS3特性的支持不断加强，越来越多的开发者开始尝试并依赖CSS3来创建响应式布局、动画效果、高级选择器以及更精细的页面控制，从而推动了CSS3在网页设计领域的应用普及和技术份额的增长。 【标签】：...
HTML5应用开发技术-CSS3的高级属性.pptx
03-03
这些高级CSS3特性极大地提升了网页设计的灵活性和创意性，使得开发者能够创建出更加美观、动态且交互性强的网页应用。在实际开发中，结合HTML5的新特性，如canvas、svg、web storage等，可以构建出更富于表现力和...
圆角魅力：CSS border-radius全攻略
最新发布
07-24
本篇文章将详细介绍CSS中的`border-radius`属性，包括其基本概念、语法使用、高级技巧及其在实际项目中的应用案例，旨在为读者提供全面而深入的理解。 #### 一、`border-radius`属性简介 `border-radius`属性自CSS...
css3参考手册
05-19
CSS3（层叠样式表第三版）是Web设计领域中一个重要的里程碑，它扩展了CSS2.1的功能，引入了许多新的特性和改进，为网页设计师提供了更为丰富的表现力和控制力。这篇详尽的指南将深入解析CSS3的关键概念、语法以及...
css3高级选择器使用方法
09-25
2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。今天就介绍css3选择器的使用方法
css高级应用
weixin_39580806的博客
07-10 347
定位(position)属性及应用 值 描述 absolute 设置绝对定位的元素，相对于具有相对定位属性的父级元素偏移元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定(...
CSS3学习（九） 更高级的CSS用法
puppyand123的博客
07-14 406
面向对象的CSS思想 1.作用： ①代码复用，减小代码体积 ②提高渲染效率 ③建立起组件库思想、栅格布局、减少选择器，提升思考的格局2.注意： ①结构与皮肤分离 ②容器与内容分离 ③抽象出可重用元素，建立组件库 ④避免ID选择器，重用度为0，除非用在Js中官方网站：http://www.oocss.org 常用css库：normalnize.css/resize.css/Neat.
CSS3的高级应用，对于过度属性的演示，transition and transform的展示，充分了解CSS3过渡效果等，让我们一起开始学习吧！！！
小小程序猿
05-20 369
第一个我要介绍的是transition-property 属性，它是用来指定过渡效果的css3的属性名称，过渡效果是用户鼠标移动在元素上时发生的！ 基本格式为{ none（没有属性会得到效果。） all（全部属性都会得到效果！） property(定义应用过度的名称，多个名称之间用逗号隔开！) } 下图使用了transition的四个效果，但是总体来说是没有问题的，不明白的小伙伴可以去看下书，这里我就不展开讲了。 <!doctype html> <html> <head&gt
CSS3高级
weixin_30767921的博客
11-12 67
Day01 复杂选择器 内容生成 多列 CSSHack(浏览器兼容) 1、兄弟选择器 匹配指定元素的相邻兄弟元素 1、相邻兄弟选择器 匹配相邻的元素 匹配当前元素【后面】的【一个】元素，前提两者必须拥有相同父元素 语法： selctor1+selector2 通过 + 作为结合符 eg: di...
HTML5+CSS3学习笔记（第5章）CSS3高级应用
fangpihuiyu的博客
02-04 471
HTML5+CSS3学习笔记（第5章）CSS3高级应用 今天是居家隔离的第3天，加油!加仓自己！ 5.1框模型 也可以称为盒模型 外边距 margin 上右下左 margin：0 auto 内边距 padding 边框border- 5.2布局常用属性 5.3动画与特效 ...
CSS3高级篇：滤镜
asd33157691的博客
09-16 236
CSS3高级篇：滤镜 好了，这是本人的第一篇博文，希望给读者们带来技术上的提升 本文主要介绍CSS3里的filters（没有接触过这个属性的请自行百度） 基本用法 OK废话不多说，直接上效果图 CSS代码 img { filter: opacity(25%); filter: grayscale(50%); filte...
CSS3的高级特性
weixin_30632089的博客
07-19 70
CSS3对响应式设计非常有用：使用CSS3替代图片，在有带宽限制的网页中可有效减少http请求（从而使网页加载更快），并可使网页更灵活、更容易维护。 在开发CSS3时，要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。 1.文字阴影 　　1.基本语法 　　.element{ 　　　　text-shadow:1px 1px 1px #cccccc; 　　} 　　记住，阴...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤安先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值