一个前端如何画各种特效或图案

今天一个朋友问一个问题，有一个需求：需在页面上有一个水滴，会动的水滴，要逼真的那种，这应该怎么画（当前情况下不能使用图片和canvas）

我一惊，这不是很简单吗，细想也对，现在框架满天飞，各种库画特效手到擒来，对于一小部分人来说确实被这种需求乍一看的难住，今天简单记录一下难道一个小特效一般的思路是怎样的

先看一眼最后的dome

即使现在的前端已经涵盖了后端到前端，软件到硬件，但归根到底画页面依然是我们前端开发的一个主方向，作为前端开发（工程师），首先要会的就是画各种奇形怪状，特效满天飞的东西

边做边讲，首先创建两个基础元素，作为背景和水滴，简单给一下样式

接下来以类名为water的div来画水滴效果

首先想，一个水滴是什么样的，找找素材

之后，那对于一个水滴怎么来实现，观察首先水滴是圆的，那就是要依靠border-radius属性，立体感不多说来自于box-shadow，那就简单了

直接开画

拿红色边框表示一下位置，直接通过

border-radius画基础形状

调个阴影，画出水滴的效果

去掉边框看效果

现在来画高光，如此这般的一般使用伪元素

之后简单些个动画，让水滴动起来就好了

最后看一下动起来的效果

一个前端如何画各种特效或图案相关推荐

一个前端的入行故事，零基础，2个月自学入门前端，半年从外包进淘宝
我,Scott,一家创业公司的 CTO. 从业 6 年却很少写文章,近一年来接触了几十个刚毕业的前端新人,也面试了 100 多个前端工程师和 Nodejs 工程师,对于前端发展的这个职业算是有些感触吧 ...
一个前端初学者的2018年终总结 | 掘金年度征文
前言 "本文是一篇个人年终总结",这样听起来会不会高大上一点呢? 如果您正好浏览到这篇总结,可否邀请您认真读完此文.无需您的点赞,但是若能留下您宝贵的建议,是再好不过了. 写这篇 ...
简单上手H5+CSS前端3D酷炫特效源代码
简单上手H5+CSS前端3D酷炫特效个人觉得是这个特效是入手自己做比较简单的一个前端特效代码十分少,也很容易看懂,记得点个关注效果图: H5部分 <!DOCTYPE html> & ...
从0开始搞一个锦鲤游动——画锦鲤
首先大家可以看一下这个鱼的图案一.前期准备 1.新建一个项目 2.将MainActivity的XML文件写成 <?xml version="1.0" encoding=&q ...
一个前端初学者的学习总结
来自:掘金,作者:图图学编程链接:https://juejin.cn/post/6910902229461368840 先来个自我介绍,各位掘金的大佬好,我是前端_图图,没错,是图图.趁着周末的时间 ...
怎样用python绘制简单的图形_用python 画几个简单图案
原博文 2019-11-15 09:44 − 1 turtle turtle这个库真的很好玩,用很简单几行代码就能画出好看的图案,最近无聊翻了翻之前自己画的哈哈哈哈,分享几个代码画一个类似五颜六色的 ...
为什么HR 20分钟就淘汰了一个前端高级工程师？
最近HR小姐姐面了一个前端开发,4 年经验, 应聘的是前端高级开发工程师. 他的简历中提到很多技术点,从 HTML.CSS.JavaScript 再到 Vue.js 和 React 一个都不缺,跨平台 ...
从一个前端项目实践 Git flow 的流程与参考
Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...
python画-如何用Python画各种著名数学图案 | 附图+代码
原标题:如何用Python画各种著名数学图案 | 附图+代码用Python绘制著名的数学图片或动画,展示数学中的算法魅力. Mandelbrot 集代码:46 lines (34 sloc) 1. ...
作为一个前端，可以如何机智地弄坏一台电脑？
有人说,前端的界限就在浏览器那儿. 无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去. 这就像二次元各种炫酷的毁灭世界,都不会导致三次元的世界末日. 然而,作为一个前端,我发现是有方式打 ...

一个前端如何画各种特效或图案

一个前端如何画各种特效或图案相关推荐

最新文章

热门文章