CSS3核心技术

已于 2022-05-02 17:54:30 修改
阅读量424 收藏
点赞数 1
文章标签： css3 css html
于 2022-05-02 17:53:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58878709/article/details/124534632
版权

CSS3核心技术

CSS3基础

前言

  • css3是CSS（层叠样式表）技术的升级版本
  • css3功能更为强大，很多浏览器不支持css2.0，现在在css3中重新使用，并且能兼容css3样式
  • css3与css使用语法基本一样

一、过渡

1.1认识过渡

  1. 过渡指的就是关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中的每一帧状态
  2. 元素在初次渲染还没有结束的时候，是不可以触发过渡的
  3. 在大部分变换样式切换时，变换的组合的个数或位置不一样时，是不可以触发过渡的

2.2过渡的属性

  • transition-property
    指定过渡动画的属性（并不是所有的属性都可以动画）

语法：transition-property:none | all | property

属性值描述
none没有属性会获得过渡条件
all所有属性都会获得过渡效果
property定义应用过渡效果的CSS属性名称，多个名称之间用逗号隔开
  • transition-duration
    指定过渡动画的时间（0也要带单位）

语法：transition-duration：时间;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        #maxbox{
            width: 60%;
            height: 60%;
            border: 1px solid rebeccapurple;
            margin: 100px auto 0;
        }
        #box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: antiquewhite;
            transition-property: background,width,height;
            transition-duration: 1s,0s,1s;
            margin: auto; 
        }
        #box:hover{
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div id="maxbox">
    <div id="box"></div>
    </div>
</body>
</html>

效果图
图片效果

transition-timing-function
**作用：**指定过渡动画的形式（贝塞尔）

属性值描述
linear以相同速度开始到结束的过渡效果
ease先慢后快
ease-in先快后慢
ease-out以慢速结束
ease–in-out以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状
  • transition-delay
    作用：规定过渡效果何时开始

语法：transition-delay:时间；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        #maxbox{
            width: 60%;
            height: 60%;
            border: 1px solid rebeccapurple;
            margin: 100px auto 0;
        }
        #box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: antiquewhite;
            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 2s;
            margin: auto; 
        }
        #box:hover{
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div id="maxbox">
    <div id="box"></div>
    </div>
</body>
</html>

效果图
效果图

  • transtionend 事件
    在每个属性完成过渡时都会触发这个事件

二、变形

2.1 2D变形（transform）

rotate旋转
translate平移
skew斜切
scale缩放

旋转测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 100px auto;
			width: 200px;
			height: 200px;
			background: pink;
			transition: 3s;
        }

        body:hover #box{
			transform: rotate(360deg);
		}
    </style>
</head>
<body>
    <div id="box">
        bgyl
    </div>
</body>
</html>

平移测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 100px auto;
			width: 200px;
			height: 200px;
			background: pink;
			transition: 3s;
        }

        body:hover #box{
			transform: translateX(300px);
		}
    </style>
</head>
<body>
    <div id="box">
        bgyl
    </div>
</body>
</html>

斜切测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 100px auto;
			width: 200px;
			height: 200px;
			background: pink;
			transition: 3s;
        }

        body:hover #box{
			transform: skewY(-30deg);
		}
    </style>
</head>
<body>
    <div id="box">
        bgyl
    </div>
</body>
</html>

缩放测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 100px auto;
			width: 200px;
			height: 200px;
			background: pink;
			transition: 3s;
        }

        body:hover #box{
			transform: scale(.5);
		}
    </style>
</head>
<body>
    <div id="box">
        bgyl
    </div>
</body>
</html>
  • 基点变换
参数描述
x-axis定义视图被置于x轴的何处
y-axis定义视图被置于y轴的何处
z-axis定义视图被置于z轴的何处

2.2 3D变形

  • 旋转
rotateX()围绕X轴旋转
rotateY()围绕Y轴旋转
rotateZ()围绕Z轴旋转
rotate3d()同时设置三个轴
  • prespective属性（景深）
    理解：景深就是我们的肉眼距离显示器的距离
    作用：构建3D舞台，决定用户的肉眼距离屏幕的水平距离！使3D变换的元素具有近大远小的感觉

灭点：
灭点指的是立体图形各条边的延伸线所产生的相交点，透视点的消失点

景深和灭点的关系
景深越大，灭点越远，元素变形越小
景深越小，灭点越近，元素变形越大
景深是一个不可继承属性，但他可以作用于所有的后代元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #maxbox{
            width: 100px;
            height: 100px;
            padding: 100px;
            border: 1px solid #f00;
            perspective: 100px;
        }
        #box{
			width: 100px;
			height: 100px;
			background: pink;
			transition: 1s;
        }

        body:hover #box{
			transform: rotate3d(1,1,1,360deg);
		}
    </style>
</head>
<body>
<div id="maxbox">
    <div id="box">
        bgyl
    </div>
</div>
</body>
</html>
  • 其他方法属性
方法名称描述
translate3d(x,y,z)定义3d位移
translateX(x)定义3d位移，仅使用用于X轴的值
translateY(y)定义3d位移，仅使用用于Y轴的值
translateZ(z)定义3d位移，仅使用用于Z轴的值
scale3d(x,y,z)定义3d缩放
scaleX(x)定义3d缩放,通过给定一个X轴的值
scaleY(y)定义3d缩放,通过给定一个Y轴的值
scaleZ(z)定义3d缩放,通过给定一个Z轴的值
  • transform-style
  • 作用：构建3D舞台，使3d舞台有层次感
  • transform-style是一个不可继承属性，他只作用于子元素

三、动画

3.1动画关键帧（@keyframes）

animation属性只有配合**@keyframes**才能实现动画效果
animationname：表示当前动画的名称
keyframes-selector:关键帧选择器
css-styles：定义执行到当前关键帧是对应的动画效果

语法：@keyframes animationname{
keyframes-selector(css-styles)
}

3.2 关键帧的名字（animation-name）

语法：animation-name:keyframes | none;

3.3 动画周期的时长（animation-duration）

语法：animation-duration: time;

3.4 animation-timing-function属性

作用：作用于一个关键帧周期而非整个动画周期

属性值描述
linear动画从头到尾速度相同
ease默认值，动画低速开始，然后加快，在结束前变慢
ease-in动画低速开始
ease-out动画低速结束
ease-in-out动画低速开始和结束

语法：animation-timing-function: value;

3.5循环关键帧的次数（animation-iteration-count）

语法：animation-iteration-count: number | infinite;

3.6 执行动画效果延迟的时间（animation-delay）

语法：animation-delay: time;

3.7动画播放的方向 （animation-direction）

改变关键帧的执行方向，还会影响animation-timing-function的形式

语法：animation-direction: normal | alternate;

4、媒体

4.1嵌入视频

<video src="视频文件路径" controls="controls"></video>

4.2嵌入音频

<audio src="视频文件路径" controls="controls"></audio>

4.3媒体属性

  1. List item width（可加max min前缀）
  2. height（可加max min前缀）
  3. device-width（可加max min前缀）
  4. device-pixel-ratio（可加maxmin前缀，需要加webkit前缀)
  5. orientation portrait竖屏 landscape横屏

总结

某些样式介绍只给出了代码，没有效果图，望谅解，看效果直接复制代码查看即可！！

希望这篇文章能对大家有所帮助

杰仔正在努力
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3核心
进步中的小杨
09-12 112
复杂选择器 兄弟选择器 兄弟元素：具备相同父元素的平级元素之间称为兄弟元素 兄弟选择器只能找弟弟，不能找哥哥。只能往后找不能往前找 <div id="div1"></div> <p class="p2"></p> <div id="div3"></div> <b></b> <style> /***********************1. 相邻兄弟选择器********************
Css3详解
Zheng_xinle的博客
08-30 7167
Css3 一、什么是Css3? “CSS3是CSS（层叠样式表）技术的升级版本，是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能。CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。” 二、Css3可以做什么？ css3可以使用的图片和脚本来实现的效果 比如：圆角、图片边框、文字阴影和盒阴景、渐变、个性化字体、多图片背景、过渡、动画、多栏布局、媒体查询等 Css3动画 一、Css3动画 CSS3 可以创建动画，它可以取代许多网
CSS3详解
clover_page的博客
04-12 3955
CSS3详解 一、CSS3 1-1、基本概念 层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 1-2、发展历程 CSS1.0：网页基本样式 CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，
css3相关技术
09-08
css3开发技术，新css标准，特性和使用指南
图解css3核心技术与实战
12-27
供大家学习参考，建议购买纸质书体验更好，一本有关于css3核心技术与实战的书
《图解CSS3核心技术与案例实战》PDF+源代码
05-06
《图解CSS3核心技术与案例实战》PDF，配套源代码。《图解CSS3核心技术与案例实战》将CSS3特性按模块功能分类，通过理论、图解、实战的方式向大家阐释CSS3每个特性功能。能帮助从事CSS3开发的前端工程师 系统掌握CSS3...
图解CSS3核心技术与案例实战
03-10
该书是学习CSS3的好书，通俗易懂，案例详尽，描述详细，带目录。
图解CSS3核心技术与案例实战pdf
05-16
图解CSS3核心技术与案例实战pdf 浅显易懂，分享学习！
图解Css3核心技术和案例源代码
01-31
图解Css3核心技术和案例书中各个章节使用的源代码，边看书边对着源码联系效果更好！
图解CSS3核心技术与案例实战_带书签
03-24
《图解CSS3核心技术与案例实战》讲解了CSS3的新特性，有很多案例。 网上资源很多不带书签，我额外加了书签
css3核心属性
weixin_34184561的博客
01-12 98
圆角效果以前：做一个图片做为按钮背景现在：border-radius 半径值阴影以前：带阴影的图片现在：盒阴影box-shadow 文本阴影text-shadow透明度元素透明和颜色透明 opacity 指定0-1之间的小数数值媒体查询用途 响应式布局@mediaBootstrap源码中有大量使用...
css3简介
xuekatie的博客
01-13 585
css(cascading style sheet,层叠式样式表)是用来给html标签添加样式的语言 css3是css的最新版本，增加了大量的样式，动画，3D特效和移动端特性等 前端三层 结构层HTML 搭建结构，放置部件，描述语义 样式层CSS 美化页面，实现布局 行为层JavaScript 实现交互效果，数据收发，表单验证等 css使样式和结构分离 1.html负责结构，css负责样式 html和css怎么结合呢？ 1.“选择器”就是两者..
HTML5之HTML+CSS3技术介绍
王者归来之英雄有梦
03-22 4450
HTML5+CSS3技术介绍
CSS3 box-flex 弹性盒子布局
qq_16546829的博客
10-14 1899
本文将从css3 box-flex的属性来讲解弹性布局 所有demo的演示地址https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 利用弹性布局五大金刚进行布局的的在线显示 https://xluos.github.io/demo/flexbox/ 入门必备  实现弹性布局必备 第一步：一般的布局首先html代码设置嵌套关系...
我们应该了解的CSS3技术
doublesmile的专栏
11-15 388
有了CSS3，网站开发及网站设计都发展到一个更高的层次。在本文中，作者收集了一些惊人的使用CSS3技术的例子，如果多数浏览器能兼容CSS3，那么这些技术很可能会被广泛接受。  1. Color animate any shape with CSS3 and a PNG 第一个展示的是一个仅仅使用了CSS3技术的有趣的成果：一个可以变换背景的PNG图像。背景使用了CSS3转变。不是那种可以直
CSS3基本知识与技术大总结
不知名博客
04-14 252
文章目录属性选择器结构伪类选择器伪元素选择器2D转换 (transform)动画3D转换浏览器私有前缀 属性选择器 属性选择器 button[disabled]{ //选择的是 即是button 又有disabled 这个属性的元素 权重高于标签选择器 cursor: default; } button[disabled="disbaled"]{ curso...
CSS3
王道长的技术博客
05-23 1472
一、CSS3中新特性样式篇 1.1 背景 1.1.1 background-origin： 规定背景图片的定位区域。 padding-box 背景图像相对内边距定位（默认值） border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】 content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 备注：默认盒子的背景图片是在盒子的内...
一些CSS3新技术
weixin_34293911的博客
03-02 254
前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音，并详细说明了每个新技术目前有哪些浏览器兼容。 级联样式表在13年前被引入...
html5css3教程
最新发布
04-27
HTML5和CSS3是用于构建网页和网页样式的两种核心技术。HTML5是最新的HTML标准，提供了更多的语义化标签和功能，而CSS3则是最新的CSS标准，引入了更多的样式效果和布局方式。 HTML5教程主要包括以下内容： 1. HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值