技术标签: 平面 前端 HTML5和CSS3悦读 css3
个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!
容许元素在 2D 平面上进行变换:
在 2D 平面上进行变换是通过设置 transform 属性,语法格式如下:
transform: none|transform-functions;
代码示例:
transform: translate(20px, 30px) rotate(30deg) scale(3, 4) skew(20deg, 30deg);
对非置换的行内元素无效,比如span(inline)无效,img(虽然是inline,但是它是置换元素)有效。
transform不会脱离文档流,也不改变文档流的大小和位置。只是视觉上发生了变换。
translate()方法,根据左(X 轴)和顶部(Y 轴)位置给定的参数,从当前元素位置移动。
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(50px);
translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
transform: rotate(30deg);
rotate值(30deg)元素顺时针旋转30度。
如果先旋转,则会导致坐标轴发生改变,从而后面的变换根据已改变的坐标轴进行变换:
/*改变 translateX,发现它是水平移动,坐标轴并没有改变*/
transform: translateX(10px) rotate(45deg);
/*改变 translateX,发现它是以改变的坐标轴进行移动,也就是斜角45deg往下走了*/
transform: rotate(45deg) translateX(10px);
transform-origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。语法如下:
transform-origin: x-axis y-axis;
/*默认值是 x-axis:center y-axis: center*/
取值如下:
值 | 描述 |
---|---|
x-axis | 定义视图被置于 X 轴的何处。可能的值:left、center、right、length、% |
y-axis | 定义视图被置于 Y 轴的何处。可能的值:top、center、bottom、length、% |
scale()方法,该元素增加或减少的大小,取决于宽度(X 轴)和高度(Y 轴)的参数:
transform: scale(2, 3);
transform: scaleX(2);
transform: scaleY(3);
scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
缩放用 >=0 数字
语法
transform:skew(<angle> [,<angle>]);
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX(<angle>);
表示只在X轴(水平方向)倾斜。skewY(<angle>);
表示只在Y轴(垂直方向)倾斜。transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);
skew(20deg,30deg) 元素在 X 轴倾斜 20 度和 Y 轴上倾斜 30 度。
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态(起始值) 渐渐的过渡到另外一个状态(终止值)
可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) ,但是不会影响页面布局。
我们现在经常和 :hover
一起 搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
timing-function 曲线属性
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 了解 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
cubic-bezier 即为贝兹曲线中的绘制方法。图上有四点,P0-3,其中 P0、P3 是默认的点,对应了[0,0], [1,1]。而剩下的 P1、P2 两点则是我们通过 cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2 的值范围在[0, 1]。
贝兹曲线调试网址:cubic-bezier
使用方法:在上面网址中选择想要的缓动效果(如:cubic-bezier(.17,.67,.84,.66)
)
文章浏览阅读436次,点赞15次,收藏2次。原因或许是,使用autofocus时,确实聚焦了!但是当我们又点击 显示弹出框的按钮时,input又失焦了,所以当我们看到input框时,没有自动聚焦。_vue3 el-input 自动聚焦autofocus无效
文章浏览阅读222次。《《说课稿LINUX》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《说课稿LINUX》PPT课件.ppt(16页珍藏版)》请在装配图网上搜索。1、LINUX 基础应用与配置管理 桂林山水职业学院计算机系 朱笑雷 主要内容 课程定位 1 课程内容设置 2 教学方法与手段 3 教材建设 4 教学团度 5 主要内容 实践条件 6 课程考核 7 教学效果 8 课程特色 9 建设思路 10 一、课..._linux说课课件
文章浏览阅读2.2k次。#在SpringBoot中启动时关于连接数据库失败的问题对照了application.yml,发现配置文件貌似没什么问题,但是在查找信息之后,发现问题正是出现在application.yml中问题出于datasource下的data-username和data-password只要将data-username和data-password改为username和password即可..._springboot启动时数据库连接失败 不关闭
文章浏览阅读4.6k次。一般情况下登录系统后菜单是由后端返回的,不是前端写死的。antd-pro也支持,修改的路径在app.tsx在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了,说明配置生效了,接下来就可以围绕这个配置做文章了,我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理,判断菜单里要展示哪些内容(比如替换字段,隐藏不显示的菜单,隐藏按钮等),处理好了后返回一个数组结构即可。示例代码如下export const layout: _antdpro的菜单
文章浏览阅读77次。为什么80%的码农都做不了架构师?>>> ..._jprofiler6 key
文章浏览阅读170次。(可以看出递归算法更加侧重于计算的技巧,并且计算机计算的次数也相对更少);_c语言程序设计第四版课后题答案苏小红第七章
文章浏览阅读4.4w次,点赞8次,收藏51次。浏览器抓包(工具:fiddler)并 修改请求内容 工具下载:https://pan.baidu.com/s/1pyKdAwgTdNNvoWA2bGlk9A 1、正常打开网页,输入要提交的内容 2、打开工具,f11暂停了页面的所有提交动作 3、这时再点击提交按钮,请求的数据就会被工具拦截 4、双击截取的数据,右侧会看到请求的具体内容,任意修改数据 5、点击绿色按钮 run ..._filder改数据包
文章浏览阅读560次。如果您想在计算机或任何其他设备上播放高质量的视频,高清视频转换器可以帮助确保您的视频与您的操作系统和硬件兼容。您还可以使用高清转换器更改视频的分辨率,无论您是想提高质量还是降低分辨率以生成更小的文件。在下表中,我们描述了用于转换高清视频的最流行和可用的桌面程序和在线服务。它们各有优缺点,因此请根据您的需要进行选择。_奇客视频转换
文章浏览阅读1.9k次。欢迎来到unity学习、unity培训、unity企业培训教育专区,这里有很多U3D资源、U3D培训视频,我们致力于打造业内unity3d培训、学习第一品牌。今天开始做我们的游戏了,组长给分配了任务,我负责做剧情动画,人物血条和种植植物。 一、剧情动画 动画是以多个图片的形式展现的,图片是自己制作的。 private GUITextu_游戏血条动图
文章浏览阅读1k次。*******字符编码ASCII,GB2312,GBK,Unicode,UTF-8比较参考:https://blog.csdn.net/softwarenb/article/details/51994943**环境变量的加载顺序:Mac系统的环境变量,加载顺序为:a. /etc/profileb. /etc/pathsc. ~/.bash_profiled. ~/..._环境变量的顺序
文章浏览阅读316次。▼大型年度AI人物评选——2017中国AI英雄风云榜已于12月4日在乌镇张榜,12月18日在北京国贸三期举行颁奖典礼。榜单评选出年度技术创新人物TOP 10;商业创新人物TOP 10,获取完整榜单请关注网易智能公众号(ID:smartman163),回复关键词“评奖”。本文系网易智能工作室出品聚焦AI,读懂下一个大时代【网易智能讯12月10日消息】不只有你会_人类大脑植入代码
文章浏览阅读3.6k次。几经研究, 终于实现了。time[2020-06-04 11:43:36](?<=\[)(.*)(?=])(pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 '\(' 或 '\)'。 (?:pattern) 匹配 pattern 但不获取匹配结..._正则<>里内容