Style笔记(css, stylus,less)

CSS

animation

/此处的rotateline是自定义的名字和后面对应，infinite在表无限循环
不加infinite的话会在页面生成的时候运行一次就结束了/

.Div {
   
animation: rotateline 10s linear infinite;
}
@keyframes rotateline {
   
  from {
   
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
   
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Vue结合class的动态绑定切换class名字的时候就会运行一次animation从而达到动画效果
animation 属性是一个简写属性，用于设置六个动画属性：

-   animation-name
-   animation-duration
-   animation-timing-function
-   animation-delay
-   animation-iteration-count
-   animation-direction

.animation
        animation moving 60s linear infinite
        &:hover
            animation-play-state paused

animation-play-state
paused这样可以让鼠标悬浮的时候暂停，只要设置为running或者空就可以重新让动画开始
js控制动画

let style = document.styleSheets[0]; // 获取网页样式规则表
style.insertRule（rule，index） rule 插入的规则，index插入的位置
const heights = 450
style.insertRule(`@keyframes rollings{0%{ transform:
translateY(0%);}100%{transform: translateY(-${
     heights}px);}}`,0)
js 控制动画开始暂停前提是已经设置了hover时state为paused暂停动画
Dom.style.animationPlayState='' // 继续动画
Dom.style.animationPlayState='paused' // 暂停动画

完整动画初始化

const dom = this.$refs.hiddenBody;
const num = this.PollutionMoniList.length;
let style = document.styleSheets[0];
const styleArray = [].slice.call(style.cssRules); // 将伪数组变成数组
const index = styleArray.findIndex(item => item.name ===
'rollingsPolluMoni');
if (index !== -1) style.deleteRule(index); // 如果有此动画就先删除
if (num <= 5) {
   
return;
}
dom.setAttribute('style', `animation: rollingsPolluMoni ${
     1 * num}s
linear  infinite; `);
dom.style.animationPlayState = ''; // 继续动画
const heights = num * 17;
style.insertRule(`@keyframes rollingsPolluMoni {0%{ transform:
translateY(0%);}100%{transform: translateY(-${
     heights}px);}}`, 0);

逐帧动画

background url('~@assets/images/waste/trans.png')  
background-repeat no-repeat
background-position 0 -4704px
animation turn steps(7) 1.5s infinite
//逐帧动画
@keyframes turn
   100%
    background-position 0 0

::after

element:after {
    [style properties]{
   .underline} } /* CSS2 语法 */
element::after {
    [style properties]{
   .underline} } /* CSS3 语法 */
在每个 <p> 元素的内容之后插入新内容：
p:after
{
   
content:"-台词";
color: green;
}
<p>我是唐老鸭。</p>
显示：我是唐老鸭。-台词

background-size

background-size可以让图片的大小随父元素的变化
background-size：100% 100%;—按容器比例撑满，图片变形；
background-size:100%;

方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，所以图片原来比例还在只是超出部分会被隐藏
background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
当为百分比的时候，100%和100%，100%也会显示不一样的效果：
background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)
比方说：你有一张长宽比例为4:3的图片，有一个width:100px;height:50px;的盒子(也就是长宽比例为2:1)。
background-size:100%
100%;这种方式设置完背景图片的大小后，会完全铺满整个盒子，并且背景图片的比例会因此改变为2:1
background-size:100%;这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，根据上面的理论计算得背景图片的高度为300px,但是盒子只有50px高，超出的部分隐藏，所以看两种写法的效果自然就不一样啦。
第一种效果你一定会看到完整的背景图片，但是有可能被挤压(失去图片原来的比例)
第二种效果你不一定能看到完整的图片，但是图片的比例没有发生变化。

Background

1. scroll是窗口内容滚动图片也跟着滚动，所以图片与其他内容相对静止。
   2.fixed是窗口内容滚动图片不滚动，所以图片与其他内容相对滚动。
   3.这个设置针对body的背景来说很有意义，其他情况下，默认都是scroll。
   background: url(/static/images/home/t-bar.png) no-repeat scroll center
   //no-repeat是图片引用在没沾满区域的时候不会重复使用来沾满也可以no-repeat top
   center
   background恰好放大到最小能覆盖显示窗口的尺寸，可以通过background-size：cover来实现；图片居中可以通过background-position：center来实现。
   ~@的使用
   background-image: url(‘~@static/images/bigScreen/zs.png’);
   选择属于其父元素的首个子元素的每个

   元素，并为其设置样式：

p:first-child{
    background-color:yellow;}
background: no-repeat url('/static/images/menu/menu_bg.png');
(background-size: cover;background-repeat: no-repeat;)

bI:linear-gradient 线性颜色渐变，radial-gradient 圆性渐变

CSS 语法

background-image: linear-gradient(direction, color-stop1, color-stop2,
...);

以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:

#grad {
    background-image: linear-gradient(red, yellow, blue); }

定义与用法：
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/*
从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束
*/
linear-gradient(0deg, blue, green 40%, red);
从左到右：
background-image: linear-gradient(
        to right,
        blue,
        green
      );

例子:

background: radial-gradient(220% 105% at top center, rgb(82, 81, 81)
10%, #000035 40%, #0b2570 65%, #0070aa);
  background: linear-gradient(
    to top left,
    rgb(242, 246, 253),
    rgb(209, 223, 245),
    rgb(242, 246