纯CSS3写的10个不同的酷炫图片遮罩层效果

纯CSS3写的10个不同的酷炫图片遮罩层效果

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下

在线预览

下载地址

实例代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>纯CSS3写的10个不同的酷炫图片遮罩层效果</title>

        <link rel="stylesheet" type="text/css" href="css/demo.css" />

        <!--必要样式-->

        <link rel="stylesheet" type="text/css" href="css/style_common.css" />

        <link rel="stylesheet" type="text/css" href="css/style1.css" />

    </head>

    <body>

        <div class="main">

            <div class="view view-first">

                <img src="images/1.jpg" />

                <div class="mask">

                    <h2><a href=‘#‘>PHP中SESSION和COOKIE基本用法</a></h2>

                    <p>在项目中我们会经常用到Session和Cookie,比如用户登录验证、记录用户浏览历史,存储购物车数据,限制用户会话有效时间等。今天我们介绍下PHP是如何操作Session和Cookie的。</p>

                    <a href="#" class="info">Read More</a>

                </div>

            </div>

            <div class="view view-first">

                <img src="images/2.jpg" />

                <div class="mask">

                    <h2><a href=‘#‘>HTML5制作简单的钟表</a></h2>

                    <p>今天我们用canvas标签并配合javascript来制作一个漂亮的时钟</p>

                    <a href="#" class="info">Read More</a>

                </div>

            </div>

            <div class="view view-first">

                <img src="images/3.jpg" />

                <div class="mask">

                    <h2><a href=‘#‘>jQuery拉伸搜索框</a></h2>

                    <p>今天分享一个CSS3+jQuery制作一个可伸缩功能的搜索框。</p>

                    <a href="#" class="info">Read More</a>

                </div>

            </div>

            <div class="view view-first">

                <img src="images/4.jpg" />

                <div class="mask">

                    <h2><a href=‘#‘>CSS3不同背景颜色的圆角按钮</a></h2>

                    <p>今天分享下用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮。</p>

                    <a href="#" class="info">Read More</a>

                </div>

            </div>

        </div>

    </body>

</html>

 (转载)http://www.cnblogs.com/niuboren/p/6096389.html

时间: 2024-10-08 11:13:21

纯CSS3写的10个不同的酷炫图片遮罩层效果的相关文章

纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

分享10种风格迥异的全屏遮罩层效果

今天,我们想给大家分享一些全屏遮罩效果的灵感.像任何其它的UI组件一样,网页设计不断有新的趋势和风格出现,我们想尝试的遮罩有一些微妙的,还有奇特的效果.这些遮罩的特别之处在于,他们没有像模态窗口那样固定大小而是占据整个屏幕,因此创建效果时,人们必须考虑到这一点. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10

使用css3写出来的表情包,酷酷的!!!

纯css3写的表情包大家可以封装一下打包自己用哟,哎 大家见谅了,我是大老粗,随后会自定义页面编辑,这样看到太丑陋了 html: css: .emoji { width: 120px; height: 120px; margin: 15px 15px 40px; background: #FFDA6A; display: inline-block; border-radius: 50%; position:relative; } .emoji:after { position: absolute

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

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

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

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3

全屏遮罩层效果(10种)

在线演示      源码下载

推荐10款纯css3实现的实用按钮

在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1.一款基于css3非常实用的鼠标悬停特效 这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 No2.一款基于css3的简单的鼠标悬停按钮 这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果