文档章节

天边一朵云-徒手用html生成一朵云,很真的那种

wphmoon
 wphmoon
发布于 06/19 20:57
字数 1328
阅读 4771
收藏 109

     《天边一朵云》是由蔡明亮执导,李康生、陈湘琪领衔主演的剧情电影,情节很文艺,摄影很露骨,属于那种你看了后完全没有撸点的色情片。看完本片后,我很后悔,所以我打算自己用html弄出天边一片云(本句上下文没有任何关联,只有没撸点这方面一样)

        云的特点就是模糊,琢磨不定,所以我的入手点就是阴影,让我们开始撸代码,上帝说要有个div,就有了一个div

<div id="cloud-circle"></div>

为了div有个伴,就从div的身体里拆下肋骨,变成了css

	body {
  width: 100vw;
  height: 100vw;
  background: cornsilk;
  padding: 1%;
}

#cloud-circle {
    width: 180px;
    height: 180px;
    background: coral;
    border-radius: 50%;
    box-shadow: 200px 200px 50px 0px #000;
}

其实就是画了一个圆,然后用box-shadow加了个阴影,box-shadow的参数说明如下:

其中最后一个参数inset没写,模糊靠的是blur参数。看到的效果如下:

好像和云的形象距离比较远,这时候要svg的filter出场了:

<svg width="0" height="0"> 
  <filter id="filter">
    <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
    <feDisplacementMap in="SourceGraphic" scale="10" />
  </filter>
</svg>

在上面的CSS里面加上这个filter

#cloud-circle {
    width: 180px;
    height: 180px;
    background: coral;
    border-radius: 50%;
    filter: url(#filter);/*看这里看这里*/
    box-shadow: 200px 200px 50px 0px #000;
}

看到的效果是这样的

在filter的腐蚀下,cloud-circle这个div的面容变的憔悴了,(女同胞们,用手机摄像头滤镜是没有好下场的!)。这里我们要讲下filter。SVG使用<filter>元素来定义滤镜。它的滤镜其实有很多,效果各异,具体的内容可以看这里。我们用的是滤镜中的feTurbulence,该滤镜利用Perlin噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。看到云纹了没有,我们要的就是它。具体的参数不说了,大家可以自己去这里看,我们主要用SourceGraphic这个参数,这个参数值越大,对图像的腐蚀性越强,我看180这个数字挺吉利,就用它试下:

<feDisplacementMap in="SourceGraphic" scale="10" />

效果如下:

这愁云惨雾的样子就有些象了,但这个背景颜色不对,我这又不是沙城暴,不能是黄色的啊,调成蓝天

  background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);

看,沙城暴过去了,蓝天来了

不过云彩一般是长条的,我们把那个圆形(如果大家还记得这个货最开始一个圆的话)拉长,变成一个长椭圆形。

#cloud-circle {
	  /*拉长width和height的比例*/
    width: 500px;
  	height: 275px;
    background: coral;
    border-radius: 50%;
    filter: url(#filter);
    box-shadow: 200px 200px 50px 0px #000;
}

效果就变成这样啦

这两货你侬我侬的,靠的太紧了,桔色这家伙还压在别人黑小姐身上,太不纯洁了,拆散拆散。

#cloud-circle {
    width: 500px;
  	height: 275px;
    background: coral;
    border-radius: 50%;
    filter: url(#filter);
    box-shadow: 400px 400px 60px 0px #fff; /* 拉大阴影的位移位置,改变阴影的颜色 */
    position: absolute; /* 改成绝对定位 */
    top: -320px; /* 向上移一点 */
    left: -320px; /* 向左移一点 */
}

于是,猴急的橙色男士被移出了窗口,看不见了,黑小姐变成了白小姐了。

我终于成功的拆散了他们,心情很是舒畅,一朵白云就这么做出来了。但看她单薄的样子,一副二次元的模样,我觉得很不满意,我不是宅男啊,不喜欢纸片人,我要让她有立体感,咋办呢,这时候,要祭出一张原理图,让大家知道我也是有理论知识的。

看,一朵有层次的云其实是真的靠层次来体现的,三层合一就是一朵有白有黑,前凸后翘的立体云了,我们开始撸代码,先来三层云:

<div class="cloud" id="cloud-back"></div>
<div class="cloud" id="cloud-mid"></div>
<div class="cloud" id="cloud-front"></div>

然后各自拥有自己的filter

<svg width="0" height="0"> 
  <!--Top Layer-->
    <filter id="filter-back">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" 
seed="0" />     
      <feDisplacementMap  in="SourceGraphic" scale="170" />
    </filter>
       <filter id="filter-mid">
        <feTurbulence type="fractalNoise"  baseFrequency="0.012" numOctaves="2" 
seed="0"/>
      <feDisplacementMap  in="SourceGraphic" scale="150" />
    </filter>
    <filter id="filter-front">
        <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" 
seed="0"/>
      <feDisplacementMap  in="SourceGraphic" scale="100" />
    </filter>
</svg>

里面主要变化就在SourceGraphic,之前讲过,这个参数越大,腐蚀性越强。另外css也要做下修改:

.cloud {
  width: 500px;
  height: 275px;
  border-radius: 50%;
  position: absolute;
  top: -35vh;
  left: -25vw;
}

#cloud-back {
  filter: url(#filter-back);
  box-shadow: 300px 300px 30px -20px #fff;
}

#cloud-mid {
  filter: url(#filter-mid);
  box-shadow: 300px 340px 70px -60px rgba(158, 168, 179, 0.5);
    left: -25vw;
}

#cloud-front {
  filter: url(#filter-front);
  box-shadow: 300px 370px 60px -100px rgba(0, 0, 0, 0.3);
    left: -25vw;
}

主要是针对三层云的颜色和阴影大小位置做了些调整,最终的结果就出来了。

一朵怎么看怎么象真的云就出现了。代码大家可以去这里看

最后,如果大家看完了《天边一片云》这部电影,对西瓜这种水果会有全新的认识......

© 著作权归作者所有

wphmoon
粉丝 5
博文 20
码字总数 33435
作品 0
广州
高级程序员
私信 提问
加载中

评论(24)

Crab2Died
Crab2Died
抄的很详细
沙发迪
沙发迪
应该说是翻译的,哈哈哈
Stinson_Zhao
Stinson_Zhao
极其反对这样的抄袭,主要内容都是别人的,只有抖机灵的内容是自己的,还标注原创,OSChina 还推过来,真的服气!
nnnm
nnnm
厉害!
五毛程序员
五毛程序员
英文原文链接都不给,抄都能抄歪来。给爷爬 https://css-tricks.com/drawing-realistic-clouds-with-svg-and-css/
OSChina首席情感咨询师
OSChina首席情感咨询师
下一步,HTML撸出一颗红薯,超真的那种
被猪拱了的JAVA
被猪拱了的JAVA
牛的逼,我要试一下
阿信sxq
阿信sxq
厉害
松仁普
松仁普
疑车据
magoo_lau
magoo_lau
mark
s
stuming
🐮🍺
思杰北京公司参观和交流

前不久,获得51CTO的邀请与博主九胖等人一同参观思杰北京办公区,并有思杰资深解决方案工程师为我们进行了几个小时的产品讲解,受益匪浅,下面和大家简单分享一下。 关于思杰公司 负责人为我...

李珣
2015/10/16
0
0
思杰的雄心——软件定义的工作空间

前不久,我受51CTO之邀参观了思杰北京办公室,与思杰的一位专家和其他几位博主进行了一个多小时的交流,受益匪浅。其实对于思杰我早有耳闻,这家公司在很长一段时间内在桌面虚拟化领域都处于...

rickyfang
2015/10/23
0
0
一幅来自世界互联网大会的混合云安全全景图

现阶段,上云的趋势已经无人质疑,大家讨论更多的是怎样迁移到云上去,特别是怎样安全地迁移到云上,以及怎样安全地在云上开展日常运营工作。 基于在云计算安全行业的积累和思考,默安科技认...

木子
2018/11/12
0
0
我的友情链接

51CTO博客开发 桌面虚拟化杂谈 王庆平轨迹 云界漫步 虚拟化技术驿栈 Virtualization Now! Virtualization 一朵只想落地的云 Citrix虚拟化 天行健@中国元素 王春海的博客 滴水穿石 老丁的技术...

mabofeng
2017/11/22
0
0
【译】来,用svg&css给你画一朵真实的云

原文:Drawing Realistic Clouds with SVG and CSS 这是作者最终实现的效果: ......哦,不,应该是这张: 在线查看效果:cloud demo 正文开始啦~ 希腊神话讲述了一个关于宙斯创造云女神涅斐...

_安歌
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

php 遇到 No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1...

chenhongjiang
今天
5
0
MySQL 基础

一、常用命令 在命令行中,配置好环境变量后,通过cmd可以直接进入mysql命令行模式,同时列举几种常用命令 # 进入mysql数据库,密码可以先不写,打完-p后再输入,防止被别人看到mysql -u账...

华山猛男
今天
6
0
简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
今天
5
0
用脚本将本地照片库批量导入到Day One中

因为目前iCloud 空间已经不足,其中95%都是照片,之前入手了DayOne,且空间没有限制,订阅费一年也不少,再加上DayOne作为一款日记App 也比较有名,功能方面最大的就是地理视图与照片视图,尤...

在山的那边
昨天
19
0
jupyter部署安装

python373 -m ipykernel install --name python373 ipython kernelspec list sc create myjupyterservice binpath="D:\apply\Python373\Scripts\jupyter-notebook --config=V:/my_work/jupyt......

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部