51.纯 CSS 创作一个雷达扫描动画
原文地址:https://segmentfault.com/a/1190000015283286
感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , 分开。
文档地址:http://www.runoob.com/cssref/func-linear-gradient.html
HTML code:
<div class="radar"></div>
CSS code:
html, body {
margin:;
padding:;
}
/* 元素页面居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* 用径向渐变创建图像 http://www.runoob.com/cssref/func-radial-gradient.html */
background: radial-gradient(circle at center,silver,black);
}
/* 设置容器的尺寸,背景颜色为黑色 */
.radar{
position: relative;
font-size: 32px;
width: calc(8em + 1.5em);
height: calc(8em + 1.5em);
border-radius: 50%;
/* border: 1px solid blue; */
background:
/* 总体来说,linear-gradient可以利用好多次,并不覆盖! */
/* 画出十字坐标线
这里居然可以用两个linear-gradient来定义十字架
linear-gradient地址:http://www.runoob.com/cssref/func-linear-gradient.html
*/
linear-gradient(
90deg,
transparent 49.75%,
darkgreen 49.75%,
darkgreen 50.25%,
transparent 50.25%),
linear-gradient(
transparent 49.75%,
darkgreen 49.75%,
darkgreen 50.25%,
transparent 50.25%),
/* 在背景上画出4个同心圆
类似 radial-gradient(),用重复的径向渐变创建图像
以下面设置的圆依次增加初始半径增加外圆,还设置了圆边框
*/
repeating-radial-gradient(
transparent 0,
transparent 0.95em,
darkgreen 0.95em,
darkgreen 1em
),
linear-gradient(black,black);
}
/* 用伪元素画出总面积四分之一的正方形 */
.radar::before{
content: '';
width: calc(8em / 2);
height: calc(8em / 2);
/* border: 1px solid red; */
border-radius: 100% 0 0 0;
position: absolute;
top: calc(1.5em / 2);
left: calc(1.5em / 2);
/* 把正方形变为有拖尾效果的扇形 */
background: linear-gradient(
/* 设置角度 */
45deg,
/* 设置颜色 前一半透明,后一半无到绿色 */
rgba(0, 0, 0, 0) 50%,
rgba(0, 192, 0, 1) 100%
);
animation: scanning 5s linear infinite;
/* 设置不动中心点 */
transform-origin: 100% 100%;
}
@keyframes scanning {
to {
transform: rotate(360deg);
}
}
51.纯 CSS 创作一个雷达扫描动画的更多相关文章
- 如何用纯 CSS 创作一个雷达扫描动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdbGvr 可交互视频 ...
- 42.纯 CSS 创作一个均衡器 loader 动画
原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...
- 如何用纯 CSS 创作一个菱形 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 45.纯 CSS 创作一个菱形 loader 动画
原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...
- 如何用纯 CSS 创作一个变色旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...
- 如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...
- 如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- Linux 如何测试 IO 性能(磁盘读写速度)
这几天做MySQL性能测试,偌大一个公司,找几台性能测试机器都很纠结,终于协调到两台,IO的性能如何还不知道.数据库属于IO密集型的应用,所以还是先评估下Server的IO性能,看看是否能和线上的机器 ...
- oracle--合并行数据(拼接字符串),获取查询数据的前3条数据...
--标准函数Lpad 可以实现左补零,但是如果多于需要长度,则会截断字符串 SELECT LPAD ('1' , 3 , '0') FROM DUAL -- return 001 情况一:需要补零. ...
- Windows Remote Shell(WinRM)使用介绍
最近,为了实验我们安装了台Windows Server Core的服务器,没有图形界面的系统总会给人一种很完全的感觉,我们本着安全到底的想法,使用了Windows Remote Shell 的管理方式 ...
- C++11--正则表达式<regex>
/* 正则表达式:一个指定的模式用来对文本中的字符串提供精确且灵活的匹配 */ #include <regex> using namespace std; int main() { str ...
- Java连接S3并上传Redis
package com.shinho.bigdatalake.redis; import com.amazonaws.regions.Region; import com.amazonaws.regi ...
- 解决socket交互的10048和10055错误的总结
问题:60多路轮训的情况下,5分钟之后,现场报链接不上子进程的错误.绝大部分为海康设备 分析: 子进程的日志中 存在输入海康的解码库的错误,在子进程的对外dll中加日志发现,socket链接的时候 ...
- 记一次包含iframe的需要滚动的元素不能滚动到底部的问题
一个包含上头部.下部模块(包含左右两边模块:侧边栏.内容区域)的页面 前提条件,内容区域: 1.元素高度需要自适应屏幕高度 2.里面内容足够长时,可以滚动 3.包含了一个iframe嵌入的内容很长的页 ...
- python-selenium并发执行测试用例(方法一 各模块每一条并发执行)
总执行代码: # coding=utf-8import unittest,os,timeimport HTMLTestRunnerimport threadingimport syssys.path. ...
- [UE4]UniformGirdPanel
- c#day05
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ccc ...