code review的思考和实践
2024-06-03 10:47:22
使用方式
1.看名称效果图，有没有和自己想要的效果类似的
2.有的话，复制粘贴代码使用
3.也可以自己修改一下
4.css效果并不是特别难，只是有时候我们可能想不到
5.笔者空闲时间，会继续更新的哦，点赞关注不迷路**^_^**
注意：一些代码思路，笔者写在代码注释中去了
1_鼠标悬浮文字阴影跳动
效果图
代码
<!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><style> h1 {width: 80px;color: cornflowerblue;}h1:hover {animation: animate 0.5s linear infinite;}@keyframes animate {0%,25% {text-shadow: 2px 2px 2px #ff6384;}50% {text-shadow: 2px -2px 2px #ff6384;}75% {text-shadow: -2px 2px 2px #ff6384;}100% {text-shadow: -2px -2px 2px #ff6384;}} </style>
</head><body><h1>hello</h1><!-- 一说到阴影，我们常常就会想到盒子的阴影，box-shadow。实际上css3另外提供了文字阴影text-shadowtext-shadow对应属性 text-shadow: h-shadow v-shadow blur color; 水平阴影 垂直阴影 模糊范围 颜色值本例中，当鼠标悬浮的时候，给文字加上动画。四个方向依次都出现文字阴影，就类似跳动的效果了-->
</body></html>
2_鼠标悬浮文字底部出现下划线并变宽
效果图
代码
<!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><style> .box {width: 160px;/* 外盒子相对定位，便于伪元素绝对定位(使下划线在文字的最底下) */position: relative;}h1::before {content: '';height: 4px;background: red;/* 伪元素默认样式 display: inline;所以需要转成inline-block宽高才会生效 */display: inline-block;/* 通过定位使下划线在最低层 */position: absolute;bottom: -6px;width: 0;/* 加上一个过渡效果，使之丝滑一些 */transition: width 0.36s;}h1:hover::before {/* 悬浮时候，让下划线伪元素宽度变成100%即可出现效果 */width: 100%;} </style>
</head><body><div class="box"><h1>悬浮下划线</h1></div><!-- 思路：1. 使用伪元素创建下划线2. 通过定位让下划线的位置在文字的底部3. 初始下划线宽度为04. 悬浮时更改为100%即出现效果 -->
</body></html>
3_文字颜色渐变流光效果
效果图
代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style> /* 加上 -webkit- 注意兼容 */h1 {background: -webkit-linear-gradient(135deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);/* 文字颜色填充设置为透明 */-webkit-text-fill-color: transparent;/* 背景裁剪，即让文字使用背景色 */-webkit-background-clip: text;/* 背景图放大一下，看着柔和一些 */-webkit-background-size: 200% 100%;/* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/-webkit-animation: flowCss 12s infinite linear;}@-webkit-keyframes flowCss {0% {/* 移动背景位置 */background-position: 0 0;}100% {background-position: -400% 0;}}h1:hover {-webkit-animation: flowCss 4s infinite linear;} </style>
</head><body><h1>文字颜色渐变流光效果</h1><!-- 思路就是 文字颜色填充为透明、背景裁剪让文字使用背景色、然后设置一个渐变背景色再放大一下背景，最后通过动画移动背景位置，于是效果就出来了 -->
</body></html>
4_打字机效果
效果图
代码
<!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><style> h1 {/* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */width: 12em;/* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现， 注意step和字数保持一致，光标动画也是同理，*/animation: typingWords 5s steps(12) infinite, cursor 0.5s steps(1) infinite;/* 要设置不允许换行，且溢出隐藏 */white-space: nowrap;overflow: hidden;/* 使用右边框作为打印的指针光标 */border-right: 1px solid #000;}@keyframes typingWords {0% {width: 0;}}@keyframes cursor {50% {border-color: transparent;}} </style>
</head><body><h1>欢迎光临呐，各位访客们。</h1><<img src="https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/ --" style="margin: auto" />
</body></html>
5_文字左右旋转晃动效果
效果图
代码
<!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><style> span {font-size: 48px;font-weight: 600;animation: rotate 0.3s ease infinite;/* 注意，要开启绝对定位哦 */position: absolute;}/* 鼠标悬浮开启动画也可以的span:hover {animation: rotate 0.3s ease infinite;} */@keyframes rotate {0% {transform: rotate(0);}20% {transform: rotate(-2deg);}60% {transform: rotate(0);}80% {transform: rotate(2deg);}100% {transform: rotate(0);}}span:nth-child(2) {margin-left: 108px;}span:nth-child(3) {margin-left: 216px;} </style>
</head><body><span>代码</span><span>修仙</span><span>之路</span>
</body></html>
6_圆圈呼吸扩散效果
效果图
代码
<!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><style> body {margin: 120px;}.circle-breath {background: pink;box-shadow: 0 0 0 0 rgb(204, 73, 152);height: 36px;width: 36px;border-radius: 50%;animation: donghua 2.4s infinite;}@keyframes donghua {0% {transform: scale(0.60);/* 注意rgba中的a的设置 */box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);}60% {transform: scale(1);box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);}100% {transform: scale(0.60);box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);}} </style>
</head><body><div class="circle-breath"></div><!-- 动画中应用背景色阴影，背景色阴影初始透明度为60%，后续为0搭配使用scale进行缩放，便可以达到圆圈呼吸扩散效果 -->
</body></html>
7_音频波纹加载效果
效果图
代码
<!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><style> body {padding: 120px;}.music {width: 175px;height: 100px;display: flex;}.music span {width: 6px;border-radius: 18px;margin-right: 6px;}.music span:nth-child(1) {/* 时间递增，参差不齐的效果 */animation: bar1 2s 0.2s infinite linear;}.music span:nth-child(2) {animation: bar2 2s 0.4s infinite linear;}.music span:nth-child(3) {animation: bar3 2s 0.6s infinite linear;}.music span:nth-child(4) {animation: bar4 2s 0.8s infinite linear;}.music span:nth-child(5) {animation: bar5 2s 1.0s infinite linear;}.music span:nth-child(6) {animation: bar6 2s 1.2s infinite linear;}.music span:nth-child(7) {animation: bar7 2s 1.4s infinite linear;}.music span:nth-child(8) {animation: bar8 2s 1.6s infinite linear;}.music span:nth-child(9) {animation: bar9 2s 1.8s infinite linear;}@keyframes bar1 {0% {background: #f677b0;margin-top: 25%;height: 10%;}50% {background: #f677b0;height: 100%;margin-top: 0%;}100% {background: #f677b0;height: 10%;margin-top: 25%;}}@keyframes bar2 {0% {background: #df7ff2;margin-top: 25%;height: 10%;}50% {background: #df7ff2;height: 100%;margin-top: 0%;}100% {background: #df7ff2;height: 10%;margin-top: 25%;}}@keyframes bar3 {0% {background: #8c7ff2;margin-top: 25%;height: 10%;}50% {background: #8c7ff2;height: 100%;margin-top: 0%;}100% {background: #8c7ff2;height: 10%;margin-top: 25%;}}@keyframes bar4 {0% {background: #7fd0f2;margin-top: 25%;height: 10%;}50% {background: #7fd0f2;height: 100%;margin-top: 0%;}100% {background: #7fd0f2;height: 10%;margin-top: 25%;}}@keyframes bar5 {0% {background: #7ff2d3;margin-top: 25%;height: 10%;}50% {background: #7ff2d3;height: 100%;margin-top: 0%;}100% {background: #7ff2d3;height: 10%;margin-top: 25%;}}@keyframes bar6 {0% {background: #7ff2a0;margin-top: 25%;height: 10%;}50% {background: #7ff2a0;height: 100%;margin-top: 0%;}100% {background: #7ff2a0;height: 10%;margin-top: 25%;}}@keyframes bar7 {0% {background: #adf27f;margin-top: 25%;height: 10%;}50% {background: #adf27f;height: 100%;margin-top: 0%;}100% {background: #adf27f;height: 10%;margin-top: 25%;}}@keyframes bar8 {0% {background: #e7f27f;margin-top: 25%;height: 10%;}50% {background: #e7f27f;height: 100%;margin-top: 0%;}100% {background: #e7f27f;height: 10%;margin-top: 25%;}}@keyframes bar9 {0% {background: #ecaa64;margin-top: 25%;height: 10%;}50% {background: #ecaa64;height: 100%;margin-top: 0%;}100% {background: #ecaa64;height: 10%;margin-top: 25%;}} </style>
</head><body><div class="music"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><!-- 给每一个bar指定margin-top和height的动画的变化为了效果更好看，让每一个bar的背景色都不一样，便是五彩斑斓了 -->
</body></html>
8_四周线条环绕流动效果
效果图
代码
<!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><style> body {padding: 120px;}.mainbox {width: 320px;height: 320px;position: relative;/* 超出隐藏需要加上 */overflow: hidden;}.content {width: 320px;height: 320px;line-height: 320px;text-align: center;background-color: #cde;}.line {/* 结合外层元素的相对定位 */position: absolute;}.line:nth-child(1) {top: 0;left: 0;width: 100%;height: 3px;/* 加上渐变效果，方可形成拖尾效果 */background: linear-gradient(90deg, transparent, orange);animation: animate1 8s linear infinite;}/* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */@keyframes animate1 {0% {left: -100%;}50%,100% {left: 100%;}}.line:nth-child(2) {top: -100%;right: 0;width: 3px;height: 100%;background: linear-gradient(180deg, transparent, red);animation: animate2 8s linear infinite;/* 注意要加上延时触发动画效果，这样线条才会依次触发 */animation-delay: 2s;}@keyframes animate2 {0% {top: -100%;}50%,100% {top: 100%;}}.line:nth-child(3) {bottom: 0;right: 0;width: 100%;background: linear-gradient(270deg, transparent, green);animation: animate3 8s linear infinite;animation-delay: 4s;}@keyframes animate3 {0% {right: -100%;height: 3px;}50%,100% {height: 2px;right: 100%;}}.line:nth-child(4) {bottom: -100%;left: 0;width: 3px;height: 100%;background: linear-gradient(360deg, transparent, #3a86ff);animation: animate4 8s linear infinite;animation-delay: 6s;}@keyframes animate4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}} </style>
</head><body><div class="mainbox"><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><div class="content">线条环绕</div></div>
</body></html>
9_鼠标悬浮开门关门效果
效果图
代码
<!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><style> body {box-sizing: border-box;padding: 160px 0 0 240px;}/* 门容器样式 */.doorWrap {width: 320px;height: 320px;border: 1px solid #666;perspective: 500px;position: relative;display: flex;}/* 左门右门的共有样式 */.leftDoor,.rightDoor {width: 50%;height: 100%;background-color: rgb(194, 37, 37);transition: 1.2s;z-index: 2;display: flex;justify-content: center;align-items: center;border: 1px solid #333;}/* 设置旋转元素的基点，左边大门以左侧为基准点旋转 */.leftDoor {transform-origin: left;}/* 设置旋转元素的基点，右边大门以右侧为基准点旋转 */.rightDoor {transform-origin: right;}/* 当鼠标悬浮的时候，设置开门的幅度，左门往左侧开 */.doorWrap:hover .leftDoor {transform: rotateY(-130deg);}/* 右门往右侧开 */.doorWrap:hover .rightDoor {transform: rotateY(130deg);}/* 内容区的定位层级稍微低一些 */.content {position: absolute;z-index: 1;width: 100%;height: 100%;background-color: #abf;display: flex;justify-content: center;align-items: center;} </style>
</head><body><div class="doorWrap"><div class="leftDoor">左门</div><div class="rightDoor">右门</div><div class="content">欢迎光临，客官里边请...</div></div>
</body></html>
10_吃豆人效果
效果图
代码
<!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><style> .pacMan {display: inline-block;position: relative;margin: 120px;}/* 使用伪元素创建吃豆人的眼睛 */.pacMan::before {content: '';width: 0.4em;height: 0.4em;border-radius: 50%;background-color: #333;position: absolute;top: 6px;left: 21px;z-index: 2000;}/* mouth1搭配mouth2组成吃豆人张嘴闭嘴的动画 */.mouth1 {width: 0;height: 0;border: 25px solid #E1B204;border-radius: 50%;border-right-color: transparent;animation: upup .32s 0s infinite;position: relative;z-index: 3;}@keyframes upup {0% {transform: rotate(270deg);}50% {transform: rotate(1turn);}100% {transform: rotate(270deg);}}.mouth2 {width: 0;height: 0;border: 25px solid #E1B204;border-right-color: transparent;border-radius: 25px;margin-top: -50px;animation: downdown .32s 0s infinite;position: relative;z-index: 3;}@keyframes downdown {0% {transform: rotate(90deg);}50% {transform: rotate(0);}100% {transform: rotate(90deg);}}/* 豆子不断移动 */.beanOne {background-color: #E1B204;border-radius: 50%;width: 10px;height: 10px;position: absolute;transform: translateY(-6px);top: 25px;left: 100px;animation: beanAnimation 1s linear .52s infinite;}.beanTwo {background-color: #E1B204;border-radius: 50%;width: 10px;height: 10px;position: absolute;transform: translateY(-6px);top: 25px;left: 100px;animation: beanAnimation 1s linear 1.1s infinite;}@keyframes beanAnimation {75% {opacity: .72;}100% {transform: translate(-100px, -6px);}} </style>
</head><body><div class="pacMan"><div class="eye"></div><div class="mouth1"></div><div class="mouth2"></div><div class="beanOne"></div><div class="beanTwo"></div></div>
</body></html>
11_背景颜色流动效果
效果图
代码
<!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><style> .bg {margin: 60px;width: 32%;height: 48vh;background: linear-gradient(-45deg, #dae, #f66, #3c9, #09f, #66f);background-size: 200% 200%;animation: gradient 8s ease infinite;}@keyframes gradient {0% {background-position: 0 12%;}50% {background-position: 100% 100%;}100% {background-position: 0 12%;}} </style>
</head><body><div class="bg"></div>
</body></html>
12_小球转圈加载效果
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style> .wrap {margin: 120px 0 0 240px;width: 75px;height: 75px;position: relative;/* transform-origin: 设置的效果搭配边框看，效果更加明显 *//* border: 1px solid #e9e9e9; */}.round {position: absolute;width: 13px;height: 13px;border-radius: 50%;background-color: rgb(241, 141, 157);/* 加上动画效果 */animation: circleRound 2.8s ease infinite;/* 设置旋转中心，搭配.wrap的border看 */transform-origin: 50% 75px;}/* 注意z-index层级关系，依次递减 */.round:nth-child(1) {z-index: 7;}/* 注意动画延后animation-delay播放，依次递增 *//* 至于小圆球则越来越小 */.round:nth-child(2) {height: 12px;width: 12px;background-color: rgb(199, 136, 185);animation-delay: .2s;z-index: 6;}.round:nth-child(3) {height: 11px;width: 11px;background-color: rgb(153, 69, 223);animation-delay: .4s;z-index: 5;}.round:nth-child(4) {height: 10px;width: 10px;background-color: rgb(69, 141, 223);animation-delay: .6s;z-index: 4;}.round:nth-child(5) {height: 9px;width: 9px;background-color: rgb(69, 223, 203);animation-delay: .8s;z-index: 3;}.round:nth-child(6) {height: 8px;width: 8px;background-color: rgb(100, 223, 69);animation-delay: 1s;z-index: 2;}.round:nth-child(7) {height: 7px;width: 7px;background-color: rgb(223, 200, 69);animation-delay: 1.2s;z-index: 1;}@keyframes circleRound {to {transform: rotate(1turn);}} </style>
</head><body><div class="wrap"><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div></div>
</body></html>
13_钟摆效果
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style> /* 画一条钟摆线条 */.line {margin: 24px 0 0 320px;width: 6px;height: 320px;background: #baf;border-radius: 8px;/* 钟摆动画周期两秒、匀速运动、无限循环 */animation: pendulum 3s linear infinite;/* 旋转以上方中间为中心进行旋转，因为默认是中间中心旋转 */transform-origin: top;/* 注意因为钟摆的小球是使用伪元素画的，故这里要加上定位 */position: relative;}/* 使用伪元素画钟摆小球，这样在旋转的时候，小球就一致跟着钟摆线了 */.line::after {content: '';width: 32px;height: 32px;border-radius: 50%;background-color: #faa;/* 伪元素搭配定位方便调整小球的位置 */position: absolute;bottom: 0;left: -12px;}/* 钟摆动画rotate旋转起来 */@keyframes pendulum {0% {transform: rotate(0deg);}25% {transform: rotate(45deg);}50% {transform: rotate(0deg);}75% {transform: rotate(-45deg);}100% {transform: rotate(0deg);}} </style>
</head><body><div class="line"></div>
</body></html>
14_文字烟雾消散效果
效果图
代码
<!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><style> /* 主要是text-shadow和transform搭配动画的巧妙运用 */.wrap {width: 600px;height: 480px;box-sizing: border-box;padding: 120px;background-color: #000;color: transparent;display: flex;}h3 {text-shadow: 0 0 0 #fff;animation: smoky 6s infinite;}@keyframes smoky {60% {text-shadow: 0 0 40px #fff;}100% {text-shadow: 0 0 20px #fff;/* 这里是重点 */transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skew(70deg) scale(1.5);opacity: 0;}}h3:nth-child(1) {animation-delay: 1s;}h3:nth-child(2) {animation-delay: 1.4s;}h3:nth-child(3) {animation-delay: 1.8s;}h3:nth-child(4) {animation-delay: 2.2s;}h3:nth-child(5) {animation-delay: 2.6s;} </style>
</head><body><div class="wrap"><h3>代码</h3><h3>修仙</h3><h3>之路</h3><h3>道阻</h3><h3>且长...</h3></div>
</body></html>
15_水平左右抖动效果
效果图
代码
<!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><style> body {box-sizing: border-box;padding: 120px;}.target {width: 48px;height: 48px;line-height: 48px;text-align: center;font-weight: bold;color: red;background: #baf;transform-origin: bottom;animation: shaking 1.2s ease-in-out infinite;/* 初始暂停播放，后续通过js控制播放 */animation-play-state: paused;}/* 通过translate3d的x轴移动去控制水平移动抖动效果 */@keyframes shaking {10%,90% {transform: translate3d(-1.2px, 0, 0);}20%,80% {transform: translate3d(2px, 0, 0);}30%,70% {transform: translate3d(-4.8px, 0, 0);}40%,60% {transform: translate3d(4.8px, 0, 0);}50% {transform: translate3d(-4.8px, 0, 0);}} </style>
</head><body><div class="target">^_^</div><br><button class="start">动画开始</button><button class="pause">动画暂停</button><script> // js去设置animationPlayState属性值从而控制动画播放let startBtn = document.querySelector('.start')let pauseBtn = document.querySelector('.pause')let target = document.querySelector('.target')startBtn.onclick = () => {target.style.animationPlayState = 'running'}pauseBtn.onclick = () => {target.style.animationPlayState = 'paused'} </script>
</body></html>
16_垂直方向坠落弹跳效果
效果图
代码
<!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><style> body {box-sizing: border-box;padding: 120px;}.target {background: #666;width: 108px;height: 60px;border-radius: 60px;color: aliceblue;font-weight: bolder;line-height: 60px;text-align: center;}.animationClass {animation: 1.2s ease 0s infinite backwards bounce;}/* 主要是通过控制translateY的值来操作y轴的距离实现弹跳效果 */@keyframes bounce {0% {transform: translateY(-64px);animation-timing-function: ease-in;opacity: 1;}24% {opacity: 1;}40% {transform: translateY(-32px);animation-timing-function: ease-in;}62% {transform: translateY(-16px);animation-timing-function: ease-in;}82% {transform: translateY(-8px);animation-timing-function: ease-in;}92% {transform: translateY(-4px);animation-timing-function: ease-in;}25%,55%,75%,90% {transform: translateY(0);animation-timing-function: ease-out;}100% {transform: translateY(0);animation-timing-function: ease-out;opacity: 1;}} </style>
</head><body><div class="target">O__O</div><br><button class="start">动画开始</button><button class="end">动画结束</button><script> let startBtn = document.querySelector('.start')let endBtn = document.querySelector('.end')let targetBox = document.querySelector('.target')// 通过dom的classList的API去控制动画的开始和结束(添加类移除类)startBtn.onclick = () => {targetBox.classList.add('animationClass')}endBtn.onclick = () => {targetBox.classList.remove('animationClass')} </script>
</body></html>
17_仿figma加载中盒子转圈效果
效果图
代码
<!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><style> body {padding: 120px;}.borderDom {position: relative;width: 18px;height: 10px;border-radius: 10px;border: 2px solid #333;animation: oneAnimation 4s cubic-bezier(.12, 0, .39, 0) infinite;}/* 中间的线使用定位调整到中间位置 */.middleLine {position: absolute;left: 8px;width: 2px;height: 10px;background-color: #333;animation: twoAnimation 4s cubic-bezier(.12, 0, .39, 0) infinite;}/* 外边框使用X轴方向的缩放 */@keyframes oneAnimation {0% {transform: scaleX(.5);}5% {transform: scaleX(1);}10% {transform: scaleX(.5);}15% {transform: scaleX(1);}20% {transform: scaleX(.5);}25% {transform: scaleX(1);}75% {transform: scaleX(1);}80% {transform: scaleX(.5);}85% {transform: scaleX(1);}90% {transform: scaleX(.5);}95% {transform: scaleX(1);}100% {transform: scaleX(.5);}}/* 中间线使用translate移动达到效果 */@keyframes twoAnimation {0% {transform: translate(-9px);}5% {transform: translate(0);}10% {transform: translate(9px);}10.1% {transform: translate(-9px);}15% {transform: translate(0);}20% {transform: translate(9px);}20.1% {transform: translate(-9px);}25% {transform: translate(0);}75% {transform: translate(0);}80% {transform: translate(9px);}80.1% {transform: translate(-9px);}85% {transform: translate(0);}90% {transform: translate(9px);}90.1% {transform: translate(-9px);}95% {transform: translate(0);}100% {transform: translate(9px);}} </style>
</head><body><div class="borderDom"><div class="middleLine"></div></div>
</body></html>
18_文字横向伸展模糊淡入淡出效果
效果图
代码
<!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><style> .enter {margin-top: 120px;text-align: center;/* 贝塞尔曲线动画 */animation: enterenter 1.8s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}@keyframes enterenter {0% {/* 加上文字间距 */letter-spacing: 1em;/* Z轴变换 */transform: translateZ(300px);/* filter: blur(); 像素模糊效果 */filter: blur(12px);/* 透明度也要改变 */opacity: 0;}100% {transform: translateZ(12px);filter: blur(0);opacity: 1;}}.leave {text-align: center;animation: leaveleave 1.8s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}@keyframes leaveleave {0% {transform: translateZ(0);filter: blur(0.01);}100% {letter-spacing: 1em;transform: translateZ(300px);filter: blur(12px) opacity(0%);}} </style>
</head><body><h2 class="enter">早上好，程序猿兽们</h2><br><h2 class="leave">晚上好，程序猿兽们</h2>
</body></html>
19_四个方向盒子旋转移动进入效果
效果图
代码
<!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><style> body {overflow: hidden;}.target1 {width: 72px;height: 72px;background-color: #baf;/* 左侧滚动旋转进入 */animation: leftEnter 1.5s infinite ease-out both;position: absolute;left: 45%;top: 30%;}@keyframes leftEnter {0% {transform: translateX(-1000px) rotate(-540deg);opacity: 0;}100% {transform: translateX(0) rotate(0deg);opacity: 1;}}.target2 {width: 72px;height: 72px;background-color: #abf;/* 右侧滚动旋转进入 */animation: rightEnter 1.5s infinite ease-out both;position: absolute;left: 45%;top: 40%;}@keyframes rightEnter {0% {transform: translateX(1000px) rotate(540deg);opacity: 0;}100% {transform: translateX(0) rotate(0deg);opacity: 1;}}.target3 {width: 72px;height: 72px;background-color: pink;/* 上方滚动旋转进入 */animation: topEnter 1.5s infinite ease-out both;position: absolute;left: 45%;top: 50%;}@keyframes topEnter {0% {transform: translateY(-800px) rotate(540deg);opacity: 0;}100% {transform: translateX(0) rotate(0deg);opacity: 1;}}.target4 {width: 72px;height: 72px;background-color: rgb(211, 140, 233);/* 下方滚动旋转进入 */animation: bottomEnter 1.5s infinite ease-out both;position: absolute;left: 45%;top: 20%;}@keyframes bottomEnter {0% {transform: translateY(1200px) rotate(540deg);opacity: 0;}100% {transform: translateX(0) rotate(0deg);opacity: 1;}} </style>
</head><body><div class="target1"></div><div class="target2"></div><div class="target3"></div><div class="target4"></div>
</body></html>
20_按钮点击波纹效果
效果图
代码
<!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><style> body {padding: 120px;background-color: #999;}button {margin: 8px;width: 120px;height: 48px;background-color: #faa;color: #fff;border: none;border-radius: 12px;cursor: pointer;/* 开启定位是为了给波纹动画元素使用 */position: relative;/* 必须加上超出隐藏，注释掉以后效果很明显 */overflow: hidden;/* hover过渡一下 */transition: all 0.3s;}button:hover {box-shadow: 0 0 18px rgba(255, 255, 255, 0.36);}.btn2 {background-color: violet;}.btn3 {background-color: rgb(231, 116, 164);}.btn4 {background-color: rgb(116, 204, 231);}.btn5 {background-color: rgb(54, 134, 58);}.btn6 {background-color: rgb(224, 126, 45);}.ripple {position: absolute;border-radius: 50%;background-color: rgba(255, 255, 255, 0.48);transform: scale(0);animation: ripple 240ms linear;}@keyframes ripple {to {transform: scale(2.4);opacity: 0.12;}} </style>
</head><body><button class="targetBtn">点击波纹效果</button><button class="targetBtn btn2">点击波纹效果</button><button class="targetBtn btn3">点击波纹效果</button><button class="targetBtn btn4">点击波纹效果</button><button class="targetBtn btn5">点击波纹效果</button><button class="targetBtn btn6">点击波纹效果</button><script> // 创建波纹函数，只要一点击就创建一个波纹function createRipple(event) {const button = event.target; // 获取事件对象button按钮const circle = document.createElement("div"); // 创建一个div标签用于表示一个波纹（波纹就是一个圆）const diameter = Math.max(button.clientWidth, button.clientHeight); // 取dom宽度和高度中的一个最大值，以最大值做直径const radius = diameter / 2; // 直径除以2即为半径 （若不理解这几行，可注释掉overflow: hidden;再点击按钮即明白）circle.style.width = circle.style.height = `${diameter}px`; // 以直径作为宽高circle.style.left = `${event.clientX - button.offsetLeft - radius}px`; // 设置定位的位置circle.style.top = `${event.clientY - button.offsetTop - radius}px`;circle.classList.add("ripple"); // classList加上类名既有动画效果了// 若有这个波纹动画圆dom以后，就移除这个dom再追加。若没有直接追加let ripple = button.querySelector('.ripple')if (ripple) {ripple.remove();}button.appendChild(circle); // 将这个波纹动画圆作为子元素追加到父元素button上（这样父元素相对定位，子元素绝对定位就生效了）}// 1. 获取将要点击的按钮dom数组const targetBtnArr = document.querySelectorAll('.targetBtn')// 2. 给数组中的每一项，即要点击的按钮dom绑定点击监听事件for (let i = 0; i < targetBtnArr.length; i++) {let targetBtn = targetBtnArr[i]targetBtn.addEventListener("click", createRipple);} </script>
</body></html>
21_鼠标悬浮按钮边框线条动画效果
效果图
代码
<!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><style> body {background: #faa;padding: 120px;}button {display: inline-block;border: none;color: #fff;cursor: pointer;margin: 12px 18px;background: rgb(201, 108, 234);position: relative;}span {display: block;padding: 18px 60px}button::before,button::after {content: "";width: 0;height: 2px;position: absolute;transition: all .2s linear;background: #fff}span::before,span::after {content: "";width: 2px;height: 0;position: absolute;transition: all .2s linear;background: #fff}button:hover::before,button:hover::after {width: 100%}button:hover span::before,button:hover span::after {height: 100%}.btn1::before,.btn1::after {transition-delay: .2s}.btn1 span::before,.btn1 span::after {transition-delay: 0s}.btn1::before {right: 0;top: 0}.btn1::after {left: 0;bottom: 0}.btn1 span::before {left: 0;top: 0}.btn1 span::after {right: 0;bottom: 0}.btn1:hover::before,.btn1:hover::after {transition-delay: 0s}.btn1:hover span::before,.btn1:hover span::after {transition-delay: .2s}.btn2::before,.btn2::after {transition-delay: 0s}.btn2 span::before,.btn2 span::after {transition-delay: .2s}.btn2::before {right: 0;top: 0}.btn2::after {left: 0;bottom: 0}.btn2 span::before {left: 0;top: 0}.btn2 span::after {right: 0;bottom: 0}.btn2:hover::before,.btn2:hover::after {transition-delay: .2s}.btn2:hover span::before,.btn2:hover span::after {transition-delay: 0s}.btn3::after {left: 0;bottom: 0;transition-delay: .6s}.btn3 span::after {transition-delay: .4s;right: 0;bottom: 0}.btn3::before {right: 0;top: 0;transition-delay: .2s}.btn3 span::before {transition-delay: 0s;left: 0;top: 0}.btn3:hover::after {transition-delay: 0s}.btn3:hover span::after {transition-delay: .2s}.btn3:hover::before {transition-delay: .4s}.btn3:hover span::before {transition-delay: .6s}.btn4::after {right: 0;bottom: 0;transition-duration: .4s}.btn4 span::after {right: 0;bottom: 0;transition-duration: .4s}.btn4::before {left: 0;top: 0;transition-duration: .4s}.btn4 span::before {left: 0;top: 0;transition-duration: .4s}.btn5::after {left: 0;bottom: 0;transition-duration: .4s}.btn5 span::after {right: 0;top: 0;transition-duration: .4s}.btn5::before {right: 0;top: 0;transition-duration: .4s}.btn5 span::before {left: 0;bottom: 0;transition-duration: .4s}.btn6::before {left: 50%;top: 0;transition-duration: .4s}.btn6::after {left: 50%;bottom: 0;transition-duration: .4s}.btn6 span::before {left: 0;top: 50%;transition-duration: .4s}.btn6 span::after {right: 0;top: 50%;transition-duration: .4s}.btn6:hover::before,.btn6:hover::after {left: 0}.btn6:hover span::before,.btn6:hover span::after {top: 0} </style>
</head><body><main><button class="btn1"><span>悬浮上左、下右</span></button><button class="btn2"><span>悬浮右上、左下</span></button><button class="btn3"><span>悬浮之一圈线条</span></button><button class="btn4"><span>悬浮右下角和左上角两个方向延伸</span></button><button class="btn5"><span>悬浮右上角和左下角两个方向延伸</span></button><button class="btn6"><span>悬浮四个方向中间点往两端延伸</span></button></main>
</body></html>
22_灯泡开关效果
效果图
代码
<!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><style> /* :root全局css变量搭配var()函数使用 */:root {--light-color: #fff}* {margin: 0;padding: 0;box-sizing: border-box;}body {width: 100%;height: 100vh;}.container {width: 100%;height: 100%;display: flex;}.light-container {width: 100%;display: flex;justify-content: center;align-items: center;background-color: #333;}.light {position: absolute;width: 80px;height: 80px;border-radius: 50%;background-color: var(--light-color);transition: all 0.24s;}.light::before {content: '';position: absolute;width: 35px;height: 80px;border-radius: 10px;background: var(--light-color);left: 27.5%;top: -50px;border-top: 30px solid black;}.light span:nth-child(1) {position: absolute;width: 30px;height: 30px;background: transparent;box-shadow: 20px 20px 0 10px var(--light-color);border-bottom-right-radius: 40px;left: -4px;top: -16px;transform: rotate(342deg);}.light span:nth-child(2) {position: absolute;width: 30px;height: 30px;background: transparent;box-shadow: -20px 20px 0 10px var(--light-color);border-bottom-left-radius: 40px;right: -3.4px;top: -16px;transform: rotate(16deg);}.wire {width: 4px;height: 400px;background-color: #8f8e8e;top: -18%;position: absolute;transition: all 0.24s;}.light::after {position: absolute;content: '';width: 140px;height: 140px;background: var(--light-color);border-radius: 50%;top: 50%;left: 0;filter: blur(40px);transform: translate(-18%, -40px);box-shadow: 0 0 10px var(--light-color),0 0 30px var(--light-color),0 0 60px var(--light-color),0 0 120px var(--light-color),0 0 200px var(--light-color),;}button {position: absolute;bottom: 240px;right: 240px;width: 120px;height: 36px;} </style>
</head><body><div class="container"><div class="light-container"><div class="wire"></div><div class="light"><span></span><span></span></div></div></div><button>开关按钮</button><script> let switchOn = truelet btn = document.querySelector('button')let light = document.querySelector('.light')let wire = document.querySelector('.wire')btn.onclick = () => {switchOn = <img src="http://t.zoukankan.com/kunmomo-p-12358005.html// 另外样式表也是一个对象，也可以打印 document.querySelector('style') 可访问其上的css属性 </script" style="margin: auto" />
</body></html>
23_鼠标悬浮手风琴样式展开图标效果图
效果图
代码
<!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><style> body {padding: 180px;background-color: #ddd;}.item {box-sizing: border-box;display: inline-flex;align-items: center;height: 60px;/* 手风琴效果就是鼠标悬浮宽度过渡 */width: 60px;margin: 4px 8px;/* 超出隐藏，因为要把伪元素文字遮挡住 */overflow: hidden;background: #fff;border-radius: 30px;box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.24);transition: all 0.5s;}.item:hover {width: 180px;border: none;}/* 悬浮加背景色 */.first:hover .icon {background-color: pink;}.second:hover .icon {background-color: #e9e9e9;}.third:hover .icon {background-color: pink;}.fouth:hover .icon {background-color: #e9e9e9;}.icon {width: 60px;height: 60px;display: flex;justify-content: center;align-items: center;border-radius: 30px;font-size: 28px;position: relative;transition: all 0.5s;/* 真实元素阻止鼠标事件，伪元素自动鼠标事件 */pointer-events: none;}/* 通过伪元素添加内容介绍文字 */.item:nth-child(1) .icon::after {position: absolute;content: '我是红桃';/* 宽度随着内容自适应 */width: fit-content;/* 文字不换行 */word-break: keep-all;/* 设置伪元素文字大小为中等大小 */font-size: medium;left: 72px;/* 真实元素阻止鼠标事件，伪元素自动鼠标事件 */pointer-events: auto;cursor: pointer;}.item:nth-child(2) .icon::after {position: absolute;content: '我是黑桃';width: fit-content;word-break: keep-all;font-size: medium;left: 72px;pointer-events: auto;cursor: pointer;}.item:nth-child(3) .icon::after {position: absolute;content: '我是方块';width: fit-content;word-break: keep-all;font-size: medium;left: 72px;pointer-events: auto;cursor: pointer;}.item:nth-child(4) .icon::after {position: absolute;content: '我是梅花';width: fit-content;word-break: keep-all;font-size: medium;left: 72px;pointer-events: auto;cursor: pointer;}/* 鼠标悬浮加文字下划线（给伪元素添加hover样式） */.icon:hover::after {text-decoration: underline;} </style>
</head><body><div class="item first"><div onclick="clickAfter('红桃')" style="color: #DD3B32;" class="icon">♥</div></div><div class="item second"><div onclick="clickAfter('黑桃')" style="color: #1A1A1A;" class="icon">♠</div></div><div class="item third"><div onclick="clickAfter('方块')" style="color: #FB1C17;" class="icon">♦</div></div><div class="item fouth"><div onclick="clickAfter('梅花')" style="color: #090B0A;" class="icon">♣</div></div><script> /** * 注意伪元素也可以绑定事件 *只需：真实元素 pointer-events: none; *伪元素 pointer-events: auto; * 参见文章：https://www.cnblogs.com/letgofishing/p/15987190.html * */function clickAfter(who) {console.log(who);} </script>
</body></html>
最后
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
code review的思考和实践相关推荐
- 如何做好Code Review：思考、方法和实践
最近被要求做一个关于Code Review的讲演.首先要说明的是,我并不是太擅长开展Code Review的活动.做这个完全是因为答应了别人又不好反悔.不过在做准备的过程中还是有一些感想. 关于Cod ...
- Code Review的亲身实践
Code Review,中文叫代码审查,指的是完成了部分功能的代码开发之后,在代码真正合并到仓库主分支之前,邀请同事帮你进行代码的审核和检查,检查代码的质量.规范.设计等等方面的过程. 代码审查的好处 ...
- 有人实践过 Phabricator 以及 Arcanist 作为 code review 的工具么？（转）
作者:覃超 链接:http://www.zhihu.com/question/19977889/answer/13539702 来源:知乎 平时就经常实践. 整个公司的code review就是使用这 ...
- Code Review最佳实践
我一直认为Code Review(代码审查)是软件开发中的最佳实践之一,可以有效提高整体代码质量,及时发现代码中可能存在的问题.包括像Google.微软这些公司,Code Review都是基本要求,代 ...
- Alibaba Code代码索引技术实践：为Code Review提供本地IDE的阅读体验
作者:曲径 阿里研发基础设施团队 Code Review在研发流程中非常重要,但Web界面中Code Intelligence能力的缺失改变了原有的代码阅读习惯,又增加了阅读成本.本文将介绍阿 ...
- Code Review 在丁香医生前端团队的实践
时间过得很快,转眼间 Code Review 机制在丁香医生前端团队已经运作一年多了.今年4月初时,将团队在 Code Review 方面的一些经验在丁香园前端团队进行了分享,各个业务线的前端同学们逐 ...
- 实战工作十年的Code Review方法论与实践总结
作为卓越工程文化的一部分,Code Review其实一直在进行中,只是各团队根据自身情况张驰有度,松紧可能也不一,这里简单梳理一下CR的方法和团队实践. 一.为什么要CR 提前发现缺陷 在CodeRe ...
- Google是如何做Code Review的？| CSDN原力计划
作者 | 帅昕 xindoo 编辑 | 屠敏 出品 | CSDN 博客 我和几个小伙伴一起翻译了Google前一段时间放出来的Google's Engineering Practices docume ...
- 万字详文告诉你如何做 Code Review
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|机器学习实验室 前言 作为公司代码委员会 golang 分 ...
最新文章
- 产品设计体会（1011）少做就是多做
- 第二十一课：材料磁性
- 企业必须由真正在乎它的人掌控
- 主板19针接口_【新品上市】D4双通道还能组RAID！华南B365D4主板6/7/8/9代全兼容！...
- Mysql 主从数据库同步详解
- 如何在C++中调用C程序？
- 【OS】进程同步概念
- WTM5.0发布，全面支持.net5
- 【C++ Priemr | 15】虚函数常见问题
- EASYSIZE备份
- Vue 过滤器filters
- 第10题 正则表达式匹配（动态规划）
- 北京航天大学考研计算机科学与技术分数线,北京航空航天大学计算机科学与技术考研...
- 使用H-lua框架制作魔兽争霸地图（3-物编-物品篇1）
- iOS的非常全的三方库，插件，大牛博客
- 江西省电子专题大赛考点讲解七：NE555定时器
- 【大四上学期】过程控制系统课程笔记
- 许鞍华新片《七里地》催泪 网友：看完想回家过年
- 【OpenCV计算机视觉基础】HSB的色调、饱和度和亮度概念
- 2021秋软工实践个人作业一