代码github仓库：https://github.com/shuirongsh...
应用形式
- 看名称效果图，有没有和本人想要的成果相似的
- 有的话，复制粘贴代码应用
- 也能够本人批改一下
- css成果并不是特地难，只是有时候咱们可能想不到
- 笔者闲暇工夫，会持续更新的哦，点赞关注不迷路
^_^
留神：一些代码思路，笔者写在代码正文中去了
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-shadow text-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. 初始下划线宽度为0 4. 悬浮时更改为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> <!-- css大佬张鑫旭的实现形式：https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/ --></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 = true let btn = document.querySelector('button') let light = document.querySelector('.light') let wire = document.querySelector('.wire') btn.onclick = () => { switchOn = !switchOn if (switchOn) { document.documentElement.style.setProperty('--light-color', '#fff') wire.style.background = '#8f8e8e' document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #000'); } else { document.documentElement.style.setProperty('--light-color', '#333') wire.style.background = '#333' document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #333'); } } // 应用js动静给伪元素设置款式，参见文章：http://t.zoukankan.com/kunmomo-p-12358005.html // 另外样式表也是一个对象，也能够打印 document.querySelector('style') 可拜访其上的css属性 </script></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>