JS-CSS3

Posted 小海_macro

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS-CSS3相关的知识,希望对你有一定的参考价值。

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 取值:noneauto[预先加载]----如果是自动播放,则该属性失效

        常见支持格式:mp4   ogg   WebM

// 支持自动播放 视频
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉,您的浏览器不支持内嵌视频,不过不用担心,你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

// 支持字幕
<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

选择器权重问题:

        继承或*                     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 type="text" name="" id="" disabled>

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标签内部放置标签

                <style></style>

                    选择器

            外链式——<link>

选择器

    选中我们要设置样式的标签

    -标签选择器(标签名)

        特点:选中页面所有的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;  //文字样式:正常、倾斜

    <em></em>    //默认是:文字倾斜的

    font-weight   400(正常 normal) ~  700(最粗 bold)  //字体加粗

    综合性写法:字号、字体必须的

              样式      粗细    字号/行高   字体

        font:italic 700

    表单:

    <!-- 如果要提交到服务端,一定要写name -->

    text-align:center;  让文本、行内元素、行内块元素在盒子中水平居中

    margin:0 auto;  水平局中,让有宽度的块级元素水平居中。(行内元素无效:span)

    对行内元素,设置margin-top、bottom无效,左右可以设置。

        如:span,margin-left:auto;margin-right:auto; 无效

            可以使用:text-align:center;

            padding-left ight:生效;但是padding-topottom:会有问题

     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 -- 单元,元素)。
如果copy程序里定义了根元2113素 font-size (字体大小) 这个量,那么 定义 间距等别的量 时 用 em,就表示 等于 几倍 根元素大小。
例如: line-height: 1.2em -- 行高 等于 现用字体大小的 1.2 倍。

本质都是触发BFC

1. 上下两个相邻的块级元素,假如上面的元素有margin-bottom,下面的元素有margin-top,此时会发生合并。

        合并的值以较大的值为准。

        ---建议设置一个           

    2. 父子嵌套的元素,子元素的上边距会和父亲的外边距合并。以最大值为准。

相对定位:标准流不脱标

        元素,位置微调(稳定)——相对浮动{往往配合绝对定位使用}

        1.相对于自己标准流的位置进行局部的位置微调

        2.相对定位元素还是标准流元素

        -posiiton: relative;

<!-- 正值:相反方向定位 -->

        -left:20px;<!--  right 正好相反 -->

        -top:20px; <!--  down  正好相反 -->

绝对定位:标准流脱标:   margin:0,auto;/*失效*/

        position:absolute;

        1.一个绝对定位元素是body儿子,此时参考点就是body左上角

百分比:50%;设置居中。

            top:50%;

            margin-top:-自身高度一半;

            left:50%;

            margin-left:-自身宽度一半;

固定定位:脱标

    position:fixed

    -固定定位的元素与父级元素无关!

    -固定定位的参考点:当前可视浏览器窗口作为参考点

    left,right同时存在,往往left生效。

    标准流中:父子margin塌陷。

****固定定位、绝对定位、浮动:均可以解决父子margin塌陷问题【相对定位不可以】

    ---borderpaddingoverflow: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的主要内容,如果未能解决你的问题,请参考以下文章

Spin.js-CSS动画进度载入器

日期插件 pikaday.js 的使用

JS日历控件特效代码layDate

VSCode自定义代码片段3——url大全

VSCode自定义代码片段3——url大全

VSCode自定义代码片段3——url大全