html5圆圈动画效果,CSS3实现光感圆圈动画效果

news/2025/5/21 23:14:52

CSS3实现光感圆圈动画效果全部代码

d0f6245c485e5e59de87e8aa886864f4.pnghtml>    

CSS3实现光感圆圈动画效果

body {

background: #111;

}

.halo {

transition: .4s all;

}

.halo.input {

width: 100px;

height: 100px;

}

.halo.input:before {

width: 100px;

height: 100px;

}

.ring-1 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-1:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-2 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate 2s infinite alternate;

}

.ring-2:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-3 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate-2 4s infinite alternate;

}

.ring-3:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-4 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate 7s infinite alternate-reverse;

}

.ring-4:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-5 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(255, 0, 255, 0.3);

box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate-2 5s infinite alternate;

}

.ring-5:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(255, 0, 255, 0.3);

box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-6 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate 2s infinite alternate-reverse;

}

.ring-6:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-7 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate-2 5s infinite alternate;

}

.ring-7:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(0, 255, 255, 0.3);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

.ring-8 {

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

border: 1px solid rgba(255, 0, 255, 0.3);

box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);

border-radius: 100%;

width: 200px;

height: 200px;

-webkit-transform: scale(1);

-webkit-animation: rotate 10s infinite alternate-reverse;

}

.ring-8:before {

content: "";

position: absolute;

width: 200px;

height: 200px;

border-radius: 100%;

border: 1px solid rgba(255, 0, 255, 0.3);

box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);

-webkit-animation: rotate 3.5s infinite alternate-reverse;

}

@-webkit-keyframes rotate {

0% {

-webkit-transform: rotate(360deg) scaleX(1);

}

100% {

-webkit-transform: rotate(0deg) scaleX(1.1);

}

}

@-webkit-keyframes rotate-2 {

0% {

-webkit-transform: rotate(360deg) scaleX(0.9);

}

100% {

-webkit-transform: rotate(90deg) scaleX(1.1);

}

}

文章来源:https://blog.csdn.net/weixin_35890852/article/details/117799467
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://dhexx.cn/news/show-19130.html

相关文章

微软BI 之SSIS 系列 - 变量查询语句引起列输出顺序不一致的解决方法

微软BI 之SSIS 系列 - 变量查询语句引起列输出顺序不一致的解决方法

开篇介绍 这个问题来自于 天善BI社区，看了一下比较有意思，因为我自己认为在 SSIS中处理各种类型文件的经验还比较丰富(有一年的时间几乎所有ETL都跟文件相关)，但是这个问题确实之前没有特别考虑过。研究了一下，找到了解决的方法&a…
阅读更多...
python 如何画表格_如何使用vim和markdown高效率记笔记

python 如何画表格_如何使用vim和markdown高效率记笔记

之前我一直使用的是vscode和typora作为markdown编辑器，这两个都挺好用的，都有linux版本，typora可能是我见过的最优雅的编辑器了不过直到我遇见了vim，一款被誉为编辑器之神的软件，才明白，颜值啥的都是浮云&a…
阅读更多...
第十八章 38总结

第十八章 38总结

// 38总结 #include <iostream> using namespace std; class String { public:String(); //默认的构造函数~String(){ delete []str; len0; cout<<"析构函数执行"<<endl; }String(const char*const ch); //构造带值的stringint getlen()const { re…
阅读更多...
hive 启动方式

hive 启动方式

1 直接运行hive 2 beeline方式启动 hive --service hiveserver2 beeline -u jdbc:hive2://127.0.0.1:10000 3 通过spark启动&#xff0c;前提需要配置好和hive集成 进入spark安装的bin目录&#xff0c;运行 spark-sql
阅读更多...
android 判断屏幕尽头,Android服务：Activity生命尽头会发生什么？

android 判断屏幕尽头,Android服务：Activity生命尽头会发生什么？

What will happen to S when A is destroyed?如果A是绑定到S的唯一活动,并且您没有通过startService(Intent)启动服务,则S将被销毁.这是因为在最后绑定的活动从服务取消绑定之前,服务将一直存在.文档记录为here.How can I recreate another Activity that binds to S?如果绑定…
阅读更多...
微信公众平台开发(73) 发送客服消息

微信公众平台开发(73) 发送客服消息

微信公众平台开发 客服接口 发送客服消息作者&#xff1a;方倍工作室 地址&#xff1a;http://www.cnblogs.com/txw1958/p/weixin73-custom-send.html 当用户主动发消息给公众号的时候&#xff08;包括发送信息、点击自定义菜单clike事件、订阅事件、扫描二维码事件、支付成功事…
阅读更多...
html 层半透明,给页面加一层半透明div，禁用页面所有功能

html 层半透明,给页面加一层半透明div，禁用页面所有功能

系统中有个功能用户点击一个按钮要调用webservice&#xff0c;可能会等待较长时间&#xff0c;如果用户不耐烦&#xff0c;再点按钮或点击别的功能就乱套了想到屏蔽页面所有功能&#xff0c;思路是用户点击按钮&#xff0c;调用一个javascript方法&#xff0c;显示预先在页面中…
阅读更多...
有效预防xss_使用Jsoup防御XSS攻击

有效预防xss_使用Jsoup防御XSS攻击

跨站脚本攻击(Cross Site Scripting)&#xff0c;为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆&#xff0c;故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被执…
阅读更多...
java 整合 mongodb 增删改查

java 整合 mongodb 增删改查

<dependency><groupId>org.mongodb</groupId><artifactId>mongo-java-driver</artifactId><version>3.0.4</version></dependency> //连接到 mongodb 服务 [不需要用户和密码时] MongoClient mongoClient new MongoClient(&…
阅读更多...
pivot行列转换

pivot行列转换

http://www.cnblogs.com/zhangzt/archive/2010/07/29/1787825.html转载于:https://www.cnblogs.com/mingyongcheng/archive/2012/09/27/2705675.html
阅读更多...
最新文章

Copyright @ 2022~2023