CSS

语言：

CSSSCSS

确定

html {

height: 100%;

}

body {

height: 100%;

background-color: #000;

margin: 0;

padding: 0;

}

.lensflare {

position: relative;

overflow: hidden;

width: 100%;

min-height: 100%;

overflow: hidden;

}

.source-spread {

position: absolute;

background: radial-gradient(rgba(255, 225, 255, .05) 10%, rgba(255, 225, 255, .05) 30%, rgba(0, 0, 0, 0) 60%);

border-radius: 50%;

width: 2000px;

height: 2000px;

margin-top: -1000px;

margin-left: -1000px;

top: 14%;

left: 14%;

z-index: 0;

}

.source {

position: absolute;

background: radial-gradient(#fff 0%, rgba(243, 206, 205, .4) 35%, rgba(88, 88, 88, .3) 60%, rgba(0, 0, 0, 0) 70%);

border-radius: 50%;

width: 800px;

height: 800px;

margin-top: -400px;

margin-left: -400px;

top: 14%;

left: 14%;

z-index: 2;

}

.source-beam {

position: absolute;

background: radial-gradient(rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, 0) 70%);

border-radius: 50%;

width: 2200px;

height: 28px;

margin-top: -14px;

margin-left: -1100px;

top: 14%;

left: 14%;

z-index: 1;

}

.c1 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(189, 91, 87, 0) 40%, rgba(189, 91, 87, 0.5) 45%, rgba(189, 91, 87, 0) 50%, rgba(189, 91, 87, 0) 100%);

border-radius: 50%;

width: 400px;

height: 400px;

margin-top: -200px;

margin-left: -200px;

top: 14%;

left: 14%;

z-index: 3;

}

.c2 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(162, 196, 134, 0) 20%, rgba(162, 196, 134, 0.3) 43%, rgba(67, 85, 52, 0) 50%, rgba(67, 85, 52, 0) 100%);

border-radius: 50%;

width: 300px;

height: 300px;

margin-top: -150px;

margin-left: -150px;

top: 3%;

left: 3%;

z-index: 4;

}

.c3 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(31, 99, 255, .1) 1%, rgba(31, 99, 255, .13) 100%);

border-radius: 50%;

width: 160px;

height: 160px;

margin-top: -80px;

margin-left: -80px;

top: 46%;

left: 46%;

z-index: 5;

}

.c4 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(31, 99, 255, .1) 1%, rgba(31, 99, 255, .13) 100%);

border-radius: 50%;

width: 50px;

height: 50px;

margin-top: -25px;

margin-left: -25px;

top: 44%;

left: 44%;

z-index: 6;

}

.c5 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(31, 99, 255, .1) 1%, rgba(31, 99, 255, .13) 100%);

border-radius: 50%;

width: 88px;

height: 88px;

margin-top: -44px;

margin-left: -44px;

top: 47%;

left: 47%;

z-index: 7;

}

.c6 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(255, 129, 57, .15) 1%, rgba(255, 129, 57, .2) 100%);

border-radius: 50%;

width: 88px;

height: 88px;

margin-top: -44px;

margin-left: -44px;

top: 57%;

left: 57%;

z-index: 8;

}

.c7 {

position: absolute;

background: radial-gradient(rgba(255, 225, 255, .9) 10%, rgba(137, 255, 220, .4) 30%, rgba(0, 0, 0, 0) 60%);

border-radius: 50%;

width: 16px;

height: 16px;

margin-top: -8px;

margin-left: -8px;

top: 62%;

left: 62%;

z-index: 9;

}

.c8 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(255, 129, 57, .15) 10%, rgba(187, 129, 57, .20) 50%, rgba(255, 129, 57, .2) 60%, rgba(0, 0, 0, 0) 65%);

border-radius: 50%;

width: 190px;

height: 190px;

margin-top: -95px;

margin-left: -95px;

top: 71%;

left: 71%;

z-index: 10;

}

.c9 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(0, 0, 0, .15) 1%, rgba(255, 129, 57, .2) 100%);

border-radius: 50%;

width: 104px;

height: 104px;

margin-top: -52px;

margin-left: -52px;

top: 70%;

left: 70%;

z-index: 11;

}

.c10 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(0, 0, 0, .15) 1%, rgba(255, 129, 57, .2) 100%);

border-radius: 50%;

width: 60px;

height: 60px;

margin-top: -30px;

margin-left: -30px;

top: 72%;

left: 72%;

z-index: 12;

}

.c11 {

position: absolute;

background: radial-gradient(rgba(255, 225, 255, .9) 10%, rgba(137, 255, 220, .4) 30%, rgba(0, 0, 0, 0) 60%);

border-radius: 50%;

width: 22px;

height: 22px;

margin-top: -11px;

margin-left: -11px;

top: 75%;

left: 75%;

z-index: 13;

}

.c12 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(73, 168, 199, .15) 10%, rgba(100, 145, 42, .20) 30%, rgba(100, 145, 42, .2) 60%, rgba(0, 0, 0, 0) 65%);

border-radius: 50%;

width: 80px;

height: 80px;

margin-top: -40px;

margin-left: -40px;

top: 81%;

left: 81%;

z-index: 14;

}

.c13 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 4%, rgba(100, 145, 42, .2) 36%, rgba(163, 240, 63, .2) 38%, rgba(100, 145, 42, .1) 40%, rgba(189, 91, 87, 0) 43%);

border-radius: 50%;

width: 240px;

height: 240px;

margin-top: -120px;

margin-left: -120px;

top: 88%;

left: 88%;

z-index: 15;

}

.c14 {

position: absolute;

background: radial-gradient(ellipse at center, rgba(189, 91, 87, 0) 39%, rgba(94, 29, 191, 0.2) 41%, rgba(29, 71, 191, 0.2) 42%, rgba(191, 113, 29, 0.2) 43%, rgba(189, 91, 87, 0) 45%, rgba(189, 91, 87, 0) 100%);

border-radius: 50%;

width: 600px;

height: 600px;

margin-top: -300px;

margin-left: -300px;

top: 99%;

left: 99%;

z-index: 16;

}

css3探测光圈_纯CSS3实现的镜头光晕（光圈）相关推荐

  1. css3之 谜灯卡片_纯css3灯泡开关特效代码

    纯CSS3和SVG鼠标滑过灯泡发光特效 相关css代码 .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: transl ...

  2. 前端酷炫效果参考_纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. 天空飘彩带的css3代码_纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单

    本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...

  4. html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效

    这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...

  5. css 边缘闪光_纯css3闪烁动画《发光的边框效果》

    纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ...

  6. 左侧侧拉栏html,侧边抽屉_纯CSS3抽屉式滑动侧边栏菜单设计

    插件描述:该侧边栏在鼠标滑过菜单项时,会以平滑的方式滑出相应的主菜单,就像拉开抽屉的效果,非常的时尚. 侧边栏菜单设计说明 这是一款使用纯CSS3制作的抽屉式滑动侧边栏菜单设计效果.该侧边栏在鼠标滑过 ...

  7. css3蒲公英飘动效果_纯CSS3逼真的气球漂浮动画特效

    这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效.这个气球飘动效果主要使用CSS3 animation来制作,通过控制不同气球的位移和旋转角度,来达到气球漂浮的效果. 制作方法 HTML结构 ...

  8. css3 卡片亮光_利用css3实现文字亮光特效的代码

    这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光 ...

  9. css3怎么设置logo,纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo

    纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo demo by js.alixixi.com #abnamro .canvas { background-color: #f2f2f ...

  10. css3 动画 翅膀 震动,纯css3制作煽动翅膀的蝴蝶

    纯css3制作煽动翅膀的蝴蝶,先看效果 怎么样,效果还不错吧 上代码: html cssbody{            background: url("./images/bg.jpg&q ...

最新文章

  1. 科大星云诗社动态20211108
  2. Arduino学习笔记36
  3. 亲手搭建一个基于Asp.Net WebApi的项目基础框架1
  4. 初识Mysql(part14)--我需要知道的6个关于创建表的小知识
  5. AtCoder Regular Contest 060
  6. maven2 + tomcat6 + eclipse集成配置
  7. [原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突
  8. B1023 组个最小数 （20分）
  9. 如何用r语言搜集报表_基迪奥免费小课堂——如何用R语言绘制GSEA plot
  10. 触发器和存储过程的使用
  11. Julia : win下cmd和repl中执行.jl程序
  12. 小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现
  13. 一个串口连接另外两个串口的设计
  14. 东南大学本 硕 博论文中期答辩 毕业答辩ppt模板2021版
  15. debussy和modelsim联合仿真配置
  16. Mac系统开机启动项如何设置
  17. MFC之图像绘制---高速绘图控件（High-speed Charting Control）应用（一）
  18. 教育局统计系统 服务器没打开,统计联网直报证书常见问题与解答
  19. STM32主从模式 精确脉冲数PWM （已实现）
  20. IO流和base64转换

热门文章

  1. 兔子-蓝牙 bluetooth （四）OPP文件传输
  2. FileZilla显示 连接超时 无法连接到服务器的解决方案
  3. nuxt如何添加背景图片
  4. 猜一宋词名句 Java_《宋词三百首》里的50个名句，最适合发朋友圈
  5. php pdo 遍历,PHP PDO操作总结
  6. 区块链项目_数字资产控股DAH_清算结算
  7. solution类方法怎么引用_13类地下害虫，你见过多少？怎么防治？10大方法要记牢！...
  8. SMART硬盘检测参数详解
  9. android修改渠道,Android 多渠道定制化打包
  10. python天天向上的力量实验报告_Python练习11：天天向上的力量