当前位置: 首页 > 编程日记 > 正文

巧用CSS的Wave滤镜

作者:冯永曜
"wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果。它共有5个参数:
"add":表示是否要把对象按照波形式样扭曲,它只有两个值,即"true"和"false",默认值是"true(非0)",当然你也可以修改它的值为"false"("0")。
"freq":是波纹的频率,也就是指定在这个对象上面一共需要产生多少个完整的波纹。
"lightstrength":参数可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值。
"phase":参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0,但是你可以改变它。"phase"的值从0到100之间,这个数值代表开始时的偏移量取自波长的百分比值。 例如如果值为25那么正弦波就从90度的方向开始。
"strength":表示波形的振幅大小,也可以简单的理解为扭曲的程度。下面我们用"wave"滤镜来做几个特效:

1、波形文字
把"wave"滤镜加载到文字上,就可得到波形文字的效果,请看:

图1 文字上加载"wave"滤镜效果

上面的效果还是很有意思的,不是吗?制作起来却非常简单,具体步骤如下:
1)制作一个"wave"滤镜,我们给它取名为"wave1",制作完备,在源代码的< head >与< /head >之间将有如下的代码:
< style >
< --!
.wave1 { filter:wave (add=true, freq=6, lightstrength=10 , phase=0 ,strength=3) }
-- >
< /style >
2)插入一个表格,在表格中输入文字,并设置好文字的字号和颜色。
3) 在< td >上加载"wave"滤镜,这时你看到的这样的一行代码"< td class="wave1" >",按F12就能看到效果了。
根据我的实践,滤镜加载到 < td >上效果比较好。另外要注意的是:在文字上使用"wave"滤镜时,一般把"lightstrength"的值设置为"0",否则文字的颜色将发生变化,影响效果;"strength" 的值在"5"左右,不然的话,文字就看不清楚了;文字的字号要稍大一些,不然的话效果不明显。

2、弯曲的小花
把"wave"滤镜加载到图片上,将使图片产生波形弯曲的效果,请看:

加载"wave"滤镜后的效果

上面左边一幅是原图,中间一幅图上加载了"wave"滤镜,代码是.wave1 { filter:wave(add=true, freq=6, lightstrength=0 , phase=0 ,strength=3) } ,右边一幅图也加载了滤镜,但代码是.wave2 { filter:wave(add=true, freq=6, lightstrength=30 , phase=0 ,strength=3) },也就是把"lightstrength"设置为 "30"了,所以效果也就有了明显的变化。由于可以把"wave"滤镜直接加载到图片上,所以制作起来更方便。具体制作步骤如下:
1)插入一张图片。
2)用鼠标点一下图片,再在快速启动栏上点一下CSS图标,在弹出的对话框中选择"wave"滤镜,就OK了,就这么简单!
我在这里是用了一张有透明背景的gif图片,若是用普通图片也一样,而且边框还有波形阴影,请看下图:


一般来讲,"lightstrength"的值在"30"左右,要根据实际情况多调试几次,以获得最佳效果。

相关文章:

关于vmware虚拟机linux的扩容问题

Linux的VM虚拟机扩展磁盘空间 &#xff08;1&#xff09;vmware软件中编辑虚拟机设置中又扩容的选项&#xff0c;这里不做介绍。 &#xff08;2&#xff09;启动VM环境下的linux操作系统,添加新分区&#xff0c;需要root账号身份。 3.1 【fdisk -l】 extend 对应的是sda4&#…

用Python玩转PPT!

作者 | 陈熹来源 | 早起Python今天本文将基于第三方库pptx&#xff0c;详细讲解如何使用Python操作Office全家桶最后一位——PPT。安装pptx是一个非标准库&#xff0c;需要在命令行中安装pip install python-pptx要注意&#xff0c;安装的时候是python-pptx&#xff0c;而实际调…

贝塞尔曲线学习

贝塞尔曲线是UIkit中的一个关于图形绘制的类 贝塞尔曲线可以绘制矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线&#xff0c;以及它们的混合图形。 系统常用的内置方法 // 创建基本路径 (instancetype)bezierPath; // 创建矩形路径 (instancetype)bezierPathWithRect…

巧用CSS的 Mask 滤镜

作者&#xff1a;冯永曜在网页制作中使用CSS&#xff0c;这已是众所周知&#xff0c;而关于CSS滤镜使用的却介绍得不多。其实&#xff0c;0CSS的滤镜在Dreamweaver3中用起来也很方便&#xff0c;且能使文字产生一种类似图象的效果&#xff0c;但比起图片来可就瘦小多了。不信&a…

Google Analytics功能篇 - 如何跟踪邮件打开率与点击率

有些朋友总会问我&#xff0c;在作邮件营销时&#xff0c;应该如何来跟踪这些流量呢&#xff1f;以便能知道发送的成功率&#xff0c;打开率&#xff0c;点击邮件中的链接数量&#xff0c;怎么实现这样的功能呢&#xff1f; 另外&#xff0c;有一个做邮件群发的朋友给我说&…

Google排名第一的技术,引数十万人关注!网友:差点我就放弃了!

毋庸置疑&#xff0c;Python越来越被认可为程序员新时代的风口语言。无论是刚入门的程序员&#xff0c;还是年薪百万的 BATJ 的大牛都无可否认&#xff1a;Python的应用能力是成为一名码农大神的必要项。 所以&#xff0c;很多程序员把Python当做第一语言来学习。 但对于Python…

python的zip函数

zip()函数 它是Python的内建函数&#xff0c;(与序列有关的内建函数有&#xff1a;sorted()、reversed()、enumerate()、zip()),其中sorted()和zip()返回一个序列(列表)对象&#xff0c;reversed()、enumerate()返回一个迭代器(类似序列) 1 >>> type(sorted(s)) 2 <…

Nginx 搭建负载均衡

1.其实我这里并不是访问量很大&#xff0c;主要用于版本升级和维护而搭建的 2.忽略nginx安装和jetty的安装配置&#xff0c;我是在一台Linux服务器上装了两个jetty服务&#xff0c;部署两套jetty服务很简单&#xff0c;其实改改jetty.sh 脚本即可 JETTY_HOME/opt/jetty2/ JETT…

巧用CSS的Glow滤镜

作者&#xff1a;冯永曜对一个对象使用“glow”滤镜后&#xff0c;这个对象的边缘就会产生类似发光的效果&#xff0c;这种效果在PHTOSHOP中做起来都比较麻烦&#xff0c;而在DW3中用CSS的“glow”滤镜来制作却是如此地简单&#xff0c;而且节约不少字节。“glow”滤镜只有两个…

10大经典排序算法,20+张图就搞定

作者 | 李肖遥来源 | 技术让梦想更伟大冒泡排序简介冒泡排序是因为越小的元素会经由交换以升序或降序的方式慢慢浮到数列的顶端&#xff0c;就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样&#xff0c;故名冒泡排序。复杂度与稳定性思路原理以顺序为例从第一个元素开始一…

C# MoreLinq 扩展安装

为什么80%的码农都做不了架构师&#xff1f;>>> http://blog.csdn.net/lee576/article/details/42716905 MoreLinq是一个对Linq to object的扩展类库,它是一个开源项目(http://code.google.com/p/morelinq/source/browse 天朝已对google全力封禁,所以要翻墙)&#…

IOS学习博客不错的大部分是原创

http://blog.csdn.net/iukey/article/category/955062

巧用CSS的Light滤镜

作者&#xff1a; 冯永曜Light滤镜能产生一个模拟光源的效果&#xff0c;但使用它要通过调用它的“方法&#xff08;Method&#xff09;”来实现&#xff0c;这就要用到一些Javascrpt知识&#xff0c;虽然有一点难度&#xff0c;但产生的效果也是奇特的&#xff0c;你看看下面的…

没有场景,不做单点技术输出,360数科如何做金融科技的最佳实践?

作者 | Just 出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09; 从互联网金融公司转变为金融科技公司&#xff0c;品牌升级后的360数科强化了“科技”的外衣。 在近期的首个360数科技术开放日&#xff0c;360数科CEO吴海生表示&#xff0c;他们已经做好金融科技的最佳…

react构建淘票票webapp,及react与vue的简单比较。

前言 前段时间使用vue2.0构建了淘票票页面&#xff0c;并写了一篇相关文章vue2.0构建淘票票webapp&#xff0c;得到了很多童鞋的支持&#xff0c;因此这些天又使用react重构了下这个项目&#xff0c;目的无他&#xff0c;只为了学习和共同进步&#xff01; 项目技术栈 前端技术…

【机器学习】机器学习算法优缺点对比(汇总篇)

作者 | 杜博亚来源 | 阿泽的学习笔记「本文的目的&#xff0c;是务实、简洁地盘点一番当前机器学习算法」。文中内容结合了个人在查阅资料过程中收集到的前人总结&#xff0c;同时添加了部分自身总结&#xff0c;在这里&#xff0c;依据实际使用中的经验&#xff0c;将对此模型…

PLSQL developer 连接不上64位Oracle 解决办法

在64位Windows2003上安装Oracle后&#xff0c;用PLSQL developer去连接数据库出现报错&#xff1a; Could not load "……\bin\oci.dll" OCIDLL forced to…… LoadLibrary&#xff08;……oci.dll&#xff09; returned 0 原因&#xff1a; oci.dll是64位的&#xf…

Docker 使用教程

概括  Docker与传统虚拟机的区别 与传统虚拟机的区别  Docker的安装 的安装  Docker daemon &#xff0c; client &#xff0c; containerd  镜像与容器操作  容器运行配置  Docker网络配置 网络配置  Alpine Docker Image  制作自己的 Docker Image …

话说CSS滤镜

作者&#xff1a;http://www.swtv.com.cn/adjunct/nr/css/css.htmAlpha 透明层次&#xff1a;滤镜效果语法&#xff1a;STYLE"filter:filtername(parameter1,parameter2,parameter3...)"其中&#xff1a;filtername为滤镜的名称&#xff1b;parameter1,parameter2等为…

面向隐私AI的TensorFlow深度定制化实践

作者 | Rosetta团队出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;之前我们整体上介绍了基于深度学习框架开发隐私 AI 框架中的工程挑战和可行解决方案。在这一篇文章中&#xff0c;我们进一步结合 Rosetta 介绍如何定制化改造 TensorFlow 中前后端相关组件&#xf…

”拿来搞笑“的大学生活

”拿来搞笑“这词&#xff0c;是我舍友对我说过好几遍&#xff0c;我才觉得这词用来形容我大学的生活再恰当不过了&#xff0c;感谢他送给我这个词。 下面就列一下我大学期间”拿来搞笑“的事情&#xff1a; —&#xff1a;无偿捐血400毫升。当时认为是一件微不足道的事情&…

巧用CSS的Border属性

。作者&#xff1a;冯永曜 来源&#xff1a;黄山村夫 制作过网页的人都有为画线而烦恼的经历&#xff0c;本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”&#xff08;画边框&#xff09;&#xff0c;它是CSS的一个属性&#xff0c;用它可以给能确定范围的HTML标…

阿里资深算法专家:如何突围大厂算法面试?

2020 届秋招&#xff0c;算法岗灰飞烟灭。最聪明的应届生 / 程序员 &#xff0c;都在极度竞争中&#xff0c;面临着前所未有的激烈 PK 。学生因“内卷”而迷茫&#xff1b;初级程序员遇职业发展瓶颈而困惑...面对重重压力&#xff0c;苦不堪言。to do list 上写满计划&#xff…

乡下人最嘲笑城里人的16件事,无语了!

一、出门「taxi」&#xff0c;乘电梯上七楼的健身房&#xff0c;然后在跑步机上挥汗如雨。 二、半夜上网&#xff0c;去歌厅、舞厅&#xff0c;困了不睡觉。之后失眠&#xff0c;再吃安眠药。 三、管儿子叫「小兔崽子」&#xff0c;管宠物狗叫儿子。 四、挑最有特色的饭店吃…

2017浅谈面试(一)

2017给自己一个目标&#xff0c;制定一份计划&#xff0c;新的开始&#xff0c;跟随创业团队风险无处不在&#xff0c;不过还是要选好Boss。 2016一个煎熬&#xff0c;悲剧&#xff0c;没发工资的日子&#xff0c;一等就等了5个月&#xff0c;零散的就拿到了一个半月工资&#…

乘风破浪的PTM:两年来预训练模型的技术进展

作者 | 张俊林来源 | 深度学习前沿笔记专栏Bert模型自18年10月推出&#xff0c;到目前为止快两年了。它卜一问世即引起轰动&#xff0c;之后&#xff0c;各种改进版本的预训练模型&#xff08;Pre-Training Model, PTM&#xff09;与应用如过江之鲫&#xff0c;层出不穷。Bert及…

DW中CSS属性详解

作者&#xff1a;未知 来源&#xff1a;5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性&#xff0c;Dreamweaver把这些属性分为Type&#xff08;类型&#xff09;、Background&#xff08;背景&#xff09;、Block&#xff08;块&#xff09;、Box&a…

第十周项目5:贪心的富翁

上机内容&#xff1a;用循环语句完成累加 上机目的&#xff1a;学会循环语句的使用 /* * Copyright (c) 2012, 烟台大学计算机学院 * All rights reserved. * 作 者&#xff1a;孙锐 * 完成日期&#xff1a;2012 年 10 月 31 日 * 版 本 号&…

python requests返回的json对象用json.loads()时转为字典时编码变为了unicode

2019独角兽企业重金招聘Python工程师标准>>> 1.使用simplejson&#xff0c;loads的对象为str&#xff0c;否则还是会转码unicode import simplejson url "" payload {} headers {} r requests.post(url, datapayload, headersheaders)result simplej…

关于Dreamweaver乱码问题的解决方案

原作者&#xff1a;南宫彩虹出处&#xff1a;5D多媒体出现乱码&#xff0c;大致为两种情况&#xff1a; 一是没有标明主页制作所用的文字&#xff0c;这种情况下很简单就可以解决&#xff0c;在<HEAD>区加上<META http-equivContent-Type content"text/html; cha…