CSS - 滤镜的妙用 - 制作炫彩圆环(外加动画)
效果图如下：
话不多说，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫彩流光圆环</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-color: #505050;
display: grid;
place-items:center;
}
.box{
width: 400px;
height: 400px;
background: url(./pig.jpg);
border-radius: 50%;
display: grid;
place-items:center;
position: relative;
color:#fff;
}
.box::before{
content: "";
width: 400px;
height: 400px;
background:linear-gradient(0deg,#3498db,#8e44ad,#2ecc71,#e74c3c);
border-radius: 50%;
position: absolute;
filter:blur(10px);
animation: rotate 10s linear infinite 0s;
}
.box>div{
width: 300px;
height: 300px;
background-color: #505050;
border-radius: 50%;
z-index: 2;
display: grid;
place-items: center;
}
@keyframes rotate {
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
CSS - 滤镜的妙用 - 制作炫彩圆环(外加动画)的更多相关文章
- Tableau学习Step6一如何制作炫彩地图
Tableau学习Step6一如何制作炫彩地图 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一.统计地图概述 1.1 统计地图的基本概念 统计地图的本质:数据的正确对应 将数据信息和地理 ...
- [Micropython]发光二极管制作炫彩跑马灯
先甩锅 做完后才发现最后一个灯坏了,就坏了一个灯也不好意思去找淘宝店家,大家视频凑合着看把.不过并不影响实验效果.因为这个发光二极管白天不是很明显 晚上炫彩效果就能出来了.本次实验用的是8个灯珠 ...
- 炫彩流光按钮 CSS + HTML
炫彩流光按钮 写在前面 你若要喜爱你自己的价值,你就得给世界创造价值.--歌德 效果图 三个绝美的样例 HTML代码 <div class="box"> <but ...
- 巧用 CSS 实现炫彩三角边框动画
最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常 ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- js 生成随机炫彩背景
在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...
- 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
- web报表设计器在线制作炫酷图表
相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...
- 让less编译通过css滤镜
写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- 数字孪生和GIS融合：激发数字孪生技术的进步潜力
数字孪生技术和地理信息系统(GIS)的融合,为数字孪生领域带来了巨大的进步和创新.这种强大的联合不仅扩展了数字孪生技术的应用领域,还提供了更全面.更精确的数据支持,从而推动了数字孪生技术的发展和应用. ...
- pytest框架中conftest.py的作用
conftest.py 是 pytest 框架中的一个特殊文件.它允许你为测试提供自定义的配置和钩子函数.以下是 conftest.py 的主要作用: 提供全局配置:你可以在 conftest.py ...
- Spring Boot 导出EXCEL模板以及导入EXCEL数据(阿里Easy Excel实战)
Spring Boot 导出EXCEL模板以及导入EXCEL数据(阿里Easy Excel实战) 导入pom依赖 编写导出模板 @ApiOperation("导出xxx模板") @ ...
- 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 14. 使用GameplayTag实现防守反击技能
斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本篇文章对应Lecture 17 - GameplayTags, 70节.本文将会结合前几节课使用的能力系统和G ...
- 2023-08-26：请用go语言编写。开心一下的智力题： 有一个村庄，一共250人， 每一个村民要么一定说谎，要么只说真话， 村里有A、B、C、D四个球队，且每个村民只会喜欢其中的一支球队， 但是说
2023-08-26:请用go语言编写.开心一下的智力题: 有一个村庄,一共250人, 每一个村民要么一定说谎,要么只说真话, 村里有A.B.C.D四个球队,且每个村民只会喜欢其中的一支球队, 但是说 ...
- mac 编译php 7.2+扩展编译 的坑史（不是swoole的坑）,php的一个坑，这个坑还没填满，问题根源还没有找到 !
目前网上找到的文章全是php 7.1,但是brew己经没有7.1了,最新是7.2,这让我怀疑是不是我的版本问题,导致swoole编译时总是编译不过去.后来发现任何扩展都编不过去,提示: Configu ...
- PC端和移动端应用的开发差异
PC端和移动端应用的开发差异主要体现在用户界面(UI)和用户体验(UX)设计.交互设计.性能优化.适配策略等方面.
- Java 在PDF中添加骑缝章
骑缝章是用于往来业务合同,以确保合同真实.有效的印章加盖方法,是一种防范风险的重要方式.在Java程序中,可以通过使用工具来辅助加盖这种骑缝章. 工具:Free Spire.PDF for Java ...
- 【小白学YOLO】一文带你学YOLOv1 Testing
摘要:本文将为初学者带详细分析如何进行YOLOv1 Testing的内容. YOLOv1 Testing 进入testing阶段,我们已经得到98个bounding box和confidence还有C ...
- 加快脑动脉瘤检测，AI来了
摘要:华为云EI创新孵化Lab联合华中科技大学电信学院.华中科技大学同济医学院附属协和医院放射科在放射学领域的国际顶级期刊Radiology(<放射学>)上共同发表了最新研究成果. 日前, ...