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

这个是纯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="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 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 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 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>

</body>

</html>

　　转载自：http://www.cnblogs.com/niuboren/p/6096389.html

转载于:https://www.cnblogs.com/zhao-bo/p/6099473.html

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

纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
20个纯css3写的logo
2019独角兽企业重金招聘Python工程师标准>>> 随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些 ...
html5鼠标滑过图片图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法在页面中引入boot ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
CSS3实现遮罩层效果
CSS3实现遮罩层效果第一步.创建外层遮罩先写个大盒子 <div id="box"></div> 再把盒子设置为固定定位,top.right.botto ...
纯css和html光芒特效,科技常识：纯CSS3实现给头像加个光芒四射且旋转的背景动画效果...
今天小编跟大家讲解下有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果的相关资料 ...
自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/27362147 阿嚏~~~ 话说本屌丝没啥开发 ...
html遮罩层原理,纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理本片文章的是实现原 ...
html头像在背景中间特效,纯CSS3实现给头像加个光芒四射且旋转的背景动画效果...
HTML代码 HTML代码结构很简单,跟之前那篇文章使用的相同: 复制代码代码如下: WebHek 最外面的div作为父元素,它的position是relative,有固定的高和宽度,有两个子元素:一 ...

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

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

最新文章

热门文章