1.旋转按钮边框

效果：
在这里插入图片描述
代码：

 <div class="container"><button class="btn">旋转边框</button></div>

 *{margin: 0;padding: 0;}.container{background: #000;height: 100vh;overflow: hidden;}.btn{/* border: 4px solid #fff; */padding: 10px 30px;color: aqua;border-radius: 10px;margin: 150px auto;position: relative;overflow: hidden;outline:none;border: none;background: none;z-index: 1;box-shadow: 2px 5px 15px rgba(223, 28, 28, 0.5);}.btn::before{content: '';width: 200%;height: 200%;left: 50%;top: 50%;background-color: crimson;position: absolute;animation: rotate 3s linear infinite ;transform-origin: 0px 0px;z-index: -2;}.btn::after{position: absolute;content: '';width: calc(100% - 4px);height: calc(100% - 4px);background-color: rgb(0, 0, 0);z-index: -1;left: 2px;top: 2px;border-radius: 10px;}@keyframes rotate {to{transform: rotate(360deg);}}

2.文字立起来

效果：
在这里插入图片描述
代码：

<div class="css3"><h1>CSS练习</h1>
</div>

  .css3{width: 300px;text-align: center;background: rgb(153, 153, 153);}h1{position: relative;font-size: 60px;color: #fff;z-index: 1;}h1::before{content: "CSS练习";position: absolute;transform:skew(50deg)  scaleY(0.5) translate(-32px,20px);color: rgba(0, 0, 0, 0.527);filter: blur(6px);z-index: -1;}

3.统计字符串中字符出现的次数

//统计字符串中字符出现的次数let str="asdfasfasdfgdftwertdzczgvbadasda"let res={}//方法一：for(let i=0;i<str.length;i++){if(res[str[i]]){res[str[i]]++}else{res[str[i]]=1}}console.log(res);//方法二：reduce函数优化let res2=str.split('').reduce((a,b)=>(a[b]++||(a[b]=1),a),{})console.log(res2);

结果：
在这里插入图片描述
方法二 reduce解释：

reduce(回调函数,默认参数)，
(x,xx,xxx):括号运算符，前面的参数全部运算一边，返回最后一个参数
列如：

 		var a=1var b=2var c=3console.log((a+=b,a+=c,a));//6

4.磨砂效果

预览：
在这里插入图片描述
代码:

 <div class="container"><h1>Genshin Impact</h1><div class="mosha">原神</div></div>

.container {background: linear-gradient(-45deg, #2d8cf0, #19be6b, #ff9900, #ed3f14);animation: backC 15s ease infinite;background-size: 400% 400%;width: 1000px;height: 500px;position: relative;display: flex;align-items: center;justify-content: center;}@keyframes backC {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}h1{font-size: 42px;color:#fff;}.mosha{display: flex;align-items:center;justify-content: center;position: absolute;font-size: 32px;color: #2d8cf0;background: rgba(255, 255, 255,.5);width: 20%;height: 20%;z-index: 2;border-radius: 10px;/* filter只能把自己给模糊 *//* filter: blur(5px); *//* backdrop-filter不会模糊自己，模糊的是背后的元素 */backdrop-filter: blur(5px);}

注意：

   1. /* filter只能把自己给模糊 */filter: blur(5px); 2./* backdrop-filter不会模糊自己，模糊的是背后的元素 */backdrop-filter: blur(5px);

如果使用了filter: blur(5px);那么效果为：
在这里插入图片描述

5.中文输入触发input事件问题

问题描述：在input要配合后端接口进行搜索操作并且输入中文搜索时，在中文还没输入完成前，表单的input事件首要检测到了英文字母的输入，所以也会进行请求，这就会产生多余的请求操作。

<input type="text" >

	let input =document.querySelector('input')//向后端请求查询的接口函数const api=()=>{console.log('查询中.....');}//标记位是否为中文输入状态let isComposite=true//正常输入英文字母的查询input.addEventListener('input',()=>{//判断一下是否为中文输入if(!isComposite){api()}})//中文输入开始input.addEventListener('compositionstart',()=>{console.log('start');isComposite=true})  // 中文输入结束input.addEventListener('compositionend',()=>{console.log('end');isComposite=false//中文输入后再进行查询api()})//注：在vue查询中，一般都会使用修饰符lazy懒加载进行搜索

compositionstart
在这里插入图片描述

6.scrollIntoView的使用

在这里插入图片描述

    <div class="container"><button onclick="scroll2Bot()">滚动到底部</button><div class="bot">底部锚点</div></div><script>let bot=document.querySelector('.bot')const scroll2Bot=()=>{bot.scrollIntoView({behavior:"smooth",block:"center"})}</script>

  .container{height: 2000px;position: relative;}.bot{position: absolute;bottom: 200px;box-sizing: border-box;padding: 10px;background: rgb(100, 199, 61);}

效果：

这个api可以用于如下场景：
1.填多个表单后提交，且表单超出可视区域时，如果有表单验证没通过就滚动到对应位置。
在这里插入图片描述
2.无缝轮播
以前的实现轮播的方式见：轮播图

预览效果：

代码：

    <div class="scroll"><div class="box"><div class="box-item">1</div><div class="box-item">2</div><div class="box-item">3</div><div class="box-item">4</div><div class="box-item">5</div><div class="box-item">6</div></div></div><div class="dots"><div class="dot">1</div><div class="dot">2</div><div class="dot">3</div><div class="dot">4</div><div class="dot">5</div><div class="dot">6</div></div><script>let items = document.querySelectorAll('.box-item')let dots = document.querySelectorAll('.dot')let scroll = document.querySelector('.scroll')let tag = 0let timer = nullfunction scrollEvent() {if (tag < items.length) {items[tag].scrollIntoView({ behavior: "smooth" })console.log(tag);tag++} else {tag = 0}}timer = setInterval(scrollEvent, 2000)scroll.addEventListener('mouseover', () => {console.log('hover');clearInterval(timer)timer = null})scroll.addEventListener('mouseout', () => {console.log('out');timer = setInterval(scrollEvent, 2000)})dots.forEach((val, index) => {val.onclick = function () {tag = indexconsole.log(index);clearInterval(timer)items[index].scrollIntoView({ behavior: "smooth" })timer = setInterval(scrollEvent, 2000)}})</script>

    .scroll {margin: 50px auto;width: 400px;height: 200px;border: 2px solid darkcyan;overflow: hidden;}.box {position: absolute;display: flex;width: 2400px;height: 200px;position: relative;}.box-item {left: 0;display: flex;justify-content: center;align-items: center;font-size: 42px;color: #fff;width: 400px;height: 200px;}.dot:nth-child(even),.box-item:nth-child(even) {background: #46ca12;}.dot:nth-child(odd),.box-item:nth-child(odd) {background: #e29a13;}.dots {margin: 20px 0;display: flex;width: 400px;justify-content: center;margin: 0 auto;}.dot {margin: 0 20px;color: #fff;box-sizing: border-box;padding: 0 5px;border-radius: 10px;display: flex;justify-content: center;align-items: center;box-shadow: 1px 2px 5px rgba(0, 0, 0, .5);}.dot:hover {transform: translateY(-2px);cursor: pointer;}

7.用css画图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="display:flex"><input  type="file"   /><button>下载html</button></div><script src="./index.js"></script>
</body>
</html>

//思路
const fileDom = document.querySelector("input[type=file]");
const btn = document.querySelector("button");//选择文件生成图片对象
function loadImage() {console.log(fileDom.files);const file = fileDom.files[0];if (!file) {return;}const objUrl = URL.createObjectURL(file);const img = new Image();return new Promise((resolve, reject) => {img.onload = () => {resolve(img);};img.onerror = () => {resolve(null);};img.src = objUrl;});
}//创建div的Html
function createHTML(width, height, bmp) {const shadowCssFragments = []; //阴影css的片段const shadowCsshover = []; //鼠标移入的css阴影//读取每个位图的像素点for (let r = 0; r < height; r++) {for (let c = 0; c < width; c++) {const i = r * width + c,R = bmp[i * 4],G = bmp[i * 4 + 1],B = bmp[i * 4 + 2],A = bmp[i * 4 + 3] / 255;shadowCssFragments.push(`${c + 1}px ${r}px rgba(${R},${G},${B},${A})`);shadowCsshover.push(`${c + 1}px ${r}px rgba(${255 - R},${255 - G},${255 - B},${A})`);}}return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.shadow-img{width: ${width}px;height: ${height}px;}.shadow-img .inner{width: 1px;height: 1px;box-shadow: ${shadowCssFragments.join(",")};transition:  1.5s;}.shadow-img:hover .inner{box-shadow: ${shadowCsshover.join(",")};}</style><body><div class="shadow-img"><div class="inner"></div></div></body></html>`;
}//下载html
function download(html) {let blob = new Blob([html], { type: "text/html" });let url = window.URL.createObjectURL(blob);let a = document.createElement("a");a.href = url;a.style.display = "none";a.download = "demo.html";a.click();
}
async function generate() {const img = await loadImage(); //得到图片对象if (!img) {return;}//将图片画到canvans上const cvs = document.createElement("canvas");cvs.width = img.width;cvs.height = img.height;const ctx = cvs.getContext("2d");ctx.drawImage(img, 0, 0);//获取canvas中的位图const bmp = ctx.getImageData(0, 0, img.width, img.height).data;const html = createHTML(img.width, img.height, bmp);//下载htmldownload(html);
}btn.onclick = generate;

8.奥运五环绘制

效果：
在这里插入图片描述
代码：

    <div class="box"><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="ring"></div>   </div>

    .box {width: 700px;display: flex;flex-wrap: wrap;justify-content: center;transform-style: preserve-3d;}.ring {width: 200px;height: 200px;border-radius: 50%;box-sizing: border-box;margin: 5px;}.ring:nth-child(1) {border: 15px solid blue;transform:  rotateX(-1deg) ;}.ring:nth-child(2) {border: 15px solid black;transform:  rotateX(-1deg) ;}.ring:nth-child(3) {border: 15px solid red;transform: rotateX(-1deg);}.ring:nth-child(4) {border: 15px solid yellow;transform: translateY(-100px) rotateX(1deg) ;}.ring:nth-child(5) {border: 15px solid green;transform: translateY(-100px)  rotateX(1deg);}

9.文字光影

效果：

代码：

    <div class="box"><span>G</span><span>e</span><span>n</span><span>s</span><span>h</span><span>i</span><span>n</span><span>I</span><span>m</span><span>p</span><span>a</span><span>c</span><span>t</span></div>

    body {background: #000;}.box {margin: 50px auto;font-size: 62px;font-weight: 800;text-align: center;}span {color: rgb(217, 255, 0);animation: shining 1s ease-in-out infinite alternate;}span:nth-child(13) {animation-delay: 2.4s;}@keyframes shining {to {color: rgb(16, 224, 44);text-shadow: 20px 3px 60px rgb(16, 224, 44);}}span:nth-child(2) {animation-delay: 0.2s;}span:nth-child(3) {animation-delay: 0.4s;}span:nth-child(4) {animation-delay: 0.6s;}span:nth-child(5) {animation-delay: 0.8s;}span:nth-child(6) {animation-delay: 1s;}span:nth-child(7) {animation-delay: 1.2s;}span:nth-child(8) {animation-delay: 1.4s;}span:nth-child(9) {animation-delay: 1.6s;}span:nth-child(10) {animation-delay: 1.8s;}span:nth-child(11) {animation-delay: 2s;}span:nth-child(12) {animation-delay: 2.2s;}

10.九宫格图片

效果：

代码：

<div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

    body{background: #000;}.box{width: 300px;height: 300px;margin: 50px auto;display: flex;flex-wrap: wrap;position: relative;}.item{width: 100px;background-size: 300px 300px;background-image: url('./paimon.jpg');box-shadow: inset 0 0 0 5px #fff;position: relative;transition: 1s ease;}.item:nth-child(3n+1){left: -20px;background-position-x: 0px;} .item:nth-child(3n+2){left: 0px;background-position-x: -100px;}.item:nth-child(3n){left: 20px;background-position-x: -200px;}.item{top: 20px;background-position-y:-200px ;}.item:nth-child(-n+6){top: 0;background-position-y: -100px;}.item:nth-child(-n+3){top: -20px;background-position-y: 0;}.box:hover .item{left: 0;top: 0;box-shadow: none;}