css3 等待加载动画

## 加载动画这是一个类似于google加载图标的css3动画实现 ## 效果演示

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@keyframes color {100%, 0% {stroke: #9c27b0;}50% {stroke: #ff9800;}100% {stroke: #9c27b0;}}@keyframes dash {0% {stroke-dasharray: 1, 200;stroke-dashoffset: 0;}50% {stroke-dasharray: 89, 200;stroke-dashoffset: -35px;}100% {stroke-dasharray: 89, 200;stroke-dashoffset: -124px;}}.loader:before {content: '';display: block;padding-top: 100%;}.loader {margin: 0 auto;width: 60px;position: absolute;display: block;left: 0;right: 0;z-index: 1;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);text-align: center;top: 50%;}.circular {-webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;height: 100%;-webkit-transform-origin: center center;transform-origin: center center;width: 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}.path {stroke-dasharray: 1, 200;stroke-dashoffset: 0;-webkit-animation: dash 1.5s ease-in-out infinite, color 2s ease-in-out infinite;animation: dash 1.5s ease-in-out infinite, color 2s ease-in-out infinite;stroke-linecap: round;}</style>
</head>
<body>
<div class="loader"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
</div></body>
</html>

我的个人博客地址：https://www.junsom.com/

css3 等待加载动画相关推荐

【web素材】09—150款+炫酷的CSS3 loading加载动画，总有一款适合你
整理 | 杨小爱我不知道,作为程序员的你,是否有这样的"职业病",就是在浏览网页时,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的 ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
150款+炫酷的CSS3 loading加载动画，总有一款适合你
是不是非常有趣? 最后,附上150款+CSS3 loading加载动画的下载地址: 下载地址: https://pan.baidu.com/s/1upupoPpI0KDrK1lk_m4MmA 提取码: ...
html如何添加加载动画效果,CSS3创建加载动画效果
加载动画在网页设计中是很常见的.用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站. 创建加载效果所需的 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html旋转的等到的圆圈,CSS3 Loading 旋转圆盘加载动画
前面介绍过多个css3 loading加载动画的实例,今天继续介绍另一个实例,这个实例用css3实现旋转圆盘的预加载动画. css代码#preloader{ position:relative; wi ...
加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...
html5 黑色圆圈,html5 css3圆形百分比加载动画特效
特效描述:html5 css3 圆形百分比加载动画特效.html5 css3 loading加载动画,圆形百分比进度条加载动画,加载完成显示健康度检测得分情况. 代码结构 1. 引入JS 2. HT ...

css3 等待加载动画

源码

css3 等待加载动画相关推荐

最新文章

热门文章