css3实现ps蒙版效果以及动画,炫酷吊炸天!

css3越来越强大,使用css也可以做越来越多意想不到的效果。

css3实现了ps的蒙版效果,炫酷叼炸天的技能,必须要分享出来啊!

实现原理

这个动画,其实也并不复杂。它使用background-clip实现了文字蒙版的效果,然后结合了背景图片的animation实现了如上图所示的文字蒙版动画。

用css3做蒙版效果
常见的有两种,一种是图形的,另一种是文字的。

图形蒙版

这里要使用的到时clip-path,它的作用是根据你指定的图形的轮廓来保留剩余的区域,如果你制定的图形是圆形,那么剩余的就是个圆形。

它有个特点就是,你可以把你的盒子模型定义为不规则的图形。

我们都知道原来的css只允许我们把元素定义成矩形和正方形,又可以在矩形区域内嵌套其他的矩形或者正方形元素。而现在我们可以定义一个不规则的图形,然后在这个不规则的图形内定义其他的元素。

这样说可能还是有点儿含糊。假如你在一个元素内填充满文字,以前只能沿着矩形或者正方形的边缘填充,而现在使用clip-path可以使文字沿着不规则的图形的边缘填充。

具体可参考文字环绕

接着说图形蒙版,有两种实现:

一种是保留剪切图形轮廓内的内容,可以参考shpape-masking

另一种使保留剪切图内之外的内容,可参考Reverse clip path。这个动画效果是由背景的gif和视频结合的,当然也可以使用css3的animation。

文字蒙版

文字蒙版使用的使css3中的backgorund-clip,这个属性支持border-boxpadding-boxcontent-boxtext等属性,具体使用可参考mdn background-clip

它和clip的效果类似,都是剪切后剩余部分的内容,text 这个属性值比较特殊,针对的是元素内的文字,其他的针对的是元素内内容的显示区域。

背景的动画很简单就是一个animation动画。

参考示例:Merry Christmas

这里推荐一下我的学习--交流--q-u-n-:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。

原文地址:http://blog.51cto.com/14138686/2334167

时间: 2024-10-12 09:49:44

css3实现ps蒙版效果以及动画,炫酷吊炸天!的相关文章

流量水波浪效果,超级炫酷暖人

流量水波浪效果,超级炫酷暖人 只有效果,大家择善而从.好看的给点个赞就好了 下载地址:http://www.devstore.cn/code/info/801.html 运行截图: 热门源码下载: 高仿京东商城 Android快速开发不可或缺的11个工具类 Android快速开发框架LoonAndroid Android应用源码比较不错的新闻客户端 版权声明:本文为博主原创文章,未经博主允许不得转载.

流量水波浪效果,超级炫酷暖

流量水波浪效果,超级炫酷暖人 只有效果,大家择善而从.好看的给点个赞就好了 下载地址:http://www.devstore.cn/code/info/801.html 运行截图:

CSS3 mask 遮罩蒙版效果

mask demo效果演示:http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性: -webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/ -webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat -webkit-mask-position:x y; -webkit-mask-clip:border | padding |

CSS+DIV:实现炫酷网页样式与布局

虽然之前也接触过HTML和CSS,也做过一段时间的项目,使用过CSS和DIV,但是终究没有体会到这两者融会贯通后,所能达到的效果,远远超乎我的想象. 其实很多写过前端页面的人都知道DIV和CSS其实特别简单,但是要想实现需求中的或者自己心中想象的效果,也决非易事.这里面有很多的技巧,如果你不熟悉和精通,那么你做出的页面将会达不到预期的效果,有时候会特别的难看. 首先我们来看一下DIV是啥玩意? DIV是标记语言HTML中众多标签的一个,但是却是文档页面布局使用最频繁的一个标签.它可定义文档中的分

6种炫酷的CSS3按钮边框动画特效

这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览   源码下载 使用方法 HTML结构 该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作.各种效果非标设置不同的class.例如第一种效果的class为draw. <button class="draw">draw</button> CSS样式 在CSS样式

用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画.向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器.(IE浏览器谢绝观赏~) 1.CSS3实现钟表效果(基于jQuery) 使用CSS3的基本变形特性:rotate,并结合了jQuery这类javaScript框架制作的CSS3时钟效果. 2.模拟时钟 模拟时钟基于过渡web

CSS3悬停效果和动画Hover.css

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after 伪元素.因为使用了CSS3过渡.转换和动画效果,因此只支持 Chrome.Firefox 和 Safari 等现代浏览器. 使用方法很简单: 下载HOVER.CSS      下载地址https://github.com/IanLunn/Hover Download/Install NPM: np

canvas - 炫酷的3D星空

1.国际惯例,先上效果 (⊙o⊙)- 效果图看上去效果并不很炫酷啊,直接戳 这里 看效果吧! 2代码部分 html: <canvas id="canvas" width="1920" height="1080"></canvas> css: *{margin: 0;padding: 0;} /*没啥必须的css*/ js:(这个博主也是够了,那么多的js代码,一点注释都没有,差评!)公子莫慌,由于代码比较多,注释部分就不在

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"