css3/html5

css参考手册：http://css.doyoe.com/

一、css3新加的属性或常用的

border-radius  box-shadows background-size 弹性布局

动画：
    transform
        rotate(30deg)//旋转30度
        translate() //平移   translateX() //左右平移 translateY() //上下平移
        scale() //缩放
        skew(20deg,20deg) //x洲，y轴 做平行四边形
    transition  （需要条件触发，如将width由100变为200）
        width 2s ease 3s（宽度变化时、过度时间、匀速（运动类型）、延迟时间）

    animation （页面加载就能触发）
        test 2s ease 1s 2 forword (自定义名称、运动时间、运动方式、延迟时间、执行次数、结束时是否还原)  

    @keyframs test { //结合animation一起用
        0%{width：100px}
        100%{width：200px}
    }


ease位置可以是：linear//匀速、ease平缓

鼠标移进来时图片放大
.img{
    background:url("./xxx");border-radius:50%;
    transitions:all 0.5  //all代表所有的动画变化是都需要5秒
}
.img:hover{
    tranfrom:scale(1.1)
    -webkit-tranfrom:scale(1.1)
    -o-tranfrom:scale(1.1)
    -moz-tranfrom:scale(1.1)
}
//是否需要加前缀上网站：https://caniuse.com/
//编辑器也有自动生成插件

2、伪类选择器

a:link{color:#666 } //默认的颜色
a:visited{color:#red} //访问过后的颜色
a:hover{color:#555}  //鼠标移上去
a:active{color:#444} //点击不放开

input:enabled{background-color:red}  //当input可输入时背景色
input:disabled{background-color:green}  //当input不可可输入时背景色

//动态结构伪累
li:first-child{}   li:last:last-child{}  //设置第一个、最后一个li的样式
li:nth-child(odd){color:xxx} //odd奇数、event偶数 、数字则是第几个
li:only-child{}  //选中没有兄弟的li
li:empty{}   //设置内容为空的li

3、伪元素

.demo::first-letter{}  //设置类demo下的文字的第一个文字的样式
.demo::first-line{}  //设置类demo下的文字的第一行行文字的样式

.demo::before{  //设置类demo下的内容之前加一个图片，block则是在上面加
    content:url('./xx.png'); //content一定要有，可以是空值
    display:block //变块级元素
}
.demo::after{}

border-top-left-radius:10px  //上面左边的角设置
border-radius:10px 20px 10px 20px  //左上 右上 左下 右下

//话三角形，可以结合伪元素做消息框的三角，
border-left:10px solid #ddd
border-right:10px solid transparent
border-top:10px solid #ddd
border-bottom:10px solid transparent

线性渐变

background-image:linear-gradient(to left ,black,red,white) //从有到左黑变红变白

径向渐变

background-image:radial-gradient(circle at center,green,red) //以圆形从中心点开始
background-image:radial-gradient(ellipse at left,green,red) //以椭圆从最左边点开始

阴影

box-shaow:2px 2px 3px #aaa  //纵向、横向、阴影大小、颜色

下边的阴影：
box-shadow: 2px 4px 10px 0px  rgba(0,0,0,0.1);右边、下边、模糊程度、模糊高度

text-shadow:0px 0px 2px #fff  //制作苹果字体
text-shadow:1px 1px 1px rgba(197,223,248,0.8),  //制作3d字体
                2px p2x rgba(197,223,248,0.8),
                3px 3px rgba(197,223,248,0.8),

text-overflow

text-overflow:clip

text-overflow:ellipsis //用...代替
overflow:hidden;
white-space:norap;


text-overflow:string

 

vue项目页面 进入时的动画：

<transition name="slide-trans">
   <div class="pop-bg" v-if="showPop">

   </div>
</transition>  


.slide-trans-enter-active {   //正在进来的过程。。
    transition: all .5s;
}
.slide-trans-enter {  //进来之前的状态
   transform: translateY(-900px);
}
//效果是从上到下，translateX则是从左到右


.slide-trans-enter,.slide-trans-leave-to{  开始之前，结束之后的位置或状态
    transform: translateY(-900px);
}

结合第三方引入过渡动画

引入amnimate.css插件
https://www.cnblogs.com/apolloren/p/10828166.html

<transion name="fade" enter-active-class="xxx" enter-leave-class="xxx"></transion>

 

scss变量片段

@mixin tab-item {
  display: flex;
  justify-content: center;
  user-select: none;
}
.tab-item-icon {
  @include tab-item;
  height: $icon-size-normal;
  width: $icon-size-normal;

  &.featured {
    border-radius: 50%;
  }
}

@：公用片段
&：同在一个class

二、html5

JSON.parse、JSON.stringity()、

设置input框完全透明

            input{
                background-color: transparent;
                border: 0;
            }
            input::-webkit-input-placeholder {
                /* placeholder颜色  */
                color: #fff;
                /* placeholder字体大小  */
                font-size: 16px;
            }
            input:-webkit-autofill,
            input:-webkit-autofill:hover,
            input:-webkit-autofill:focus,
            input:-webkit-autofill:active {
                -webkit-text-fill-color: #999999 !important;
                transition:background-color 5000s ease-in-out 0s;
            }

使用poctcss

1、安装postcss
2、新建them.css：
:root{
    --bg-color: #000;
}
3.main.js引入
 import './them.css'
4、任意页面使用：
  color:var(--bg-color)