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 可交互视频 此视频是可 ...
随机推荐
- excel技巧--一键求和
类似于上图的表格,我们要得到右侧和下侧栏的汇总结果,通常可以用sum公式加下拉方式,但是还有一种方法更快速,那就是使用 ALT + “+=”组合键就能一下子得到所有汇总结果.(+=键,就是一个键,该键 ...
- Tomcat默认工具manager管理页面访问配置
Tomcat的默认工具manager配置,在很多的生产环境中由于基本用不到.或者是不太需要使用Tomcat默认的manager管理页面时一般都会把Tomcat的默认webapp下的内容给删除了,但是如 ...
- 【Https】Spring RestTemplete支持Https安全请求
实现步骤 Step1: 自定义ClientHttpRequestFactory package com.example.demo.https; import org.springframework.h ...
- [ZZ]Appium 文档翻译
http://testerhome.com/topics/150 Appium 是一个开源的,适用于原生或混合移动应用应用( hybrid mobile apps )的自动化测试平台. Appium ...
- hadoop-n.x.y.tar.gz、hadoop-n.x.y.tar.gz.asc 、hadoop-n.x.y.tar.gz.md5 、hadoop-n.x.y.tar.gz.mds分别是什么?
不多说,直接上干货! 我这里,以hadoop-2.6.0为例. hadoop-n.x.y.tar.gz.mds,此mds文件是为了检验在下载和移动文件过程中文件的完整性. 通过验证文件的md5值去检验 ...
- PAT 乙级 1063 计算谱半径(20) C++版
1063. 计算谱半径(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 在数学中,矩阵的“谱半径”是指其特 ...
- nginx配置location总结及rewrite规则写法 (若配置reload或restart不生效就stop start)
location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的 ...
- 0002 - Spring MVC 拦截器源码简析:拦截器加载与执行
1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日 ...
- 几个常用的SQL 时间函数
--当月第一天declare @startFirstDate datetimeset @startFirstDate=dateadd(dd,datediff(dd,0,getdate()),-day( ...
- visual studio 版本管理从tfs迁移到svn
1.首先要解除解决方案的tfs绑定 清除(删除)项目下的所有版本控制文件,这些文件有:*.vssscc,*.vspscc 删除这些版本控制文件比较简单,搜索这些后缀的文件,删除即可. 修改项目的解决方 ...