hi，大家好，我是拾光。
今天给大家带来的内容是蒙板使用以及纯CSS实现照片的过渡效果【淡入淡出】，镂空文字以及翻转文字的制作。
开发中可能会使用到，就算是使用不到，但是小编觉得也挺有趣的东西。
希望大家喜欢、
先给大家上效果图：
1、
2、
3、
4、
下面的代码按照顺序来哦~
HTML：
<body>
<div class="element"></div>
<div class="shadow"></div>
<p>Best wishes to you</p>
<button>按钮</button>
<a href="">按钮</a>
<marquee>这里是跑马灯文字</marquee>
</body>
CSS：
/*小编亲测：以下功能谷歌浏览器全部支持，IE不支持。火狐支持镂空字体*/
/*供大家研究学习，实际开发中用到的不是很多。有需求也可以自己增加，体验一下。*/
/*以后还会继续发布其他功能模块的哦~*/
/*希望大家继续关注*/
*{
font-family: "微软雅黑";
}
/*蒙板*/
.element{
background: url(images/6.jpg) repeat;
width: 400px;
height: 600px;
/*下面的数值自己做测试哦~*/
-webkit-mask: url(images/6.jpg) 0 100px;
}
/*渐变*/
.shadow{
width: 400px;
height: 400px;
background: url(images/12.jpg) no-repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
/*镂空字体*/
p{
font-size: 50px;
color: transparent;
-webkit-text-stroke: 1px red;
}
/*反向按钮*/
button{
-webkit-box-reflect: below;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
margin-bottom: 100px;
outline: none;
border: none;
}
/*反向按钮*/
a{
width: 100px;
height: 200px;
display: block;
border: 1px #222;
-webkit-box-reflect: right 0;
}
/*跑马灯效果。自己可以去w3c看API，可以自定义多个值，例如速度、方向等*/
/*在此给大家展示的是：当网页进行比例放大时，字体的大小没有变化。大家可以试试哦~*/
marquee{
/*设置网页被放大时，字体不被放大*/
zoom: reset;
}
今天的内容就到这里了哦~
看完了之后觉得是否强大呢，迫不及待的试试了呢？
您还可以阅读以下文章哦~
双11到了，赶快体验一下吧~