CSS3新特性——字体图标、2D、3D变换、过渡、动画、多列布局

目录

一、Web字体

二、字体图标

三、2D变换

1.位移

(1)浮动

(2)相对定位

(3)绝对定位和固定定位

(4)位移

用位移实现盒子的水平垂直居中

2.缩放

利用缩放调整字体到12px以下(面试题)

3.旋转

4.多重变换

5.变换原点(变换自身的)

(1)通过关键词调整

(2)通过像素值调整

(3)通过百分比调整变换的原点

对位移没有影响

对缩放有影响

对旋转有影响

四、3D变换

1.3D空间与景深

(1)你想给谁弄成3D的首先得给他的父亲元素开始3D空间

(2)然后去给盒子设置旋转比如说绕x轴旋转30度

2.透视点的位置(就是观察者的位置)

3.位移

4.旋转

5.缩放

6.多重变换

7.背部可见性

五、过渡

1.基本使用

2.高级使用

3.复合属性

4.小案例

六、动画

1.帧

2.关键帧

3.动画

(1)基本使用

a.首先你得定义一个动画

b.然后让元素应用这个动画

c.最后规定这个动画应用的时间

(2)其他属性

(3)复合属性

(4)动画和过渡的区别(面试题)

七、多列布局

1.多列布局

2.多列图片


一、Web字体

当我们想用一种特殊的字体时,不是把包发给每一个用户让人家下载完再打开网站,而是直接把包引入你的工程里去,然后在要使用的页面里引入

@font-face{font-family:"hhhlll";src:url('./url.ttf');
}h1{font-family:'hhhlll';
}

上线之后直接把这个放服务器上,然后url直接写服务器地址就行

对于网页资源来说,上MB不好,服务器压力过大而且用户打开最开始是默认字体,过几秒下载完之后才是设置的hhhlll字体。

一个解决办法:你想为哪几个字去设置字体,给他们单独定制一下,下载那么大是因为下载了所有汉字的dddlll字体——阿里在线定制字体的平台:iconfont-webfont平台

阿里里面可供选择的字体不多,想要复杂的可以去其他网站付费定制,有两种方法引用,一种是直接用线上地址放url里,但是不太好用,还有一种是本地下载,像上面一样下载到自己的项目中(注意除了demo.html都要引入),而引入的内容font-face就在demo里面写好了,兼容性最佳,但是不能直接粘贴过来,注意url引入的实际位置。

二、字体图标

一个图片放大就会发虚,但是字体不断增大它的font-size不会发虚,利用这一点制作字体图标

<svg><use>都是H5新提出来的标签。

之前用过不再做笔记。

三、2D变换

1.位移

transform : translateX(50px);水平右移50px

translateY(50%);

可以填多少多少px,也可以填写百分比,注意我们之前说的百分比都是说的父亲的,但是在这里的百分比指的是自己长度的。

如果要实现水平和垂直方向都位移,不能写两个transform,这样会覆盖,下面这两种方法都可以,注意逗号的位置。

transform:translateX(50px) translateY(50px);
transform:translate(50px,50px);

脱离文档流:本来的要求是块级元素独占一行,行内元素从左到右排列,脱离文档流的元素可以自由定位,还可以浮在其他元素的上面。

脱离文档流的有浮动、固定定位、绝对定位、位移。对比如下:

(1)浮动

右浮动的情况下,脱离文档流直接在上层,左浮的情况下,浮动的元素不会盖住文字,文字会自动环绕在浮动元素周围。

(2)相对定位

仍然占据之前的位置(不脱离文档流),而且百分比相对的是父亲元素的。

(3)绝对定位和固定定位

fixed同上,不再占据之前的位置(脱离文档流),而且百分比相对的是父亲元素的。

(4)位移

还会占据之前的位置(不脱离文档流),百分比相对的是自己的。

注:1.浏览器对位移有优化,所以相对定位和位移要优先用位移

2.位移对行内元素无效

用位移实现盒子的水平垂直居中

<div style="position: relative;">
<div style="position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);">
</div>
</div>

之前我们是用完子绝父相之后用margin-left/top -自身的一半px,现在就直接用位移的50%就是自己的,不用再计算margin多少(margin的百分比是相对于最近的父亲元素的)

2.缩放

transform:scaleX();水平缩放,到0的时候看不见,如果是负值的话,里面的文字会翻转

scaleY();垂直缩放

scale(1.5);/ scaleX(1.5) scaleY(1.5)

注意:1.这块scale(1.5)如果只写一个值就是水平和竖直都放大1.5倍,但是位移那块只写一个就代表X轴的位移。

2.缩放不能应用在行内元素上

利用缩放调整字体到12px以下(面试题)

浏览器呈现的字体最小是12px,用下面代码可以实现10px字体

font-size:20px;
transform:scale(0.5);

3.旋转

transform:rotateZ(30deg);绕着元素的正中央顺时针旋转30度调整。注意Z轴才是我们视觉上的旋转,比如小风扇旋转就是在绕着Z轴旋转,绕X、Y轴才是3D

4.多重变换

多个变换可以一起写,建议最后旋转,位移的坐标原点在缩放前的左上角,而且如果先旋转的话x轴和y轴方向就会改变所以建议最后再旋转。

transform: translate(50%,50%) rotateZ(30deg) scale(1.5);

5.变换原点(变换自身的)

(1)通过关键词调整

transform-origin:left bottom;旋转绕着盒子左下角转,不再是盒子中心了

(2)通过像素值调整

transform-origin:50px 50px;

(3)通过百分比调整变换的原点

transform-origin:50% 50%;

注:如果只写一个值比如left的话,另一个值就默认是50%;如果只写50px,那就是(50px,50%)

对位移没有影响

位移参考的一直都是坐标原点,盒子的左上角,所以对位移没有影响。

对缩放有影响

缩放本来参考的是元素的中心,改变之后原点在哪里就朝着哪个点去缩放

对旋转有影响

旋转参考的就是元素中心

四、3D变换

1.3D空间与景深

(1)你想给谁弄成3D的首先得给他的父亲元素开始3D空间

transform-style:preserve-3d;开启3d空间

plat;扁平的,是平面的

(2)然后去给盒子设置旋转比如说绕x轴旋转30度

transform:none;默认值

rotateX(30deg);

从盒子的左侧看它沿着逆时针方向旋转了30du,但是从正面看根本看不出来3d,只能发现盒子高度变小了,这时候就需要景深(z=0的平面距观察者的距离)

景深需要在父元素设置:perspective:500px;(注意不能设置负值,设置负值到你眼睛去了)

近大远小,有了透视效果。值越小你离这张纸越近,效果越夸张;值越小越看不出来什么效果。

一半多一点的值比较合适。

2.透视点的位置(就是观察者的位置)

perspective-origin:100px 100px;

一般不用,什么被什么压住的时候需要调整视角看看。

3.位移

transform:translateZ(50px);视觉上是缩放(因为是正着看而且没有厚度),但是其实不是,它是朝着你的脸越来越近了,缩放的z轴还是0。注意z轴不能写百分比的长度,因为没有厚度

景深是500px的情况下,z轴位移是499的情况下,整个全部覆盖浏览器了,是500的情况下你就看不见了,因为就像你看不见你的左耳朵一样。

translate3d(50px,50px,0);注意这三个值都得写不能空

4.旋转

rotateX(),从盒子右侧看是顺时针的

rotateY(),左手定则,大拇指是Z轴,握拳方向为顺时针旋转

rotate3d(0/1,0/1,0/1,30deg);(了解)为0代表不旋转,为1代表旋转后面的多少度数

5.缩放

scaleX影响元素的宽

scaleY影响元素的高

scaleZ影响元素的厚度?但是html元素没有厚度,我们旋转元素到90度发现没了,说明不是厚度

它其实改变的是景深,如果把scaleZ(4)设置为4,那就相当于这个东西离你近了四倍,景深=景深/4,就像是你没有向这个元素走过去,这个元素奔着你而来的感觉。

(3d没有扭曲,2d中作为不经常内容没有写)

6.多重变换

跟2D里的差不多,角度也是放在最后面,旋转的时候perspective-origin主要看的不是点,而是该点所在的坐标轴。

7.背部可见性

backface- visibility:hidden;设置转过去之后背部展示情况,直接透明

五、过渡

1.基本使用

只有属性值是数字或者百分比才能用过渡,宽高、背景色(颜色有十六进制表示法)、2d3d、盒子阴影、透明度等等

变换transform

位移translate

过渡transition

transition-property(过渡属性):height / width / height,width;

也可以不直接一个个写属性,直接写all(让所有能过渡的属性都过渡)

transition-duration(过渡的时间):(单位为s或者ms)1s;(如果设置宽高都过渡的话,1s是宽高变化的时间)

1s,5s;如果想分别设置宽高的话

2.高级使用

过渡延迟transition-delay:2s;

transition-timeing-function(过渡的类型,默认是先慢后快最后慢的速度,可以修改):ease;默认值,平滑过渡

linear;匀速

ease-in;慢,快

ease-out;快,慢

ease-in-out;慢,快,慢。但是没有ease柔和

step- start;直接到终点,不考虑时间

step-end;最开始不动,过渡时间到了直接到终点

steps(20);分步进行,分20份一个阶段一个阶段的到终点,还有一个参数start,最开始快一点;end先等了一小小会再冲

cubic-bezier();贝塞尔曲线,描述物体运动(s/t图,有加速度a的那种),如下图s已经超出s范围了,实际情况就是会超出终点一部分然后再返回到终点。可以做橡皮筋效果。

3.复合属性

transition:duration property delay timing-function;

duration得在delay前面,其他的没有顺序之分。这个all不写也行,默认也是all。

4.小案例

实现鼠标移入图片图片旋转并且有遮罩层,鼠标成小手

<style>.outer{width: 200px;height: 200px;position: relative;overflow: hidden;}.inner{background-color: black;width: 200px;height: 200px;color: white;text-align: center;line-height: 200px;font-size: 40px;opacity: 0;position: absolute;top: 0;left: 0;cursor: pointer; /* 鼠标浮上去变成小手 */}.outer img{width: 200px;height: 200px;transition: all 3s 0.2s;}.outer:hover img{transform: scale(1.6) rotate(30deg);}.outer:hover .inner{opacity: 0.5;}
</style>
<body>
<div class="outer"><imgsrc="https://pics5.baidu.com/feed/f31fbe096b63f624afcf7dac87ebf9fd184ca3c7.jpeg@f_auto?token=417435c75068f79625faa8e567e8bf19&s=39B71A9A5A307E8686BB0DE80300F02B" /><div class="inner">地图</div></div>

六、动画

1.帧

一段动画就是在一段时间内连续播放n个画面,每一张画面都叫做帧,人眼1s看24帧才会流畅,现在发展到60帧(1080P)

2.关键帧

在若干个帧中,起到决定性作用的2-3帧

3.动画

(1)基本使用

a.首先你得定义一个动画
/* 定义动画 */@keyframes hhh{/* 第一帧 */from{}/* 最后一帧 */to{transform: translate(900px);}}

第一帧就是我们最开始放盒子的那个位置,所以不用再写。

这里的from 、、to、、也可以写成0%、、100%、、,同理还能再加50%、、、

b.然后让元素应用这个动画
animation-name: hhh;/* 定义动画名 */

名和定义不分先后次序,哪个写前面都行

c.最后规定这个动画应用的时间
animation-duration: 3s;

有点像过渡,区别:

过渡需要有一个触发条件,但是动画规定动的时间上来就会动,不需要条件。

如果动画最后一帧也改变了背景颜色的话,可能会出现前面卡顿的现象

是浏览器渲染机制的问题,需要把这个打开,都不行的话就加一个延迟animation-delay:0.5s;

(2)其他属性

设置动画的方式animation-timing-function:属性值和之前的transition-timing-function一样

动画播放的次数animation- iteration-count:3/infinite;(无限循环)

动画的方向animation- direction:normal;(默认值)from 到 to

reverse;to 到 from

alternate;往复运动,最开始从from到 to,然后再滚回来

alternate-reverse;往复运动,最开始从 to 到 from,然后再滚回来

动画以外的状态(不发生动画的时候在哪里)animation-fill-mode:forwards;最后一帧在哪里最后就停在哪里

backwards;最后停留在初始第一帧的状态

动画的播放状态animation-play-state:paused;暂停不播放(可以用在交互里)

(3)复合属性

只有时间上是规定第一个值是duration,第二个是delay,其他无顺序区别

animation-play-state一般单独使用,如果你在hover里写的是animation:paused;那么鼠标放上去不管球滚到哪儿了它以第一帧的形态都在from的位置。

(4)动画和过渡的区别(面试题)

a.动画不需要触发条件,过渡需要

b.动画可以改变每一个关键帧,过渡不能,只关注始末

七、多列布局

1.多列布局

直接指定列数column-count:3;直接就能把很多个p标签里的内容自动分成三列,不用你自己单独写三个div再控制间距

指定每一列的宽度column-width:220px;它算完之后再分 

复合属性columns:6 220px;如果两个都指定而且数不一样的话默认取少的那个,节约空间,不建议用

调节列与列之间的距离column-gap:20px;写成0也还是会有一点间距

边距的边框column-rule-width:2px;

column-rule-style:solid;

column-rule-color:red;

复合column-rule:2px solid red;

但是一般我们的标题不跟正文一样挤在分列的容器里,实现跨列

h1{
column-span:all;//跨所有列
//none;一列都不垮
}

谁用给谁加,而上面那些是给容器加的

2.多列图片

和文字多列差不多,注意transition过渡要加给某个元素本身,如果实现交互比如鼠标浮上去才是transform变换放大缩小等等,用多列图片可以实现平时找壁纸图片的排列方式,各个图片大小不一但是不会留有空隙。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/477913.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python Flask指定IP和端口

from flask import Flask, request import uuidimport json import osapp Flask(__name__)app.route(/) def hello_world():return Hello, World!if __name__ __main__:app.run(host0.0.0.0, port5000)

linux ubuntu的脚本知

目录 一、变量的引用 二、判断指定的文件是否存在 三、判断目录是否存在 四、判断最近一次命令执行是否成功 五、一些比较符号 六、"文件"的读取和写入 七、echo打印输出 八、ubuntu切换到root用户 N、其它可以参考的网址 脚本功能强大&#xff0c;用起来也…

C++(进阶) 第1章 继承

C&#xff08;进阶) 第1章 继承 文章目录 前言一、继承1.什么是继承2.继承的使用 二、继承方式1.private成员变量的&#xff08;3种继承方式&#xff09;继承2. private继承方式3.继承基类成员访问⽅式的变化 三、基类和派生类间的转换1.切片 四、 继承中的作⽤域1.隐藏规则&am…

Load-Balanced-Online-OJ(负载均衡式在线OJ)

负载均衡式在线OJ 前言1. 项目介绍2. 所用技术与环境所用技术栈开发环境 3. 项目宏观结构3.1 项目核心模块3.2 项目的宏观结构 4. comm公共模块4.1 日志&#xff08;log.hpp &#xff09;4.1.1 日志主要内容4.1.2 日志使用方式4.1.2 日志代码 4.2 工具&#xff08;util.hpp&…

c++->内部类 匿名对象

内部类&#xff1a;&#xff08;例如&#xff1a;b定义在a类中&#xff09; 注意事项&#xff1a; &#xff08;1&#xff09;内部类b可以直接使用外部类的static变量&#xff0c;但是并不属于外部类的友元&#xff01;&#xff01;&#xff01;&#xff01; #include <s…

C++ std::unique_ptr的使用及源码分析

目录 1.简介 2.使用方法 2.1.创建 unique_ptr 2.2.删除对象 2.3.转移所有权 2.4.自定义删除器 2.5.从函数返回 std::unique_ptr 2.6.将 std::unique_ptr 作为函数参数 3.适用场景 4.与原始指针的区别 5.优缺点 6.源码分析 6.1.构造函数 6.2.存储分析 6.3.默认删…

系统思考—关键决策

最近听到一句话特别扎心&#xff1a;“不是环境毁了企业&#xff0c;而是企业误判了环境。” 在大环境变化面前&#xff0c;很多企业的反应是快速调整&#xff0c;但这真的有效吗&#xff1f;其实&#xff0c;太快的动作&#xff0c;往往是误判的开始。 环境变化带来压力&…

【Java 解释器模式】实现高扩展性的医学专家诊断规则引擎

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

ES八股相关知识

为什么要使用ElasticSearch&#xff1f;和传统关系数据库&#xff08;如 MySQL&#xff09;有什么不同&#xff1f; 典型回答 数据模型 Elasticsearch 是基于文档的搜索引擎&#xff0c;它使用 JSON 文档来存储数据。在 Elasticsearch 中&#xff0c;相关的数据通常存储在同…

局域网与广域网:探索网络的规模与奥秘(3/10)

一、局域网的特点 局域网覆盖有限的地理范围&#xff0c;通常在几公里以内&#xff0c;具有实现资源共享、服务共享、维护简单、组网开销低等特点&#xff0c;主要传输介质为双绞线&#xff0c;并使用少量的光纤。 局域网一般是方圆几千米以内的区域网络&#xff0c;其特点丰富…

EMD-KPCA-Transformer多变量回归预测!分解+降维+预测!多重创新!直接写核心!

EMD-KPCA-Transformer多变量回归预测&#xff01;分解降维预测&#xff01;多重创新&#xff01;直接写核心&#xff01; 目录 EMD-KPCA-Transformer多变量回归预测&#xff01;分解降维预测&#xff01;多重创新&#xff01;直接写核心&#xff01;效果一览基本介绍程序设计参…

编程之路,从0开始:文件操作(2)

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 今天我们来继续学习C语言的文件操作。 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;编程之路 持续更新高质量内容&#xff0c;欢迎点赞、关注&…

mybatis学习(三)

声明&#xff1a;该内容来源于动力节点&#xff0c;本人在学习mybatis过程中参考该内容&#xff0c;并自己做了部分笔记&#xff0c;但个人觉得本人做的笔记不如动力节点做的好&#xff0c;故使用动力节点的笔记作为后续mybatis的复习。 六、在WEB中应用MyBatis&#xff08;使…

ES6 模块化语法

目录 ES6 模块化语法 分别暴露 统一暴露 ​编辑 默认暴露 ES6 模块化引入方式 ES6 模块化语法 模块功能主要由两个命令构成&#xff1a;export 和 import。 ⚫ export 命令用于规定模块的对外接口&#xff08;哪些数据需要暴露&#xff0c;就在数据前面加上关键字即可…

【Spring boot】微服务项目的搭建整合swagger的fastdfs和demo的编写

文章目录 1. 微服务项目搭建2. 整合 Swagger 信息3. 部署 fastdfsFastDFS安装环境安装开始图片测试FastDFS和nginx整合在Storage上安装nginxnginx安装不成功排查:4. springboot 整合 fastdfs 的demodemo编写1. 微服务项目搭建 版本总结: spring boot: 2.6.13springfox-boot…

无线电磁波在自由空间的衰减

自由空间损耗&#xff0c;指的是电磁波在空气中传播时候的能量损耗&#xff0c;电磁波在穿透任何介质的时候都会有损耗。在传输路径上的损耗&#xff0c;即为路径损耗。 自由空间路径损耗&#xff08;Free Space Path Loss&#xff09;的基本公式&#xff1a; 简化的自由空间损…

UE5实现可销毁对象的淡化销毁

进入对象材质 设置 的不透明蒙版 不透明蒙版见 UE材质不透明蒙版选项-CSDN博客 默认混合模式(不透明)下无法进行设置&#xff0c;将混合模式修改为 混合模式见 UE5材质混合模式-CSDN博客 新添加Texture sample节点 关于Texture sample&#xff1a;UE5材质Texture Sample …

【Linux学习】【Ubuntu入门】1-7 ubuntu下磁盘管理

1.准备一个U盘或者SD卡&#xff08;插上读卡器&#xff09;&#xff0c;将U盘插入主机电脑&#xff0c;右键点击属性&#xff0c;查看U盘的文件系统确保是FAT32格式 2.右键单击ubuntu右下角图标&#xff0c;将U盘与虚拟机连接 参考链接 3. Ubuntu磁盘文件&#xff1a;/dev/s…

文件的处理(c语言)

首先了解下文件的作用 文件可以把数据直接放在电脑的硬盘上&#xff0c;实现了数据的持久化 什么是文件 文件就是磁盘上的文件。在程序设计中&#xff0c;文件通常有俩种&#xff0c;一种是程序文件&#xff0c;另一种是数据文件&#xff08;这是从文件功能来分类的&#xff…

shell编程之awk

awk 是 Linux 以及 UNIX 环境中现有的功能最强大的数据处理工具。简单地讲&#xff0c; awk 是一种处理文本数据的编程语言。awk 的设计使得它非常适合于处理由行和列组成的文本数据。而在 Linux 或者 UNIX 环境中&#xff0c;这种类型的数据是非常普遍的。 除此之外&#xff…