Home > Article > Web Front-end > 10 different cool image mask layer effects written in pure CSS3

10 different cool image mask layer effects written in pure CSS3

高洛峰Original: 2017-03-16 13:13:212113browse

This is 10 different cool pictures mask layer effects implemented by pure CSS3, you can enjoy them

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

Example code

<!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>

        <p class="main">
            <p class="view view-first">
                <img src="images/1.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>PHP中SESSION和COOKIE基本用法</a></h2>
                    <p>在项目中我们会经常用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会话有效时间等。今天我们介绍下PHP是如何操作Session和Cookie的。</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
            <p class="view view-first">
                <img src="images/2.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>HTML5制作简单的钟表</a></h2>
                    <p>今天我们用canvas标签并配合javascript来制作一个漂亮的时钟</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
            <p class="view view-first">
                <img src="images/3.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>jQuery拉伸搜索框</a></h2>
                    <p>今天分享一个CSS3+jQuery制作一个可伸缩功能的搜索框。</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
            <p class="view view-first">
                <img src="images/4.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>CSS3不同背景颜色的圆角按钮</a></h2>
                    <p>今天分享下用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮。</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
        </p>
    </body>
</html>

The above is the detailed content of 10 different cool image mask layer effects written in pure CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to using css to change the default style of the drop-down list select boxNext article：Introduction to using css to change the default style of the drop-down list select box

See more

10 different cool image mask layer effects written in pure CSS3

Related articles