8.纯 CSS 创作一个充电 loader 特效
原文地址:https://segmentfault.com/a/1190000014669547
右边多出来的是 :after 的border
HTML代码:
<div class="battery"></div>
CSS代码:
html, body {
margin:;
padding:;
height: 100%;
display:flex;
justify-content: center;
align-items: center;
/*background: linear-gradient(to bottom, teal, aqua); */
}
.battery{
width: 6em;
height: 3em;
color: midnightblue;
border: 0.5em solid currentColor;
border-radius: 0.2em;
font-size: 2em;
position: relative;
/* 充电颜色 */
background-image: linear-gradient(to right, green, green);
background-repeat: no-repeat;
background-size: 30% 80%;
/* 给内部充电图像定位 */
background-position: top 0.3em left 0.3em;
animation: charge 5s steps(8) infinite;
}
.battery::after{
position: absolute;
content: '';
width: 0.5em;
height: 2em;
background-color: currentColor;
top: 0.5em;
right: -1em;
border-radius: 0 0.2em 0.2em 0;
}
@keyframes charge {
from {
background-size: 10% 80%;
}
to {
background-size: 95% 80%;
}
}
8.纯 CSS 创作一个充电 loader 特效的更多相关文章
- 如何用纯 CSS 创作一个充电 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视 ...
- 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视频是可以交 ...
- 63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader
效果地址:https://scrimba.com/c/cqKv4VCR HTML code: <div class="loader"> <span>Load ...
- 63.(原65)纯 CSS 创作一个摇摇晃晃的 loader
原文地址:https://segmentfault.com/a/1190000015424389 修改后地址:https://scrimba.com/c/cqKv4VCR HTML code: < ...
- 45.纯 CSS 创作一个菱形 loader 动画
原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...
- 如何用纯 CSS 创作一个菱形 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可 ...
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
随机推荐
- OwnCloud 开源网盘
https://www.getnas.com/freenas-owncloud/ FreeNAS 插件:OwnCloud 开源网盘 ownCloud 分为服务器端和客户端两个部分,服务器端可以在 Fr ...
- 数据仓库专题(21):Kimball总线矩阵说明-官方版
一.前言 Over the years, I have found that a matrix depiction of the data warehouse plan is a pretty goo ...
- Temporary ASP.NET Files\root 空间增长太快
估计是虚拟目录有新的文件,造成项目重新被编译要么把新文件放到另一个目录,要么使用web application而不是web project
- [蓝桥杯]ALGO-101.算法训练_图形显示
问题描述 编写一个程序,首先输入一个整数,例如5,然后在屏幕上显示如下的图形(5表示行数): * * * * * * * * * * * * * * * 题目描述 代码如下: #include < ...
- centos 7 免密登录
本文转载自:https://www.cnblogs.com/hobinly/p/6039844.html 环境示例 Centos7 192.168.1.101 master Centos7 192. ...
- 微信小程序客服消息使用
客服消息使用 为丰富小程序的服务能力,提高服务质量,微信为小程序提供客服消息能力,以便小程序用户可以方便快捷地与小程序服务提供方进行沟通. xiaokefu.com.cn 功能介绍 用户可使用小程序客 ...
- 方法 - ShellCode测试
机器码->汇编 1 // ShellCode测试.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windo ...
- go语言学习--map类型的切片
今天在项目中遇到了一个切片的map,记录下map切片的使用 package main import "fmt" func main() { // Version A: items ...
- Postman模拟ajax请求 并模拟登陆
2.设置header头 <span style="font-size:16px;">设置代理.cookie.X-Requested-With 注意 :X-Reque ...
- CVE-2017-12149漏洞利用
CVE-2017-12149 JBOOS AS 6.X 反序列化漏洞利用 这次分析一下 CVE-2017-12149 ,漏洞已经爆出有几天了,今天就把这个漏洞看一下. ...