今天被世界上第一张黑洞照片刷屏。

一整天，哪里都是这张照片。看的多了。我就想用css做一个吧。

建议在chrome上查看。

访问地址：http://suohb.com/work/blankHole.html

点击访问

老规矩，先看效果：

完成这种效果，就需要对图像进行虚化、模糊。

刚好CSS有这个能力。那就是filter。

基本上，filter这个样式有很多选项。这里。我们使用blur就足以满足此次效果。

首先说一下思路。

其实这个做起来相对简单，代码工作只是最少的一部分，想象力到了，代码很快就会实现。

这个效果，按层次来分。一共四层

1、黑洞主体红色主体部分

2、黑洞背景红色虚化部分

3、能量的高亮部分

4、黑洞核心黑色部分。

依次画出几个形状。然后blur就可以了。

下边开始代码实现：

一、先画出主体大致轮廓，我这里上下左右用了4个大小不一圆形 ：

然后filter:blur(20px)，得到：

这个主体内容就达成了。

二、虚化的红色背景部分。

主体周围杂乱放置一些透明底比较低的红色椭圆。

然后blur(20px)

三、黄色高光样式

使用两个黄色椭圆。里边放两个白色的椭圆。

filter:blur(12px)

四、黑色中心部分，一个黑色的椭圆。blur(13px)，效果完成。

整体实现比较简单的。不过，你们想不想看看黑洞的不模糊的真实样子呢？

铛铛铛铛，是不是很可爱。。

更多特效，请关注我们公众号

最后部分，是源代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>黑洞</title>
  8.      <style type="text/css">
  9.          #box{
  10.              position: relative;
  11.              width: 200px;
  12.              height: 200px;
  13.              margin: 100px auto;
  14.          }
  15.          .red-box{
  16.              position: absolute;
  17.              left: 50px;
  18.              top: 50px;
  19.              width: 100px;
  20.              height: 100px;
  21.              filter: blur(20px);
  22.              opacity: .7;
  23.          }
  24.          .red{
  25.              position: absolute;
  26.              width: 100%;
  27.              height: 100%;
  28.              border-radius: 50%;
  29.              background: #f00;
  30.          }
  31.          .yellow-box{
  32.              position: absolute;
  33.              left: 50px;
  34.              top: 50px;
  35.              width: 80px;
  36.              height: 80px;
  37.              filter: blur(12px) brightness(1.1);
  38.              animation: move 2s linear infinite;
  39.          }
  40.          .yellow{
  41.              position: absolute;
  42.              width: 100%;
  43.              height: 100%;
  44.              border-radius: 50%;
  45.              background: yellow;
  46.          }
  47.          .white{
  48.              position: absolute;
  49.              left: 15px;
  50.              top: 15px;
  51.              width: 46px;
  52.              height: 46px;
  53.              border-radius: 50%;
  54.              background: #FFF;
  55.          }
  56.          .blank-box{
  57.              position: absolute;
  58.              left: 70px;
  59.              top: 60px;
  60.              width: 60px;
  61.              height: 60px;
  62.              filter: blur(13px);
  63.          }
  64.          .blank{
  65.              position: absolute;
  66.              width: 100%;
  67.              height: 100%;
  68.              border-radius: 50%;
  69.              background: #000;
  70.          }
  71.          @keyframes move{
  72.              0%{
  73.                  transform: translateX(0)
  74.              }
  75.              50%{
  76.                  transform: translateX(3px)
  77.              }
  78.              100%{
  79.                  transform: translateX(0)
  80.              }
  81.          }
  82.      </style>
  83.  </head>
  84.  <body bgcolor="#000000">
  85.      <div id="box">
  86.          <div class="red-box" style="opacity: .2;">
  87.              <div class="red" style="transform: rotate(-45deg) translateY(-150px) scaleX(.5);"></div>
  88.              <div class="red" style="transform: rotate(-80deg) translateY(-120px) scaleX(.7);opacity: .6;"></div>
  89.              <div class="red" style="transform: rotate(-130deg) translateY(-100px) scaleX(1);opacity: .6;"></div>
  90.              <div class="red" style="transform: rotate(-180deg) translateY(-110px) scaleX(1);opacity: .6;"></div>
  91.              <div class="red" style="transform: rotate(-230deg) translateY(-120px) scaleX(.8);opacity: .6;"></div>
  92.              <div class="red" style="transform: rotate(-280deg) translateY(-130px) scaleX(.4);opacity: .6;"></div>
  93.              <div class="red" style="transform: rotate(-340deg) translateY(-110px) scaleX(2);opacity: .8;"></div>
  94.          </div>
  95.          <div class="red-box" >
  96.              <div class="red" style="transform:translateY(-25px) scale(1.25);"></div>
  97.              <div class="red" style="transform:translateX(-40px) scale(1.1);"></div>
  98.              <div class="red" style="transform:translateY(30px) scale(1.0);"></div>
  99.              <div class="red" style="transform:translateX(50px) scale(1.0);"></div>
  100.              <div class="red" style="transform: rotate(-45deg) translateY(-120px) scaleX(.4);opacity: .6;"></div>
  101.          </div>
  102.          <div class="yellow-box">
  103.              <div class="yellow" style="transform:  rotate(-45deg) scaleX(.5);left:-30px;top:30px;">
  104.                  <div class="white"></div>
  105.              </div>
  106.              <div class="yellow" style="transform:  rotate(45deg) scaleX(.6) scaleY(1.2);left:40px;top:25px;">
  107.                  <div class="white"></div>
  108.              </div>
  109.          </div>
  110.          <div class="blank-box">
  111.              <div class="blank" style="transform:  rotate(14deg) scaleY(1.3) scaleX(1);"></div>
  112.          </div>
  113.      </div>
  114.  
  115.  </div>
  116.  </body>
  117.  </html>

CSS filter 模拟黑洞照片效果的更多相关文章

  1. 20个Flutter实例视频教程-第12节: 流式布局 模拟添加照片效果

    视频地址: https://www.bilibili.com/video/av39709290/?p=12 博客地址: https://jspang.com/post/flutterDemo.html ...

  2. CSS filter 有哪些神奇用途

    背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function ...

  3. CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...

  4. Amazing！！CSS 也能实现烟雾效果？

    最近利用 CSS 实现了一些看似超出 CSS 能力的效果: 巧用渐变实现高级感拉满的背景光动画 Amazing!!CSS 也能实现极光? 本文继续此系列,本文主要想探讨一下,使用 CSS 能否比较好的 ...

  5. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  6. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  7. 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

    这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...

  8. css3 模拟标牌震荡效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

随机推荐

  1. MSSQLServer知识点总结:DDL(create,alter,drop,declare)-未完整

    一.开发环境 Window10 二.开发工具 SQLServer2012 三.数据库的操作 1.创建 (1)方式一:使用默认的配置信息 create database T_mydb2 (2)方式二:自 ...

  2. mysql之命令行导入导出

    命令介绍 mysqldump:导出命令,在系统”命令提示符“窗口直接使用,如果提示没有此命令(前提是已经安装成功mysql),在环境变量中的path添加mysql,即path=D:\xxx\mysql ...

  3. JavaScript Json与Map互转以及Map对象的取值方式

    Json格式(Json字符串) : var json='{"name": "lily","age":"15"}' Map ...

  4. centos源码编译安装nginx过程记录

    前言:Centos系统编译安装LNMP环境是每来一台新服务器或换电脑都需要做的事情.这里仅做一个记录.给初学者一个参考! 一.安装前的环境 这里用的是centos 7系统. 我们默认把下载的软件放在 ...

  5. how to do a mass update in Laravel5 ( 在Laravel 5里面怎么做大量数据更新 )

    Today, I had spent 3 hours to fix one problem, The old program has a bug, originally, when a user pr ...

  6. css中常见几种float方式以及倒计时（刷新页面不清）

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  7. acm练习-day1_1

    “麻雀”lengdan用随机数生成了后台数据,但是笨笨的他被妹纸的问题给难住了... 已知lengdan生成了N(1=<N<=10005)个随机整数,妹子对这些数可能有以下几种操作或询问: ...

  8. 三维重建PCL：点云单侧面正射投影

    终于把点云单侧面投影正射投影的代码写完了,为一个阶段,主要使用平面插值方法,且只以XOY平面作为的正射投影面.有些凑合的地方,待改进. 方法思路:使用Mesh模型,对每一个表面进行表面重建.借助Ope ...

  9. jmeter元件的作用域和顺序

    jmeter是一个开源的性能测试工具,它可以通过鼠标拖拽来随意改变元件之间的顺序以及元件的父子关系,那么随着它们的顺序和所在的域不同,它们在执行的时候,也会有很多不同. jmeter的test pla ...

  10. Redis系列(五)--主从复制

    单机环境存在的问题: 1.机器故障,直接凉凉 2.容量瓶颈 3.QPS瓶颈 主从复制 对于可拓展平台来说,复制(replication)是必不可少的.replication可以让其他服务器slave拥 ...