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


在线预览

下载地址

实例代码

<!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="data: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="data: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="data: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="data: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>

　　

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

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

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  3. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

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

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  5. 使用纯 CSS 实现超酷炫的粘性气泡效果

    最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...

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

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  7. 使用纯css3写出来的表情包 (^v^)

    效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://2 ...

  8. 纯CSS3写一个立方体并在鼠标悬停的时候无限循环旋转

  9. CSS3一个酷炫的加载效果

    上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的. CSS代码: <style type="text/css"> .loader{ position: ...

随机推荐

  1. MySQL(四) 数据表的插入、更新、删除数据

    序言 数据表的插入.更新.删除非常简单,但是简单的也要学习,细节决定成败. ---WH 一.插入数据 格式:INSERT INTO 表名(字段名...)VALUES(值...); 创建环境 使用per ...

  2. SSIS Component的ValidateExternalMetadata属性

    ValidateExternalMetadata Property Indicates whether the component validates its column metadata agai ...

  3. TSql HierarchyID 数据类型用法

    HierarchyID 数据类型是一种长度可变的系统数据类型.可使用 HierarchyID 表示层次结构中的位置.类型为 HierarchyID 的列不会自动表示树,由应用程序来生成和分配 Hier ...

  4. .NET面试题解析(04)-类型、方法与继承

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 做技术是清苦的.一个人,一台机器,相对无言,代码纷飞,bug无情.须梦里挑灯,冥思苦想,肝血暗耗,板凳坐穿 ...

  5. MongoDB的学习--聚合

    最近要去的新项目使用mysql,趁着还没忘记,总结记录以下MongoDB的聚合. 聚合是泛指各种可以处理批量记录并返回计算结果的操作.MongoDB提供了丰富的聚合操作,用于对数据集执行计算操作.在  ...

  6. [c++] Associative Containers

    关联容器 和 顺序容器 的本质差别在于: 关联容器通过键(key)存储和读取元素,而顺序容器则通过元素在容器中的位置顺序存储和访问元素. Reference: http://www.cnblogs.c ...

  7. Visual Studio 2010安装教程

    VS2010是一个集C++,VB,C#,等编程环境于一身的集成开发环境,功能强大,能有效提高编程效率.针对 Visual Studio 2010 完全重新设计了帮助查看器.您可以使用首选的 Web 浏 ...

  8. 如何启动免安装版Tomcat并将Tomcat添加到服务中

    1.安装jdk,并配置环境变量 (1)在Path中添加 F:\Program Files\Java\jdk1.8.0_25\bin (2)添加一个JAVA_HOME变量,变量值为F:\Program ...

  9. 【Java基础】序列化与反序列化深入分析

    一.前言 复习Java基础知识点的序列化与反序列化过程,整理了如下学习笔记. 二.为什么需要序列化与反序列化 程序运行时,只要需要,对象可以一直存在,并且我们可以随时访问对象的一些状态信息,如果程序终 ...

  10. [C++][操作符]四种显示转换操作符

    整理了C++ Primer中提到的四种显示转换,用思维导图写出来,是不是很清晰O(∩_∩)O.