html5+css3入门学习过程
iuukai
种一棵树最好的时间是十年前,其次是现在。
展开
-
【CSS3】steps() 逐帧动画
使用阶梯函数 steps() 制作逐帧动画。原创 2020-08-03 19:37:01 · 1876 阅读 · 2 评论 -
【CSS3】模拟太阳系八大行星运行轨迹
TipsSafari 浏览器需设置 -webkit- 前缀,Chrome 倒是都可以;-webkit- 的渐变角度进行需要换算: 90 - 原角度 = 需设角度:background-image: linear-gradient(135deg, red, yellow);background-image: -webkit-linear-gradient(-45deg, red, yellow);-webkit- 径向渐变属性为百分号,"shape size at position 不适用:backg原创 2020-07-30 19:51:15 · 2000 阅读 · 1 评论 -
【CSS3】2D/3D 转换函数
文章目录2D 转换函数translate() 位移scale() 缩放skew() 倾斜rotate() 旋转3D 转换函数translate3d() 位移scale3d() 缩放rotate3d() 旋转2D 转换函数translate() 位移<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="t原创 2020-07-28 17:28:30 · 365 阅读 · 0 评论 -
【CSS3】rotate3d() 中的参数是什么意思?
文章目录CSS3中的3D旋转函数rotate3d()什么是矢量(向量)?向量的坐标表示二维坐标系(平面直角坐标系)三维坐标系(空间直角坐标系)注意!Web坐标系与数学/物理学中坐标系的不同常用 rotate3d() 参数CSS3中的3D旋转函数rotate3d()很多人跟我刚开始一样,搞不懂 rotate3d(x, y, z, angle) 中的 xyz 参数究竟是什么鬼意思,只知道,xyz代表矢量(向量)。在 MDN 中是这样介绍的:那么究竟个什么鬼是向量?什么是矢量(向量)?物理学原创 2020-07-26 21:52:24 · 5520 阅读 · 0 评论 -
【CSS3】渐变背景
文章目录一、线性渐变1. 渐变方向2. 节点分布3. 重复线性渐变二、径向渐变1. 可选属性【shape size at position】2. 节点分布3. 重复径向渐变一、线性渐变1. 渐变方向 可设值 值 描述 to top 从下 向上 渐变 to bottom 从上 向下 渐变 to left 从右 向左 渐变 to right 从左 向右 渐变 to top left(顺序可换) 从右下 向左上对角原创 2020-07-22 00:00:19 · 315 阅读 · 0 评论 -
【CSS3】边角 border-radius
1. border-radius 是一个复合(简写)属性边类型样式都有上右下左边之分,唯独边角不同,它以左上、右上、右下、左下之分;换句话说,即,代表着边的两端。border 是 border-top、border–right、border-bottom、border-left 的简写;border-radius 则为 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left原创 2020-07-20 23:31:18 · 1771 阅读 · 0 评论 -
HTML5新增标签
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素,可以设置 CSS 的 display 属性值为 block。header, section, footer, aside, nav, main, article, figure { display: block; }但IE9 以下版本浏览...原创 2020-03-09 17:28:44 · 158 阅读 · 0 评论