css实现光圈发光动画特效
html部分：（html部分很简单就是无序列表包裹。主要的样式在css里实现特效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css实现光圈发光动画特效</title>
<link rel="stylesheet" href="css/meiriyijiang.css">
</head>
<body>
<ul >
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
css部分：边缘部分通过不规则的圆形叠加得到。颜色混合样式，延时得到不重合覆盖动态效果。
* {
margin: 0;
padding: 0;
}
//公共样式
body {
background-color: black;
}
//背景颜色为黑色
ul {
list-style: none;
}
ul::after {
content: '';
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
border-radius: 50%;
}
//伪元素，黑色圈圈覆盖部分
ul li {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: yellow;
border-radius: 60% 40% 45% 60%/60% 40% 55% 60%;//使圆形不规则
animation: ani 30s linear ;//动画
mix-blend-mode: screen;//颜色混合
filter: blur(5px);//模糊度
}
ul li:nth-of-type(2) {
background-color: blue;
animation-delay: -10s; // 延迟
}
ul li:nth-of-type(3) {
background-color: red;
animation-delay: -20s;
}
@keyframes ani {
from {
transform: translate(-50%, -50%) rotate(0deg)
}
to {
transform: translate(-50%, -50%) rotate(360deg)
}
}
//动画特效
css实现光圈发光动画特效相关推荐
- JavaScript+CSS实现的点赞动画特效
大家好,今天给大家介绍一款,JavaScript+CSS实现的点赞动画特效 (图1).送给大家哦,获取方式在本文末尾. 图1 点击到一定次数后就会有特效出现,最后就会炸裂,很有意思(图2) 图2 源码 ...
- html 萤火虫特效,html5+CSS3杯子里萤火虫发光动画特效
html5+CSS3杯子里萤火虫发光动画特效 js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:" ...
- [七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍 Canvas介绍 1.canvas是html5的一个新标签,属于h5的新特性 2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等 ...
- html5 strongeaseinout,html5杯子里萤火虫发光动画特效
js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:"50% -45%"}) //Twe ...
- html 萤火虫特效,html5杯子里萤火虫发光动画特效
js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:"50% -45%"}) //Twe ...
- css绘制的灯笼动画js特效
下载地址 css绘制的灯笼动画特效,左右摇摆css3动画. dd:
- H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能 效果展示 源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
- css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效 代码结构 1. 引入CSS 2. HTML代码 基本样式: Basic star rating: 5 stars 4 stars ...
- html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
最新文章
- Linux多线程实践(6) --Posix读写锁解决读者写者问题
- 【转】Visio画用例模型图竟然没有include关系
- 吴恩达 NIPS 2016：利用深度学习开发人工智能应用的基本要点（含唯一的中文版PPT）...
- Dockerfile使用，怎么通过Dockerfile完成docker映像配置
- 【ArcGIS遇上Python】Python使用栅格数据
- 44年前的一个数学猜想终被破解
- gcc参数 -i, -L, -l, -include
- sharepoint_wf 启动窗口设计，支配给自由域用户
- [转载] 根据Python常见面试题来谈谈 Python 闭包
- 代理设计模式 实现 Retrofit 的 create
- Wiki你长的为何与众不同--对Wiki独创写作语法原因的思考
- ddr3ddr4 lpddr4速率_LPDDR3一定弱？实测对比单双通道DDR4
- 发动机冒黑烟_发动机冒黑烟常见的24个原因和解决方法！
- 用计算机写欧拉恒等式,震惊！计算器里竟然藏着这样一个秘密！
- smart210 dnw下载
- 【解密】PDF文档忘记编辑密码 照样编辑
- 通过安卓手机，获取微信小程序包进行反编译方法
- 优秀蓝牙耳机推荐，热销不错的四款蓝牙耳机推荐
- Windows Moblie上的网络连接
- SpringSecurity：登录