CSS实现雨滴动画效果的实例代码_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

一、车胤囊萤映雪晋代时,车胤从小好学不倦,但因家境贫困,父亲无法为他提供良好的学习环境。为了维持温饱,没有多余的钱买灯油供他晚上读书。为此,他只能利用白天时间背诵诗文。夏天的一个晚上,他正在院子里背一篇文章,忽然见许多萤火虫在低空中飞舞。一闪一闪的光点,在黑暗中显得有些耀眼。他想,如果把许多萤火虫集中在一起,不就成为一盏灯了吗?于是,他去找了一只白绢口袋,随即抓了几十只萤火虫放在里面,再扎住袋口,把它吊起来。虽然不怎么明亮,但可勉强用来看书了。从此,只要有萤火虫,他就去抓一把来当作灯用。由于他勤学苦练,后来终有成就,官至吏部尚书。二、孙敬悬梁孙敬是汉朝信都(今衡水市冀州区)人。他年少好学,博闻强记,而且视书如命。晚上看书学习常常通宵达旦。邻里们都称他为“闭户先生”。孙敬读书时,随时记笔记,常常一直看到后半夜,时间长了,有时不免打起瞌睡来。一觉醒来,又懊悔不已。有一天,他抬头苦思的时候,目光停留在房梁上,顿时眼睛一亮。随即找来一根绳子,绳子的一头拴在房梁上,下边这头就跟自己的头发拴在一起。这样,每当他累了困了想打瞌睡时,只要头一低,绳子就会猛地拽一下他的头发,一疼就会惊醒而赶走睡意。从这以后,他每天晚上读书时,都用这种办法,发奋苦读。年复一年地刻苦学习,使孙敬饱读诗书,博学多才,成为一名通晓古今的大学问家,在当时江淮以北颇有名气,常有不远千里的学子,负笈担书来向他求学解疑、讨论学问。三、苏秦刺骨战国时期的苏秦是一个有名的政治家,但是他在年轻的时侯学问并不多,到了好多地方都没有人关注,即使有雄心壮志也得不到重用,于是他下定决心发愤图强努力读书。由于他经常读书读到深夜,疲倦到想要打盹的时侯就用事先准备好的锥子往大腿上刺一下,这样突然的痛感使他猛然清醒起来,振作精神继续读书,后来苏秦成为了一位著名的政治家。四、许衡不许食梨许衡曾经在盛夏时经过河阳(今河南省孟州市),(由于行走路途遥远,天气又热)十分口渴,路上有一棵梨树,众人都争先恐后地去摘梨来吃,许衡独自端正地坐在树下,安然如常。有人问他(为什么不吃),(许衡)说:"不是自己拥有的却摘取它,不可以。那人说:"现在时局混乱,这棵梨树没有主人了(何必介意)。(许衡)说:"梨树没有主人,我的心难道也没有主人吗?别人丢失的,(即使)一丝一毫不合乎道义也不能接受。(有教养的人家的)庭院里有果树,当果子成熟掉落在地上时,(有教养的)小孩经过它,也不斜着眼看就离去。那是他家人的教化而所以像这样。许衡不吃无主梨告诉我们虽然梨可以无主,但是我们的心是不可以无主的,诚实就是金子,只有诚实的人才能受到别人的尊敬和信任。做人要有自己的原则。为人处事,有自己的道德标准。要抵挡得住诱惑,诚实待人。后来许衡成为中国十三世纪杰出的"思想家、教育家和天文历法学家。五、匡衡凿壁偷光匡衡学习好,还很勤奋。西汉时候,有个农民的孩子,叫匡衡。他小时候很想读书,可是因为家里穷,没钱上学。后来,他跟一个亲戚学认字,才有了看书的能力。他一天到晚在地里干活,只有中午歇晌的时候,才有工夫看一点书,所以一卷书常常要十天半月才能够读完。匡衡很着急,心里想:白天种庄稼,没有时间看书,我可以多利用一些晚上的时间来看书。可是匡衡家里很穷,买不起点灯的油,怎么办呢?有一天晚上,匡衡躺在床上背白天读过的书。背着背着,突然看到东边的墙壁上透过来一线亮光。他嚯地站起来,走到墙壁边一看,啊!原来从壁缝里凿壁偷光透过来的是邻居的灯光。于是,匡衡想了一个办法:他拿了一把小刀,把墙缝挖大了一些。这样,透过来的光亮也大了,他就凑着透进来的灯光,读起书来。县里有个大户人家叫文不识,家中富有,有很多书。匡衡到他家去做雇工,但不要报酬。主人感到很奇怪,问他为什么这样,他说:“,我想读遍主人家的书。主人听了,深为感叹,就资助匡衡读书。于是匡衡成了大学问家。六、孙康映雪读书孙康幼时酷爱学习,常常感到时间不够用。他想夜以继日地读书,可家中贫穷,没钱购买灯油。一到天黑,便没有办法读书。特别到了冬天,长夜漫漫,他有时辗转很久,难以入睡。实在没有办法,只好白天多看书,晚上睡在床上默诵。他觉得让时间这样白白跑掉,非常可惜。一天半夜,孙康从睡梦中醒来,把头侧向窗户时,发现从窗外透进几丝白光。开门一看,原来下了一场大雪。屋顶白了,地上白了,树上也白了。整个大地披上一层银装,闪闪发光,使他眼花缭乱。他站在院子里欣赏银装素裹的雪后美景,忽然心中一动:映着雪光,可否读书呢?他急急忙忙跑回到屋里,拿出书来对着雪地的反光一看,果然字迹清楚,比一盏昏黄的小油灯要亮堂得多呢!于是他感觉不到困了,立即穿好衣服,取出书籍,在雪地上看书。孙康不顾寒冷,孜孜不倦的看起书来,手脚冻僵了,就起身跑一跑,同时搓搓手指。从此孙康不再为没有灯油而发愁。整个冬天,他夜以继日地读书,不怕寒冷,也不感到疲倦,常常一直读到鸡叫。即使是北风呼啸、滴水成冰,他也从来没中断学习。功夫不负有心人,孙康砥砺求进,学有大成,终于成为一位很有名望的学者(御史大夫)www.zgxue.com防采集请勿采集本网。

玻璃窗

今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。

1、达·芬奇从小就很聪明,长得也很漂亮,非常惹人喜爱。上小学时,他各门功课的成绩都很优异,算术课上他提出的一些问题,经常使老师感到棘手。课余时间,他的爱好是绘画。他在木板上、地面上、

<div class='window'></div>.window { position: absolute; width: 100vw; height: 100vh; background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); background-size: cover; background-position: 100%; filter: blur(10px);}

随着当今社会企业分工的越来越细,在现实的企业竞争环境中,任何人都不可能独立完成所有的工作,也不可能只凭个人的力量来大幅地提升企业的竞争力,每个人所能实现的仅仅是企业整体目标的一小部分。

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果

待业的大学毕业生,不顾男友反对进了亮点售楼公司,在高成的激励下,希望通过努力实现挣钱买房的野心,被人陷害,得高成相救。高成入狱后,照顾高成女儿,高成出狱后,带上高成女儿前往迎接。

一滴雨

雨滴的效果就很巧妙了,让我们看下一滴雨完整的效果图

1、白雪公主和七个小矮人 很久以前,在一个遥远国度里生活着,住着一位父母双亡的白雪公主,她的继母是一个狠毒的1998年,美国迪斯尼公司将花木兰的故事改编成了动画片,受到了全世界的欢迎。

这滴雨其实分为两个部分,第一部分是底部的阴影部分,其实是个边框来的,代码如下:

.border { position: absolute; margin-left: 92px; margin-top: 51px; border-radius: 100%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6); transform: rotateY(0); width: 20px; height: 28px;}<div class='border'></div>

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

通过width和height属性和border-radius把border拉成一个椭圆形,然后用box-shadow把阴影拉出来,作为水滴的阴影,边框的最终效果如下:

然后是水滴的部分

.raindrop { filter: brightness(1.2); position: absolute; margin-left: 90px; margin-top: 50px; background-size: 5vw 5vh; border-radius: 100%; background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); transform: rotate(180deg) rotateY(0); background-position: 48.1994160428% 54.3259834959%; width: 24px; height: 28px;}<div class='raindrop'></div>

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

水滴用background-image设置了玻璃的图片作为倒影,倒影之所以是倒影,是因为影子是倒着的,所以用transform的rotate()旋转了图片180,正好倒过来 通过background-position设置图片在水滴的显示的位置,后面不同的水滴会显示出的倒影因为图片位置的变化都不同,显得真实 raindrop的width比border的width多几个像素,是为了让水滴的两边盖住border,只留border的上下显示阴影 raindrop的margin-left和margin-top和border的也是略有不同,是为了raindrop能居中覆盖在border上面,使得水滴和阴影融合的更真实

单独无阴影的水滴效果如下:

随机雨滴

雨从来都不是一滴一滴来的,而且也不会很有规律的来,为了让雨滴随机出现在玻璃窗上,css-doodle框架。

<css-doodle use="var(--rule)"></css-doodle>

先创建一个css-doodle的自定义组件

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

--rule: ( :doodle { @grid: 10x10/ 100%; overflow: visible;}

打出10*10个grid,这样最多可以出现100滴雨

transform: scale(@rand(.5, .9));

通过transform:scale让雨滴随机变大变小

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

:before { content: ''; position: absolute; margin-left: @var(--mleft); margin-top: @var(--mtopb); border-radius: 100%; box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6); transform: rotateY(0); width: @var(--widthb); height: @var(--height);}:after { content: ''; filter: brightness(1.2); position: absolute; margin-left: @var(--mleft); margin-top: @var(--mtopa); background-size: 5vw 5vh; border-radius: 100%; background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); transform: rotate(180deg) rotateY(0); background-position: @r(1%, 100%) @r(1%, 100%); width: @var(--widtha); height: @var(--height); }

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

这里的:before和:after大家看的是不是很眼熟,其实:before里面的内容就是前面border的样式,:after里面的就是前面raindrop的样式。content必须要有,因为在伪元素(before,after)里如果没有设置“content”属性,伪元素是无用的,整个:before和:after里面的配置就都无效了。为了让雨滴显得更清晰,加了filter: brightness(1.2)让雨滴显得更亮一些。

这里面比较奇怪的是@var(),它其实就是css的变量,在css-doodle做了一层包装,作用和css的var()是一样的,我们看下这些变量的定义

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

--size:(4 + @r(1, 8));--shadow-size: calc(((@var(--size)*0.3) - 1)*1px);--mleft:@r(1, 100)px;--mtop:@r(1, 100);--mtop1:(@var(--mtop) - 1);--mtopb:calc(@var(--mtop)*1px);--mtopa:calc(@var(--mtop1)*1px);--height:@r(15, 25)px;--width:@r(8, 20);--width1:(@var(--width) + 5);--widthb:calc(@var(--width)*1px);--widtha:calc(@var(--width1)*1px);

这里有几个坑要说明一下:

1号坑:css-doodle提供了@calc(),但是这里计算还是要用css的calc(),使用@calc()无效。

2号坑:在使用@var做加减法的时候,+-号的两遍要有空格,否则计算无效,切记切记。

3号不是坑:计算好数值后,怎么带上px单位呢,用calc(value*1px)这种方法就可以了,其他的单位也可以用这种方法。

4号说明:为什么要用变量?是因为before和after不在一起,为了让boder和raindrop的margin-left、margin-top、width、height等属性能够保持一致,就需要用变量在before和after外面定义好,传值到里面去。

最终的效果如下:

 

没动画效果怎么敲打我窗

雨点如果只是这样洒在窗户,那就没有敲打的意思,为了体现敲打,我决定让雨点动起来。

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

:before { content: ''; position: absolute; margin-left: @var(--mleft); margin-top: @var(--mtopb); border-radius: 100%; box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6); transform: rotateY(0); width: @var(--widthb); height: @var(--height); opacity: 0; animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-fill-mode: forwards; animation-delay: @var(--delay);}:after { content: ''; filter: brightness(1.2); position: absolute; margin-left: @var(--mleft); margin-top: @var(--mtopa); background-size: 5vw 5vh; border-radius: 100%; background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); transform: rotate(180deg) rotateY(0); background-position: @r(1%, 100%) @r(1%, 100%); width: @var(--widtha); height: @var(--height); opacity: 0; animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-fill-mode: forwards; animation-delay: @var(--delay);}

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

重点是:before和:after里面的最后三行,是用来实现动画效果的。

cubic-bezier()控制动画的速度,使得雨滴落到玻璃窗的效果更逼真

animation-delay 雨点出现的时间随机,同样是为了效果更逼真,逼真的效果真麻烦

再来看看raindrop-fall的@keyframe设置

 

瓦特出生在一个机械工匠世家,从小就接触了很多有关机械的知识,并对这些知识进行了深入研究。瓦特长大后,从事机械修理工作,并在这一行显示出了过人的才能。1756年,瓦特来到格拉斯哥大学当一

@keyframes raindrop-fall { 0% { opacity: 0; transform: rotate(180deg) scale(2.5, 2.3) rotateY(0); } 100% { opacity: 1; transform: rotate(180deg) scale(1, 1) rotateY(0); }}

总结

以上所述是小编给大家介绍的CSS实现雨滴动画效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

1、凿壁偷光汉朝元帝时的匡衡,从小喜好读书e5a48de588b6e799bee5baa6e997aee7ad9431333431346465。可是家里很穷,连饭都吃不饱,哪有钱上学读书呢?他只好白天干活,晚上自己学习。家里没有钱买灯油,怎么办呢?匡衡没有向困难屈服,想出了一个办法:在墙壁上凿了个小洞,借邻居家照射过来的微弱灯光看书学习。他勤奋刻苦,学到了许多知识,后来做了宰相。2、马云坚持不懈学习1999年的阿里巴巴创办者马云,对梦想从不放弃。他曾经想考重点小学,但却失败了;考重点中学也失败了;考大学更是考了三年才考上;想念哈佛大学也没有成功。但他有坚持不懈,勇往直前的精神,俗话说:“宝剑锋从磨砺出,梅花香自苦寒来。他通过自已的努力,最终成功了。他说:梦想,要脚踏实地,和眼泪是息息相关的。3、鲁迅嚼辣椒驱寒鲁迅先生从小认真学习。少年时,在江南水师学堂读书,第一学期成绩优异,学校奖给他一枚金质奖章。他立即拿到南京鼓楼街头卖掉,然后买了几本书,又买了一串红辣椒。每当晚上寒冷时,夜读难耐,他便摘下一颗辣椒,放在嘴里嚼着,直辣得额头冒汗。他就用这种办法驱寒坚持读书。由于苦读书,后来终于成为我国著名的文学家。4、海伦·凯勒为梦想坚持不懈海伦·凯勒双目失明、两耳失聪,却努力的从一个让人同情默默无闻的小女孩变成让全世界尊敬的女强人。如果生活真的不公平,那么,生活对她的不公平可谓到了极致。她完全可以放弃她的梦想躲在阴暗的角落里放声痛哭,没有人会责怪她,她也完全可以躺在床上或坐在轮椅上,像一个植物人一样由人服侍。可是这一切,她都没有做,她只是吃力的在老师的帮助下学习盲语,触摸着事物,仅仅凭着她永不言弃的信念和坚持不懈的意志。她把她理想的天空涂上了人生最亮的色彩。5、唐伯虎潜心学画唐伯虎是明朝著名的画家和文学家,小的时候在画画方面显示了超人的才华。唐伯虎拜师,拜在大画家沈周门下,学习自然更加刻苦勤奋,掌握绘画技艺很快,深受沈周的称赞。不料,由于沈周的称赞,这次使一向谦虚的唐伯虎也渐渐地产生了自满的情绪,沈周看在眼中,记在心里,一次吃饭,沈周让唐伯虎去开窗户,唐伯虎发现自己手下的窗户竟是老师沈周的一幅画,唐伯虎非常惭愧,从此潜心学画内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css3 中filter(滤镜)属性使用详解
  • css3媒体查询中device-width和width的区别详解
  • css3 flex实现div内容水平垂直居中的几种方法
  • 浅析css3 中的 transition,transform,translate之间区别和作用
  • css3 中translate和transition的使用方法
  • css3 不定高宽垂直水平居中的几种方式
  • 使用 css3 中@media 实现网页自适应的示例代码
  • css3属性 line-clamp控制文本行数的使用
  • 利用css3的3d效果制作正方体
  • css3 transform导致子元素固定定位变成绝对定位的方法
  • 关于执着的名人事例
  • 名人古人自律成材的故事
  • 关于科技发展利大的事例
  • 《愿望的实现》的故事
  • 达芬奇的小故事
  • 找有一个是说蚂蚁团结逃出火团的故事
  • 瓦特的故事
  • 温柔的诱惑这部电视剧第二个故事讲述的是个什么事呢
  • 迪士尼公主童话故事
  • 秦时明月 故事简介 五部都要
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css雨滴css3 中filter(滤镜)属性使用详解css3媒体查询中device-width和width的区别详解css3 flex实现div内容水平垂直居中的几种方法浅析css3 中的 transition,transform,translate之间区别和作用css3 中translate和transition的使用方法css3 不定高宽垂直水平居中的几种方式css3 transform导致子元素固定定位变成绝对定位的方法css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分css3设置box-pack和box-align让div里面的元素垂直居中css3 中filter(滤镜)属性使用详解css3媒体查询中device-width和width的区别详解css3 flex实现div内容水平垂直居中的几种方法浅析css3 中的 transition,transform,translate之间css3 中translate和transition的使用方法css3 不定高宽垂直水平居中的几种方式使用 css3 中@media 实现网页自适应的示例代码css3通过scale()、rotate()实现放大、旋转css3属性 line-clamp控制文本行数的使用用css3实现转换过渡和动画效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved