JS-CSS3
2021-02-12 15:21
标签：访问 pad 通过 duration 对象 ota 引入 || 身高 2d transition: all 0.5s; /* 旋转基点 支持设置 10px 20px*/ transform-origin: left top; //以左上角为基点 transform: rotate(90deg); //旋转90度 // 动画 transition:all .6s; //放大 transform:scale(1.2) //平移 transform:translate(100px,100px); transform:translate(-50%,-50%) //旋转 transform:rotate(190deg); //注意覆盖问题：合并写；顺序：平移 旋转 放大缩小 ================================================== 动画：较过渡更能控制细节 -定义动画：from = 0% ;to=100% @keyframes scale_{ 0%{ transform:scale(1); } 25%{ transform:scale(1.2); } 50%{ transform:scale(1.2); } 75%{ transform:scale(1.2); } 100%{ transform:scale(1); } } -调用动画： animation:scale_ 2s; 等效于： animation-name:scale_; animation-duration:2s; animation-timing-function:cubic-bezier();//linear\ //步长 steps(N): animation-delay:1s;//延迟 animation-iteration-count:2;//重复动画次数 //infinite; animation-direction:alternate;//方向播放 animation-fill0mode:backwards;//返回初始化位置 //forwards:留在结束位置 animation-play-state:paused;//暂停 //不换行 white-space:nowrap; overflow:hidden; transtion:all 1s; 3d 3D:块元素，行内元素无效 垂直屏幕向外：正向；向内为负向。 perspective:500px;//透视 transform: translateX(100px) translateY(100px) translateZ(100px) //3d位移等效 transform:translate3d(100px,0,0); //旋转 transform:rotateX(60deg); //往里转为正值 transform:rotateY(60deg); //往里转 transform:rotateZ(45deg); //顺时针转 //等效于 transform:rotate3d(x,y,z,deg); ex: transform:rotate3d(1,0,0,60deg); ====== perspective:500px; //一般放在父级容器上，并且值得取值范围：不是越大越好。一般500左右+-200 //控制子元素，是否开启三维立体空间。往往放在父亲元素上生效 transform-style:preserve-3d; 默认值：transform-style:flat; 过渡：作用到变化对象的身上 //CSS跟js同样都可以实现；根据实际开发调整。 第一个参数 表述变化的属性 第二个参数 表述持续时间 第三个参数 表述运动曲线 第四个参数 延迟 transition:width 1s ease 1s,height 1s; transition:all 1s; width/height muted 静音播放 poster 视频封面[加载等待的画面图片] preload 取值：none\auto[预先加载]----如果是自动播放，则该属性失效 常见支持格式：mp4 ogg WebM 选择器权重问题： 继承或* 0 0 0 0 标签选择器 0，0，0，1 类选择器、伪类选择器 0，0，1，0 id选择器 0，1，0，0 行内样式 1，0，0，0 伪元素应用： /* before;after */ /* 应用场景： 加标签，图标，清除浮动 字体图标 */ .box::before { /* content 必选属性 */ content: ‘before‘; display: inline-block; width: 80px; height: 80px; background-color: #ccc; } 创建的元素属于行内元素，创建出来的元素在dom中查找不到 CSS3选择器 input[disabled] { background-color: red;} div[id^="box"] {} //以box开头的id的div [id$="1"] {} //id名称以1结尾的元素 [class*="p"] {} //class类名包含p的类名 ul li:first-child {} ul li:last-child {} ul li:nth-child(3) {} // 第3个孩子 ul li:nth-last-child(2) {} //倒数第2个孩子 ol li:nth-child(odd/even) {} //偶数或者奇数位儿子 CSS的元素显示模式 1.块级元素 div、p、li、dt、dd +++ h1-h6... 独占一行 设置宽高起效果 不设置宽度，宽度默认值是父亲的百分之百 2.行内元素(自己实验总结) span em i strong b a ... 可以和其他行内元素并排 回车换行---空格 设置宽高无效 宽高由其子元素决定 3.行内块元素 img、input 设置宽高 可以与其他行内元素或行内块元素并排 display属性，改变元素的属性 display:inline --行内元素 display:block --行内块元素 display:inline-block --行内块元素 display:none --隐藏 text-align:文本对齐，水平方向 line-height:height:垂直局中 背景定位 background-image:url(p.jpg); background-repeat:repeat-x/repeat-y/no-repeat; background-position:100px 100px;//左上角为原点 background-position:center center;// left center right || top center bottom 让背景图固定： background-attachment:fixed background: #ccc url(p.jpg) no-repeat center center; 类似：font:italic bold 12px/20px arial,sans-serif; rgba(255,255,255,0~1):0~1，表示透明度；filter:0.5透明 CSS:cascading style sheet————层叠样式表，负责页面的表现， 给页面标签增加样式，如字体颜色、宽高、背景色。。。 引入CSS 行内式 内嵌式——在head标签内部放置标签 选择器 外链式—— 选择器 选中我们要设置样式的标签 -标签选择器（标签名） 特点：选中页面所有的div div { } 特点：选中页面所有的div color 字体颜色 font-size 字号 -id选择器 先给作用的元素设置id，通过#id_name 选择 特点：选中唯一的（唯一性） -类选择器 .类名{ } 给需要设置该类样式的标签，添加class属性="类名" 模具的思想——尽量原子化 特点：一般情况把某一类样式定义一个类！复用！ -通配符选择器———代表所有的元素 * { } span等套一样 font-size:字号 color:字体颜色 div>p { div的亲儿子p } div p { div 的后代选择器 } 交集： p.p3 \\ p#p3 并集：p,span{ } //顺序不能乱 a:link { //未访问过的链接 text-decoration:none; color:rgb(255,0,0);// #ccc灰色； 333 浅灰 666 深灰 999 } a:visited { //访问过的链接 color: } a:hover { //鼠标放入超链接时状态 } a:active { //鼠标激活，按住不放 } .nav a { text-decoration:underline; } font-family:Arial,"微软雅黑","黑体" //设置字体 "Microsoft YaHei" font-style:italic; //文字样式：正常、倾斜 //默认是：文字倾斜的 font-weight 400（正常 normal） ~ 700（最粗 bold） //字体加粗 综合性写法：字号、字体必须的 样式 粗细 字号/行高 字体 font:italic 700 表单： text-align:center; 让文本、行内元素、行内块元素在盒子中水平居中 margin:0 auto; 水平局中，让有宽度的块级元素水平居中。（行内元素无效：span） 对行内元素，设置margin-top、bottom无效，左右可以设置。 如：span,margin-left:auto;margin-right:auto; 无效 可以使用：text-align:center; padding-left\right：生效；但是padding-top\bottom:会有问题 visibility: hidden; //不可见 visibility: visible; //可见 四个三角形： border:10px solid red; width:0; height:0; color: red transparent transparent transparent; border-top-right-radius:50%; border-bottom-right-radius:50%; text-indent: 2em; em 是 element 的意思。（element -- 单元，元素）。 本质都是触发BFC 1. 上下两个相邻的块级元素，假如上面的元素有margin-bottom，下面的元素有margin-top，此时会发生合并。 合并的值以较大的值为准。 ---建议设置一个 2. 父子嵌套的元素，子元素的上边距会和父亲的外边距合并。以最大值为准。 相对定位：标准流不脱标 元素，位置微调(稳定)——相对浮动{往往配合绝对定位使用} 1.相对于自己标准流的位置进行局部的位置微调 2.相对定位元素还是标准流元素 -posiiton: relative; -left:20px; -top:20px; 绝对定位：标准流脱标: margin:0,auto;/*失效*/ position:absolute; 1.一个绝对定位元素是body儿子，此时参考点就是body左上角 百分比：50%；设置居中。 top:50%; margin-top:-自身高度一半； left:50%; margin-left:-自身宽度一半； 固定定位：脱标 position:fixed -固定定位的元素与父级元素无关！ -固定定位的参考点：当前可视浏览器窗口作为参考点 left,right同时存在，往往left生效。 标准流中：父子margin塌陷。 ****固定定位、绝对定位、浮动：均可以解决父子margin塌陷问题【相对定位不可以】 ---border\padding\overflow:hidden z-index 只对定位的元素有效 取值是一个整数，可以是0或者负数 默认值是0，数字越大，代表盒子越靠上！ 如果值相同，看h5代码结构顺序， // div span:first-of-type { color: purple } div span:last-of-type { color: purple } span:first-child { background-color: yellow; } JS-CSS3 标签：访问 pad 通过 duration 对象 ota 引入 || 身高 原文地址：https://www.cnblogs.com/macro-renzhansheng/p/13029867.html
// 支持自动播放 视频
// 支持字幕
如果copy程序里定义了根元2113素 font-size （字体大小） 这个量，那么 定义 间距等别的量 时 用 em，就表示 等于 几倍 根元素大小。
例如： line-height: 1.2em -- 行高 等于 现用字体大小的 1.2 倍。