打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果
生活随笔
收集整理的這篇文章主要介紹了
打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前期回顧??
是不是在為 API 煩惱 ？好用免費的api接口大全呼之欲出_免流接口api_彩色之外的博客-CSDN博客APi、常用框架、UI、文檔—— 整理合并https://blog.csdn.net/m0_57904695/article/details/130459417?spm=1001.2014.3001.5501?👍 本文專欄：開發(fā)技巧
用css打造?驚艷特效，快來一鍵三連抱走吧，源代碼都在博文中，建議收藏以便下次快速找到。
目錄
?Loading 篇
📚 鉛筆loading
📢 笑臉loading
🍭 圓盤loading
? 謝謝觀看
?Loading 篇
圖例就不一一展示了，直接上代碼，拷貝即走
📚 鉛筆loading
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>彩色之外——鉛筆loading</title><style>.pencil {display: block;position: fixed;top: 50%;left: 50%;margin: -5em 0 0 -5em;width: 10em;height: 10em;}.pencil__body1,.pencil__body2,.pencil__body3,.pencil__eraser,.pencil__eraser-skew,.pencil__point,.pencil__rotate,.pencil__stroke {-webkit-animation-duration: 3s;animation-duration: 3s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}.pencil__body1,.pencil__body2,.pencil__body3 {-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);}.pencil__body1 {-webkit-animation-name: pencilBody1;animation-name: pencilBody1;}.pencil__body2 {-webkit-animation-name: pencilBody2;animation-name: pencilBody2;}.pencil__body3 {-webkit-animation-name: pencilBody3;animation-name: pencilBody3;}.pencil__eraser {-webkit-animation-name: pencilEraser;animation-name: pencilEraser;-webkit-transform: rotate(-90deg) translate(49px, 0);-ms-transform: rotate(-90deg) translate(49px, 0);transform: rotate(-90deg) translate(49px, 0);}.pencil__eraser-skew {-webkit-animation-name: pencilEraserSkew;animation-name: pencilEraserSkew;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}.pencil__point {-webkit-animation-name: pencilPoint;animation-name: pencilPoint;-webkit-transform: rotate(-90deg) translate(49px, -30px);-ms-transform: rotate(-90deg) translate(49px, -30px);transform: rotate(-90deg) translate(49px, -30px);}.pencil__rotate {-webkit-animation-name: pencilRotate;animation-name: pencilRotate;}.pencil__stroke {-webkit-animation-name: pencilStroke;animation-name: pencilStroke;-webkit-transform: translate(100px, 100px) rotate(-113deg);-ms-transform: translate(100px, 100px) rotate(-113deg);transform: translate(100px, 100px) rotate(-113deg);}/* Animations */@-webkit-keyframes pencilBody1 {from,to {stroke-dashoffset: 351.86;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}50% {stroke-dashoffset: 150.8;/* 3/8 of diameter */-webkit-transform: rotate(-225deg);transform: rotate(-225deg);}}@keyframes pencilBody1 {from,to {stroke-dashoffset: 351.86;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}50% {stroke-dashoffset: 150.8;/* 3/8 of diameter */-webkit-transform: rotate(-225deg);transform: rotate(-225deg);}}@-webkit-keyframes pencilBody2 {from,to {stroke-dashoffset: 406.84;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}50% {stroke-dashoffset: 174.36;-webkit-transform: rotate(-225deg);transform: rotate(-225deg);}}@keyframes pencilBody2 {from,to {stroke-dashoffset: 406.84;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}50% {stroke-dashoffset: 174.36;-webkit-transform: rotate(-225deg);transform: rotate(-225deg);}}@-webkit-keyframes pencilBody3 {from,to {stroke-dashoffset: 296.88;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}50% {stroke-dashoffset: 127.23;-webkit-transform: rotate(-225deg);transform: rotate(-225deg);}}@keyframes pencilBody3 {from,to {stroke-dashoffset: 296.88;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}50% {stroke-dashoffset: 127.23;-webkit-transform: rotate(-225deg);transform: rotate(-225deg);}}@-webkit-keyframes pencilEraser {from,to {-webkit-transform: rotate(-45deg) translate(49px, 0);transform: rotate(-45deg) translate(49px, 0);}50% {-webkit-transform: rotate(0deg) translate(49px, 0);transform: rotate(0deg) translate(49px, 0);}}@keyframes pencilEraser {from,to {-webkit-transform: rotate(-45deg) translate(49px, 0);transform: rotate(-45deg) translate(49px, 0);}50% {-webkit-transform: rotate(0deg) translate(49px, 0);transform: rotate(0deg) translate(49px, 0);}}@-webkit-keyframes pencilEraserSkew {from,32.5%,67.5%,to {-webkit-transform: skewX(0);transform: skewX(0);}35%,65% {-webkit-transform: skewX(-4deg);transform: skewX(-4deg);}37.5%,62.5% {-webkit-transform: skewX(8deg);transform: skewX(8deg);}40%,45%,50%,55%,60% {-webkit-transform: skewX(-15deg);transform: skewX(-15deg);}42.5%,47.5%,52.5%,57.5% {-webkit-transform: skewX(15deg);transform: skewX(15deg);}}@keyframes pencilEraserSkew {from,32.5%,67.5%,to {-webkit-transform: skewX(0);transform: skewX(0);}35%,65% {-webkit-transform: skewX(-4deg);transform: skewX(-4deg);}37.5%,62.5% {-webkit-transform: skewX(8deg);transform: skewX(8deg);}40%,45%,50%,55%,60% {-webkit-transform: skewX(-15deg);transform: skewX(-15deg);}42.5%,47.5%,52.5%,57.5% {-webkit-transform: skewX(15deg);transform: skewX(15deg);}}@-webkit-keyframes pencilPoint {from,to {-webkit-transform: rotate(-90deg) translate(49px, -30px);transform: rotate(-90deg) translate(49px, -30px);}50% {-webkit-transform: rotate(-225deg) translate(49px, -30px);transform: rotate(-225deg) translate(49px, -30px);}}@keyframes pencilPoint {from,to {-webkit-transform: rotate(-90deg) translate(49px, -30px);transform: rotate(-90deg) translate(49px, -30px);}50% {-webkit-transform: rotate(-225deg) translate(49px, -30px);transform: rotate(-225deg) translate(49px, -30px);}}@-webkit-keyframes pencilRotate {from {-webkit-transform: translate(100px, 100px) rotate(0);transform: translate(100px, 100px) rotate(0);}to {-webkit-transform: translate(100px, 100px) rotate(720deg);transform: translate(100px, 100px) rotate(720deg);}}@keyframes pencilRotate {from {-webkit-transform: translate(100px, 100px) rotate(0);transform: translate(100px, 100px) rotate(0);}to {-webkit-transform: translate(100px, 100px) rotate(720deg);transform: translate(100px, 100px) rotate(720deg);}}@-webkit-keyframes pencilStroke {from {stroke-dashoffset: 439.82;-webkit-transform: translate(100px, 100px) rotate(-113deg);transform: translate(100px, 100px) rotate(-113deg);}50% {stroke-dashoffset: 164.93;-webkit-transform: translate(100px, 100px) rotate(-113deg);transform: translate(100px, 100px) rotate(-113deg);}75%,to {stroke-dashoffset: 439.82;-webkit-transform: translate(100px, 100px) rotate(112deg);transform: translate(100px, 100px) rotate(112deg);}}@keyframes pencilStroke {from {stroke-dashoffset: 439.82;-webkit-transform: translate(100px, 100px) rotate(-113deg);transform: translate(100px, 100px) rotate(-113deg);}50% {stroke-dashoffset: 164.93;-webkit-transform: translate(100px, 100px) rotate(-113deg);transform: translate(100px, 100px) rotate(-113deg);}75%,to {stroke-dashoffset: 439.82;-webkit-transform: translate(100px, 100px) rotate(112deg);transform: translate(100px, 100px) rotate(112deg);}}</style></head><body><svgxmlns="http://www.w3.org/2000/svg"height="200px"width="200px"viewBox="0 0 200 200"class="pencil"><defs><clipPath id="pencil-eraser"><rect height="30" width="30" ry="5" rx="5"></rect></clipPath></defs><circletransform="rotate(-113,100,100)"stroke-linecap="round"stroke-dashoffset="439.82"stroke-dasharray="439.82 439.82"stroke-width="2"stroke="currentColor"fill="none"r="70"class="pencil__stroke"></circle><g transform="translate(100,100)" class="pencil__rotate"><g fill="none"><circletransform="rotate(-90)"stroke-dashoffset="402"stroke-dasharray="402.12 402.12"stroke-width="30"stroke="hsl(223,90%,50%)"r="64"class="pencil__body1"></circle><circletransform="rotate(-90)"stroke-dashoffset="465"stroke-dasharray="464.96 464.96"stroke-width="10"stroke="hsl(223,90%,60%)"r="74"class="pencil__body2"></circle><circletransform="rotate(-90)"stroke-dashoffset="339"stroke-dasharray="339.29 339.29"stroke-width="10"stroke="hsl(223,90%,40%)"r="54"class="pencil__body3"></circle></g><g transform="rotate(-90) translate(49,0)" class="pencil__eraser"><g class="pencil__eraser-skew"><rectheight="30"width="30"ry="5"rx="5"fill="hsl(223,90%,70%)"></rect><rectclip-path="url(#pencil-eraser)"height="30"width="5"fill="hsl(223,90%,60%)"></rect><rect height="20" width="30" fill="hsl(223,10%,90%)"></rect><rect height="20" width="15" fill="hsl(223,10%,70%)"></rect><rect height="20" width="5" fill="hsl(223,10%,80%)"></rect><rectheight="2"width="30"y="6"fill="hsla(223,10%,10%,0.2)"></rect><rectheight="2"width="30"y="13"fill="hsla(223,10%,10%,0.2)"></rect></g></g><g transform="rotate(-90) translate(49,-30)" class="pencil__point"><polygon points="15 0,30 30,0 30" fill="hsl(33,90%,70%)"></polygon><polygon points="15 0,6 30,0 30" fill="hsl(33,90%,50%)"></polygon><polygon points="15 0,20 10,10 10" fill="hsl(223,10%,10%)"></polygon></g></g></svg></body> </html>📢 笑臉loading
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>笑臉loading</title><style>body {align-items: center;display: flex;justify-content: center;height: 100vh;overflow: hidden;background-color: #000;}.gegga {width: 0;}.snurra {filter: url(#gegga);}.stopp1 {stop-color: #f700a8;}.stopp2 {stop-color: #ff8000;}.halvan {animation: Snurra1 10s infinite linear;stroke-dasharray: 180 800;fill: none;stroke: url(#gradient);stroke-width: 23;stroke-linecap: round;}.strecken {animation: Snurra1 3s infinite linear;stroke-dasharray: 26 54;fill: none;stroke: url(#gradient);stroke-width: 23;stroke-linecap: round;}.skugga {filter: blur(5px);opacity: 0.3;position: absolute;transform: translate(3px, 3px);}@keyframes Snurra1 {0% {stroke-dashoffset: 0;}100% {stroke-dashoffset: -403px;}}</style> </head><body><svg class="gegga"><defs><filter id="gegga"><feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10"result="inreGegga" /><feComposite in="SourceGraphic" in2="inreGegga" operator="atop" /></filter></defs></svg><svg class="snurra" width="200" height="200" viewBox="0 0 200 200"><defs><linearGradient id="linj?rGradient"><stop class="stopp1" offset="0" /><stop class="stopp2" offset="1" /></linearGradient><linearGradient y2="160" x2="160" y1="40" x1="40" gradientUnits="userSpaceOnUse" id="gradient"xlink:href="#linj?rGradient" /></defs><path class="halvan"d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64" /><circle class="strecken" cx="100" cy="100" r="64" /></svg><svg class="skugga" width="200" height="200" viewBox="0 0 200 200"><path class="halvan"d="m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64" /><circle class="strecken" cx="100" cy="100" r="64" /></svg> </body></html>🍭 圓盤loading
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩色之外——圓盤loading</title><style>.container{width: 100%;height: 100vh;background-color:#212121;display: flex;justify-content: center;align-items: center;}.pl {filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.5));box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset;display: flex;justify-content: center;align-items: center;position: relative;letter-spacing: 0.1em;text-transform: uppercase;transform: rotateX(30deg) rotateZ(45deg);width: 14em;height: 14em;}.pl,.pl__dot {border-radius: 50%;}.pl__dot {animation-name: shadow724;box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5);top: calc(50% - 0.75em);left: calc(50% - 0.75em);width: 1.5em;height: 1.5em;}.pl__dot,.pl__dot:before,.pl__dot:after {animation-duration: 2s;animation-iteration-count: infinite;position: absolute;}.pl__dot:before,.pl__dot:after {content: "";display: block;left: 0;width: inherit;transition: background-color var(--trans-dur);}.pl__dot:before {animation-name: pushInOut1724;background-color: var(--bg);border-radius: inherit;box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset;height: inherit;z-index: 1;}.pl__dot:after {animation-name: pushInOut2724;background-color: var(--primary1);border-radius: 0.75em;box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset;bottom: 0;clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);height: 3em;transform: rotate(-45deg);transform-origin: 50% 2.25em;}.pl__dot:nth-child(1) {transform: rotate(0deg) translateX(5em) rotate(0deg);z-index: 5;}.pl__dot:nth-child(1),.pl__dot:nth-child(1):before,.pl__dot:nth-child(1):after {animation-delay: 0s;}.pl__dot:nth-child(2) {transform: rotate(-30deg) translateX(5em) rotate(30deg);z-index: 4;}.pl__dot:nth-child(2),.pl__dot:nth-child(2):before,.pl__dot:nth-child(2):after {animation-delay: -0.1666666667s;}.pl__dot:nth-child(3) {transform: rotate(-60deg) translateX(5em) rotate(60deg);z-index: 3;}.pl__dot:nth-child(3),.pl__dot:nth-child(3):before,.pl__dot:nth-child(3):after {animation-delay: -0.3333333333s;}.pl__dot:nth-child(4) {transform: rotate(-90deg) translateX(5em) rotate(90deg);z-index: 2;}.pl__dot:nth-child(4),.pl__dot:nth-child(4):before,.pl__dot:nth-child(4):after {animation-delay: -0.5s;}.pl__dot:nth-child(5) {transform: rotate(-120deg) translateX(5em) rotate(120deg);z-index: 1;}.pl__dot:nth-child(5),.pl__dot:nth-child(5):before,.pl__dot:nth-child(5):after {animation-delay: -0.6666666667s;}.pl__dot:nth-child(6) {transform: rotate(-150deg) translateX(5em) rotate(150deg);z-index: 1;}.pl__dot:nth-child(6),.pl__dot:nth-child(6):before,.pl__dot:nth-child(6):after {animation-delay: -0.8333333333s;}.pl__dot:nth-child(7) {transform: rotate(-180deg) translateX(5em) rotate(180deg);z-index: 2;}.pl__dot:nth-child(7),.pl__dot:nth-child(7):before,.pl__dot:nth-child(7):after {animation-delay: -1s;}.pl__dot:nth-child(8) {transform: rotate(-210deg) translateX(5em) rotate(210deg);z-index: 3;}.pl__dot:nth-child(8),.pl__dot:nth-child(8):before,.pl__dot:nth-child(8):after {animation-delay: -1.1666666667s;}.pl__dot:nth-child(9) {transform: rotate(-240deg) translateX(5em) rotate(240deg);z-index: 4;}.pl__dot:nth-child(9),.pl__dot:nth-child(9):before,.pl__dot:nth-child(9):after {animation-delay: -1.3333333333s;}.pl__dot:nth-child(10) {transform: rotate(-270deg) translateX(5em) rotate(270deg);z-index: 5;}.pl__dot:nth-child(10),.pl__dot:nth-child(10):before,.pl__dot:nth-child(10):after {animation-delay: -1.5s;}.pl__dot:nth-child(11) {transform: rotate(-300deg) translateX(5em) rotate(300deg);z-index: 6;}.pl__dot:nth-child(11),.pl__dot:nth-child(11):before,.pl__dot:nth-child(11):after {animation-delay: -1.6666666667s;}.pl__dot:nth-child(12) {transform: rotate(-330deg) translateX(5em) rotate(330deg);z-index: 6;}.pl__dot:nth-child(12),.pl__dot:nth-child(12):before,.pl__dot:nth-child(12):after {animation-delay: -1.8333333333s;}.pl__text {color: #fff;font-size: 0.75em;max-width: 5rem;position: relative;text-shadow: 0 0 0.1em var(--fg-t);transform: rotateZ(-45deg);}/* Animations */@keyframes shadow724 {from {animation-timing-function: ease-in;box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);}25% {animation-timing-function: ease-out;box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5);}50%,to {box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);}}@keyframes pushInOut1724 {from {animation-timing-function: ease-in;background-color: var(--bg);transform: translate(0, 0);}25% {animation-timing-function: ease-out;background-color: var(--primary2);transform: translate(-71%, -71%);}50%,to {background-color: var(--bg);transform: translate(0, 0);}}@keyframes pushInOut2724 {from {animation-timing-function: ease-in;background-color: var(--bg);clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);}25% {animation-timing-function: ease-out;background-color: var(--primary1);clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);}50%,to {background-color: var(--bg);clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);}}</style> </head><body><div class="container"><div class="pl"><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__dot"></div><div class="pl__text">Loading…</div></div></div> </body></html>? 謝謝觀看
css動畫 —— 把你喜歡css動畫嵌入到瀏覽器中_彩色之外的博客-CSDN博客常用酷炫動畫999+合集，代碼直接復制可用，總用你想找的，快來抱走吧，三連，停！聽鵝說，下次一定、下次一定……https://blog.csdn.net/m0_57904695/article/details/127846345?ops_request_misc=&request_id=6b6f8938b8ae4f7486879ca4a2fd3393&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~koosearch~default-3-127846345-null-null.268%5Ev1%5Econtrol&utm_term=css&spm=1018.2226.3001.4450
?_______________________________??期待再見??_______________________________?
?
總結(jié)
以上是生活随笔為你收集整理的打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5取消纵横比,CSS技巧：网格项
- 下一篇： 讨论孩子教育问题