前端搬砖合集，方便我以后CV，hhh （持续更新中-CSDN博客

本文链接：https://blog.csdn.net/qq_36630786/article/details/115724489

@keyframe文档点这里 css背景图片旋转
- div 内部东西都会旋转，解决办法：写个同级同样大小的div，absoulte脱标定位重叠起来！！
- animation文档点这里

@keyframes turn{
      0%{-webkit-transform:rotate(0deg);}
      25%{-webkit-transform:rotate(90deg);}
      50%{-webkit-transform:rotate(180deg);}
      75%{-webkit-transform:rotate(270deg);}
      100%{-webkit-transform:rotate(360deg);}
    }
.turn {
background-image: url(bg_tq.png);
animation:turn 5s linear infinite;
}

实现走马灯效果[纵向]，思路：外层盒子设置固定高度(overflow: hidden)，内层盒子高度auto，设置定时器更改内层盒子位置(总感觉哪里不好，即使在beforeDestory清除定时器)。

<div class="outer">
	<div class="inner" ref="inner">
		<ul>
			<li></li>
			.........
			<li></li>
		</ul>
	</div>
</div>
。。。。。css 代码
.outer {
	height: 160px;
	overflow: hidden;
	.inner {
		height: aoto;
	}
}
。。。。。 js代码
// 我用的vue写的 原生js 可以自行 document.GetElementById
let target = this.$refs.inner;
let initTop = 0;
this.interval = setInterval(() => {
    initTop++;
    if (initTop >= target.offsetHeight / 1.5) {
        initTop = 0;
    }
    target.style = "transform: translateY(-" + initTop + "px)";
}, 50);

闪现！炫酷的进度条，通过背景色渐变格子实现如下图所示进度条

 <!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 12px;
  width: 186px;
  top: 300px;
  position: absolute;
  background-image: linear-gradient(to right, #48C7FF 75%,#FF6700);
}
#grad2 {
  height: 12px;
  width: 186px;
  top: 300px;
  position: absolute;
  background: linear-gradient(to right, transparent 50%, white 50%);
  background-size:3px 20px;
}
</style>
</head>
<body>

<h1>线性渐变 - 从左到右</h1>
<p>此线性渐变从左开始为红色，然后过渡到黄色（向右）：</p>

<div id="grad1"></div>
<div id="grad2"></div>

</body>
</html>