前端入门（加载特效，css）

哈哈效果你们就这么看看吧，实在不会截取 gif ，将就将就，或者复制粘贴代码去看看吧（最好还是去看看效果）

这个效果简单说就是有一个带有一半黑边框的圆用 ease-out （最后以慢速度结尾）进行旋转，还有一个半白边框的圆用 ease-in-out （以慢速度开头与结尾）进行旋转（用来覆盖黑边框），完成该效果，最终效果就是，黑边框先快速“摆脱”白边框（加载条变长），然后最后再变慢，最后在一个位置结尾（加载条变短）

这个效果是由 3 个部分完成
#loading_item 用一个比较慢的速度进行旋转，于是每次旋转的起始位置不同（当然也可以设置让它别转了，这样每次起始位置就相同）
#loading_item::before 充当半个黑边框的圆
#loading_item::after 充当半个白边框的圆
（注意哈，这个before和after不能交换位置，否则白边框到了黑边框下面，就什么作用都没了）

还有一些小细节：

比如这个白边框一定要比黑边框粗，并且一定要调节位置，把这个黑边框给覆盖好，不然效果很丑很丑
这个虽然是设置一半的边框颜色，但另一半的边框也要设置宽度，不然边框会变得一边宽一边细，那真的视觉灾难

（ yysy ，还是蛮简单的，推荐试一下）

<!DOCTYPE html>
<html><head><style>*{padding: 0px;margin: 0px;}#loading_item{position: absolute;left: 50vw;top: 50vh;width: 200px;height: 200px;border-radius: 50%;transform: translate(-100px,-100px);background-color: white;animation-name: rotating_1;animation-duration: 10s;animation-iteration-count: infinite;animation-timing-function: linear;}#loading_item::after{content: "";position: absolute;left: -2px;top: -2px;width: 195px;height: 195px;border-radius: 50%;border-style: solid;border-width: 7px;border-left-color: white;border-bottom-color: white;border-right-color: transparent;border-top-color: transparent;background-color: transparent;animation-name: rotating_2;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#loading_item::before{content: "";position: absolute;width: 200px;height: 200px;border-radius: 50%;border-style: solid;border-width: 3px;border-left-color: black;border-bottom-color: black;border-right-color: transparent;border-top-color: transparent;background-color: transparent;animation-name: rotating_2;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: ease-out;}@keyframes rotating_1 {to {transform: translate(-100px,-100px) rotate(360deg)}}@keyframes rotating_2 {to {transform: rotate(360deg)}}</style></head><body><div id = 'loading_item'></div></body>
</html>

前端入门（加载特效，css）相关推荐

82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效视频地址一:https://www.ixigua.c ...
142.CSS 海盗船加载特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
前端页面加载缓慢的原因和性能优化问题
前端页面加载缓慢的原因和性能优化问题一.页面加载缓慢的原因二.前端性能优化方法一.页面加载缓慢的原因当我们打开一个网页,页面加载比较缓慢时,可能原因有以下几点: (1)过多的http请求 (2 ...
web前端网页加载性能优化大全
web前端性能优化 - - 如何提高网页加载速度文章目录 web前端性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求浏览器 ...
Webpack前端资源加载/打包工具
文章目录一.Webpack 1.什么是Webpack 2.Webpack安装 2.1全局安装 2.2安装后查看版本号 3.创建项目 3.1初始化项目 3.2创建src文件夹 3.3 src下创建co ...
ios html加载css样式,iOS加载HTML, CSS代码
NSString *strHTML = @" // NSString *strHTML = model.goods_datails; NSMutableString *targerStr = ...
HTML5+CSS3小实例：炫彩爱心加载特效
HTML5+CSS3实现炫彩爱心加载特效,9根普通的线条,通过变换长度,即可打造一个动感炫彩的心形loading加载动画,变换过程伴随了模糊,更让这个loading动画更细腻.更富律动. 效果: 源码 ...
前端图片加载优化的各种技巧
目前的前端图片加载优化技术有很多,像懒加载/预加载,img上的srcset属性以及picture标签,新的图片编码格式以及Client Hints等. Client Hints 顾名思义,client ...
141.如何使用图标做一个加载特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. 源码 index.html <!DOCTYPE ...

前端入门（加载特效，css）

前端入门（加载特效，css）相关推荐

最新文章

热门文章