纯css3可爱的Loading加载动画特效

这个是一款可爱的loading动画，觉得好看的小伙伴一定要试试哦！

html代码

<div class="loadster"><div class="loadster__body"><div class="body__gum"></div></div><div class="loadster__mask"></div><div class="loadster__head"><div class="head__face"></div><div class="head__ear"></div><div class="head__eye"></div><div class="head__horn"><div class="horn__circle"></div></div><div class="head__smile"></div><div class="head__hand"></div></div><div class="loadster__bottom"><div class="bottom__foot"></div></div>
</div>

css代码

<style>body {background-color: #EEDAD1;font-size: 16px;}.loadster {position: relative;margin: 10em auto;width: 308px;height: 308px;}.loadster__body {position: absolute;width: 300px;height: 300px;border: 4px solid #373D46;border-radius: 50%;background-color: #89b793;}.loadster__body::before {content: "";position: absolute;width: 200px;height: 200px;top: 46px;left: 46px;border: 4px solid #373D46;border-radius: 50%;background-color: #EEDAD1;}.loadster__body::after {content: "";position: absolute;top: 10.6153846154px;left: 10.6153846154px;width: 230.7692307692px;height: 230.7692307692px;border: 24px solid #99CCA4;border-radius: 50%;}.loadster__mask {position: absolute;width: 50%;height: 50%;background-color: #EEDAD1;-webkit-transform-origin: right bottom;transform-origin: right bottom;}.loadster__mask::before {content: "";position: absolute;left: 100%;width: 100%;height: 100%;background-color: #EEDAD1;-webkit-transform-origin: left bottom;transform-origin: left bottom;}.loadster__mask::after {content: "";position: absolute;top: 100%;width: 100%;height: 100%;background-color: #EEDAD1;-webkit-transform-origin: right top;transform-origin: right top;}.loadster__head {position: absolute;top: 0;right: 0;width: 50%;height: 50%;background-color: #EEDAD1;-webkit-transform-origin: left bottom;transform-origin: left bottom;}.loadster__bottom {position: absolute;left: 0;bottom: 0;width: 50%;height: 50%;background-color: #EEDAD1;-webkit-transform-origin: right top;transform-origin: right top;}.head__face {position: absolute;bottom: 0;right: 0;width: 46px;height: 50px;background-color: #89b793;border: 4px solid #373D46;border-bottom: 0;border-radius: 50% 50% 0 0;}.head__ear {position: absolute;top: 85px;right: -4.6666666667px;width: 15px;height: 20px;background-color: #89b793;border: 4px solid #373D46;border-radius: 50% 0;border-top: 0;border-right: 0;}.head__ear::before {content: "";position: absolute;top: 0;right: 44.2105263158px;width: 15px;height: 20px;background-color: #89b793;border: 4px solid #373D46;border-radius: 0 50%;border-top: 0;border-left: 0;}.head__horn {position: absolute;top: 81.0810810811px;right: 17px;width: 0;height: 13.6363636364px;border: 4px solid #373D46;border-left: 0;}.head__horn::before {content: "";position: absolute;top: -4px;right: 11.5px;width: 0;height: 13.6363636364px;border: 4px solid #373D46;border-right: 0;}.horn__circle {position: absolute;top: -13.6363636364px;right: -8.5714285714px;width: 4.2857142857px;height: 4.2857142857px;background-color: #89b793;border: 4px solid #373D46;border-radius: 50%;}.horn__circle::before {content: "";position: absolute;top: -4px;right: 11.2380952381px;width: 4.2857142857px;height: 4.2857142857px;background-color: #89b793;border: 4px solid #373D46;border-radius: 50%;}.head__eye {position: absolute;top: 107.1428571429px;right: 11px;width: 4.2857142857px;height: 4.2857142857px;background-color: #FFFFCC;border: 4px solid #373D46;border-radius: 50%;}.head__eye::before {content: "";position: absolute;top: -4px;right: 16px;width: 4.2857142857px;height: 4.2857142857px;background-color: #FFFFCC;border: 4px solid #373D46;border-radius: 50%;}.head__smile {content: "";position: absolute;top: 120px;right: -1px;width: 50px;height: 6px;border: 4px solid #373D46;border-top: 0;border-radius: 50%;}.head__hand {position: absolute;width: 60px;height: 50px;top: 136.3636363636px;right: -8px;border: 4px solid;border-color: transparent #373D46 transparent transparent;border-radius: 0 0 50% 0;-webkit-transform: rotate(10deg);transform: rotate(10deg);}.head__hand::before {content: "";position: absolute;width: 60px;height: 50px;top: 0;right: 46px;border: 4px solid;border-color: transparent #373D46 transparent transparent;border-radius: 0 0 50% 0;}.bottom__foot {position: absolute;bottom: 0;right: 0;width: 37.5px;height: 12px;background-color: #89b793;border: 4px solid #373D46;border-right: 0;border-radius: 100% 0 0 0;}.bottom__foot::before {content: "";position: absolute;bottom: 30px;right: 0;width: 37.5px;height: 12px;background-color: #89b793;border: 4px solid #373D46;border-right: 0;border-radius: 0 0 0 100%;}.bottom__foot::after {content: "";position: absolute;bottom: 12px;right: 0;width: 0;height: 10px;border: 4px solid #373D46;border-left: 0;}.loadster__mask {-webkit-transform: rotate(40deg);transform: rotate(40deg);-webkit-animation: mask-circle 2s 1s infinite;animation: mask-circle 2s 1s infinite;}.loadster__mask::before {-webkit-animation: mask-circle-right 2s 1s infinite;animation: mask-circle-right 2s 1s infinite;}.loadster__mask::after {-webkit-animation: mask-circle-left 2s 1s infinite;animation: mask-circle-left 2s 1s infinite;}.loadster__head {-webkit-transform: rotate(40deg);transform: rotate(40deg);-webkit-animation: head-circle 2s 1s infinite;animation: head-circle 2s 1s infinite;-webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.1, 1);animation-timing-function: cubic-bezier(0.2, 0, 0.1, 1);}.loadster__bottom {-webkit-animation: bottom-circle 2s 1s infinite;animation: bottom-circle 2s 1s infinite;-webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.42, 1);animation-timing-function: cubic-bezier(0.2, 0, 0.42, 1);}@-webkit-keyframes mask-circle {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(-720deg);transform: rotate(-720deg);}}@keyframes mask-circle {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(-720deg);transform: rotate(-720deg);}}@-webkit-keyframes mask-circle-right {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}50% {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}}@keyframes mask-circle-right {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}50% {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}}@-webkit-keyframes mask-circle-left {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}}@keyframes mask-circle-left {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}}@-webkit-keyframes head-circle {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(-720deg);transform: rotate(-720deg);}}@keyframes head-circle {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(-720deg);transform: rotate(-720deg);}}@-webkit-keyframes bottom-circle {0% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}100% {-webkit-transform: rotate(-730deg);transform: rotate(-730deg);}}@keyframes bottom-circle {0% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}100% {-webkit-transform: rotate(-730deg);transform: rotate(-730deg);}}</style>

纯css3可爱的Loading加载动画特效相关推荐

html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
Css3+jquery 实现loading加载动画
一.Css3+jquery 实现loading加载动画这是一个 Loading 加载demo 不需要图片纯html和css 实现样式以下是html css以及js的代码需要自取 <!DO ...
html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示下载资源: 28 次下载资源下载积分: 20 积分 js代码 var ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
150款+炫酷的CSS3 loading加载动画，总有一款适合你
是不是非常有趣? 最后,附上150款+CSS3 loading加载动画的下载地址: 下载地址: https://pan.baidu.com/s/1upupoPpI0KDrK1lk_m4MmA 提取码: ...
超酷的 CSS3 loading 预加载动画特效
给大家介绍一款超酷CSS3 loading预加载动画特效. 该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成. HTML结构 4种loading预加载动画 ...
【web素材】09—150款+炫酷的CSS3 loading加载动画，总有一款适合你
整理 | 杨小爱我不知道,作为程序员的你,是否有这样的"职业病",就是在浏览网页时,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的 ...

纯css3可爱的Loading加载动画特效

纯css3可爱的Loading加载动画特效相关推荐

最新文章

热门文章