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

最新推荐文章于 2025-06-02 09:06:27 发布
转载 最新推荐文章于 2025-06-02 09:06:27 发布 · 927 阅读 · 3
文章标签：

#html5圆圈动画效果

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);

}

}

麦小秋
关注
CSS实现圆圈发光效果
jeremygeng的博客
10-29 5787
CSS实现圆圈发光效果 html <div class="round"> <div class="circle"> <a href="https://www.jsdaima.com/" target="_blank">大数据</a> </div> <div clas...
css3探测光圈_使用CSS3实现霓虹光圈加载动画
weixin_30714077的博客
12-23 195
CSS语言：CSSSCSS确定* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}body {background: #0b0b14;overflow: hidden;}.container {position: absolute;margin: auto;top: 0;left:...
3D翻转效果（翻书）
高压锅博客
08-29 671
前期准备：备好3张照片，大小为300x400大小，放入images文件夹中 *{ margin: 0; padding: 0; } .book{ width: 300px; margin: 100px auto; position: relative; -webkit-persp
30秒CSS系列：使用CSS创建脉冲加载动画效果
最新发布
gitblog_00366的博客
06-02 482
30秒CSS系列：使用CSS创建脉冲加载动画效果 什么是脉冲加载动画 脉冲加载动画（Pulse Loader）是一种常见的网页加载指示器，它通过两个圆形元素交替放大并淡出的效果，创造出类似水波纹扩散的视觉效果。这种动画不仅美观，还能有效缓解用户在等待过程中的焦虑感。 实现原理 这个动画效果主要利用了CSS的以下几个关键特性： 关键帧动画（@keyframes）：定义动画从开始到结束的整个过程 动...
纯CSS3实现炫酷大数据圆圈动态发光特效动画
weixin_42541698的博客
10-22 3173
//html <div class="circle-wrap" v-if="isFocusProgress"> <div class="circle"> <div class="big-circle"></div> ...
html5实现圆圈里带一个三角形,CSS3 画基本图形，圆形、椭圆形、三角形等
weixin_35851515的博客
05-31 957
CSS3 画基本图形，圆形、椭圆形、三角形等发布时间：2016-09-20 16:25:53 作者：佚名 我要评论这篇文章主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下CSS3 圆形#css3-circle{width: 150px;height: 150px;border-radius: 50%;background-color: #232323...
CSS3实现光感圆圈动画特效代码
03-20
在CSS3中，实现光感圆圈动画特效是一种常见的网页设计技术，它可以为网页增添动态美感，提升用户体验。本文将详细解析如何利用CSS3的特性来创建这种效果。 首先，我们要了解CSS3中的关键帧动画（@keyframes）。这是...
HTML5结合CSS3实现的光感圆圈动画特效源码.zip
11-04
在本示例中，“HTML5结合CSS3实现的光感圆圈动画特效源码”是一个演示如何利用这两种技术来制作引人注目的视觉效果的项目。 HTML5作为新一代的超文本标记语言，其主要改进包括更好的语义化元素、本地存储能力、...
CSS3实现光感圆圈动画.zip
07-04
在本项目"CSS3实现光感圆圈动画.zip"中，我们主要探讨的是如何利用CSS3的特性来创建一个具有视觉吸引力的光感圆圈动画。这个动画效果通常用于网页设计，可以提升用户体验，吸引用户的注意力。以下是关于CSS3和...
CSS3光感圆圈动画特效实现教程
在标题和描述中提到的“CSS3实现光感圆圈动画特效代码”，指的就是使用CSS3技术实现一种视觉效果，其中可能包含了光感（通常是指有光泽、反射效果或是透明度变化等）以及圆圈（可能是指圆形元素或路径）的动态变化。...
HTML5与CSS3光感圆圈动画特效源码教程
资源摘要信息: HTML5结合CSS3实现的光感圆圈动画特效源码.zip 该资源为一个压缩包文件，包含了使用HTML5和CSS3技术实现的光感圆圈动画特效的源代码。这些技术是目前网页设计和开发中最常用的前端技术之一，允许...
纯CSS3线性发光圆圈加载动画特效特效代码
03-20
纯CSS3线性发光圆圈加载动画特效是一款适合做页面加载CSS3动画特效下载。
CSS3一排圆点发光加载动画特效
06-11
非常简单好看的CSS3一排圆点发光加载动画特效，5个圆点从左到右排列一个一个发光一闪而过形成网页加载动画效果。
css实现光圈发光动画特效
weixin_48885715的博客
11-12 2715
css实现光圈发光动画特效
CSS3 实现圆圈动态发光特效动画的制作
weixin_72303943的博客
07-21 5661
CSS3 实现圆圈动态发光特效动画的制作
css涟漪光圈扩散_CSS3动画之：水波涟漪般的定位样式
weixin_34731825的博客
12-29 703
CSS3动画之：水波涟漪般的定位样式Sponsor近期工作要做一个用于图像定位的标识，为了让这个指示标识不死板，决定做个简单的动画，动画效果像波浪一样波动，这样标识就更美观好看了，喜欢的同学可以跟着来学，十分简单，欢迎指正交流。先上效果图：教程本动画需要用到的主要属性：animation, transition 和 Keyframes属性，属性详情可以去 w3school 中文站查看相关动画属性...
CSS：animation和transform 实现光圈由内向外缩放效果
weixin_42659817的博客
08-23 695
实现：光圈由内向外缩放效果。
发光球的Css样式写法
weixin_46261399的博客
03-10 694
会发光的立体球Css的写法
发光圆环html,圆环形比例图.html
weixin_36155267的博客
06-18 258
*{padding: 0; margin: 0; }.circle{width: 200px;height: 200px;margin: 20em auto;position: relative;}canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;}#canvas_1{z-inde...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值