css3遮罩——新功能引导层
2016-04-29 16:44
501 查看
看了张鑫旭的《腾讯微云黑色遮罩引导蒙版更好的CSS实现方式》和《CSS3下的圆形遮罩效果实现与应用》,终于搞明白了遮罩新功能引导层是如何实现的。
原文链接:http://www.zhangxinxu.com/wordpress/?p=5290 http://www.zhangxinxu.com/wordpress/?p=2118
要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素的四个border值设置的非常大,铺满整个屏幕,这样就实现了页面遮罩部分镂空的效果。
让遮罩层的的宽度和高度等于目标元素的宽度和高度,剩下的遮罩效果就是合理设置遮罩层四个border的值的大小,使遮罩层铺满整个屏幕。
我们想把引导效果做的更加好看一下,制作成椭圆的效果,需要用到css3的border-radius:50%;并且圈圈内带有模糊效果,如何实现?就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签,里面重新生成一个大尺寸伪元素,实现内层的高亮椭圆内边缘模糊效果,最终实现的效果如下如图所示:
由于我们的目标元素的宽度和高度是不固定的,我们可以设置各种元素的高亮效果,就不用在手动设置border的宽度来配合目标元素的宽度和高度,有没有一个通用的方法?这就需要用JS来实现啦,js的实现思路如下:
1 获取目标元素的宽度和高度,targetWidth,targetHeight
2 获取页面的宽度和高度,pageWidth,pageHeight
3 获取目标元素在页面中的位置,offsetTop,offsetLeft(目标元素距离 页面顶部的距离,距离页面左边的距离,包括页面的滚动条)
4 设置遮罩层的宽度和高度等于目标元素的宽度和高度
5 最重要的一步,设置 遮罩层的四个边框的大小是决定效果至关重要的一步。
上边框 = offsetTop
右边框 = pageWidth - targetWdith - offsetLeft
下边框 = pageHeight - targetHeight - offsetTop
左边框 = offssetLeft
6 针对于浏览器的resize事件,同步实现遮罩边框的改变
源码如下:
完全是张鑫旭的思路和代码,
就拿来用了,算是学到了一招,弄明白了。有空了,用JQ再来写一遍。
原文链接:http://www.zhangxinxu.com/wordpress/?p=5290 http://www.zhangxinxu.com/wordpress/?p=2118
要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素的四个border值设置的非常大,铺满整个屏幕,这样就实现了页面遮罩部分镂空的效果。
让遮罩层的的宽度和高度等于目标元素的宽度和高度,剩下的遮罩效果就是合理设置遮罩层四个border的值的大小,使遮罩层铺满整个屏幕。
我们想把引导效果做的更加好看一下,制作成椭圆的效果,需要用到css3的border-radius:50%;并且圈圈内带有模糊效果,如何实现?就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签,里面重新生成一个大尺寸伪元素,实现内层的高亮椭圆内边缘模糊效果,最终实现的效果如下如图所示:
由于我们的目标元素的宽度和高度是不固定的,我们可以设置各种元素的高亮效果,就不用在手动设置border的宽度来配合目标元素的宽度和高度,有没有一个通用的方法?这就需要用JS来实现啦,js的实现思路如下:
1 获取目标元素的宽度和高度,targetWidth,targetHeight
2 获取页面的宽度和高度,pageWidth,pageHeight
3 获取目标元素在页面中的位置,offsetTop,offsetLeft(目标元素距离 页面顶部的距离,距离页面左边的距离,包括页面的滚动条)
4 设置遮罩层的宽度和高度等于目标元素的宽度和高度
5 最重要的一步,设置 遮罩层的四个边框的大小是决定效果至关重要的一步。
上边框 = offsetTop
右边框 = pageWidth - targetWdith - offsetLeft
下边框 = pageHeight - targetHeight - offsetTop
左边框 = offssetLeft
6 针对于浏览器的resize事件,同步实现遮罩边框的改变
源码如下:
<style> html{width:100%;height:100%;} *{margin:0;padding:0;}body{background:#f2f2f2;width:100%;height:100%;} .cover { display: none; position: absolute; width: 0; height: 0; left: 0; top: 0; right: 0; bottom: 0; border: 0 solid #000; opacity: .5; filter: alpha(opacity=5); z-index: 9; /* 过渡效果 */ transition: all .25s; /* 边缘闪动问题fix */ box-shadow: 0 0 0 100px #000; overflow: hidden; } .cover::before { content: ''; width: 100%; height:100%; border-radius: 50%; border: 400px solid #000; position: absolute; left: -400px; top: -400px; box-shadow: inset 0 0 5px 2px rgba(0,0,0,.5); } /* IE7, IE8 img */ .cover > img { width: 100%; height: 100%; } a{display: block;width:100px;height:50px;line-height: 50px;font-size:12px;} #add{height:50px;line-height: 50px;margin-top:10px;background:#fff;} #aa{width:150px;height:50px;line-height:50px;margin-top:10px;} span{display:inline-block;} </style> <div id="cover" class="cover"></div> <div id="aa">请添加您的收货地址</div><br><br> <span id="bb">您的姓名</span><br><br><br> <span id="cc">请添加您的电话号码3请添加您的电话号码</span>
<script> var coverGuide = function(cover, target) { var body = document.body, doc = document.documentElement; if (cover && target) { // target size(width/height) var targetWidth = target.clientWidth, targetHeight = target.clientHeight; // page size var pageWidth = doc.scrollWidth, pageHeight = doc.scrollHeight; // offset of target var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop), offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft); // set size and border-width cover.style.width = targetWidth + 'px'; cover.style.height = targetHeight + 'px'; cover.style.borderWidth = offsetTop + 'px ' + (pageWidth - targetWidth - offsetLeft) + 'px ' + (pageHeight - targetHeight - offsetTop) + 'px ' + offsetLeft + 'px'; cover.style.display = 'block'; // resize if (!cover.isResizeBind) { if (window.addEventListener) { window.addEventListener('resize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; } else if (window.attachEvent) { window.attachEvent('onresize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; // IE7, IE8 box-shadow hack cover.innerHTML = '<img src="guide-shadow.png">'; } } } }; var elCover = document.getElementById('cover'); var a = document.getElementById("aa"); var arrElTarget = [a, document.getElementById('bb'), document.getElementById('cc') ], index = 0; coverGuide(elCover, a); elCover.onclick = function() { index++; if (!arrElTarget[index]) { index = 0; } coverGuide(elCover, arrElTarget[index]); }; </script>这样就可以实现一个页面多个高亮区域不停的来回调动
完全是张鑫旭的思路和代码,
就拿来用了,算是学到了一招,弄明白了。有空了,用JQ再来写一遍。
相关文章推荐
- css中font-variant与text-transform的区别
- 前端CSS3选择器
- 使用CSS border绘制箭头
- 子元素使用float后使父元素有高度的方法
- tableView plain样式和group样式区别
- CSS3-01 简介
- CSS3 块级元素,文本溢出操作 -webkit-line-clamp
- css3 box-orient box-pack box-align
- CSS多列布局
- CSS垂直居中精华总结
- CSS-标准盒模型 & 怪异盒模型
- css sprites 图片精灵自动生成 插件
- CSS实现镂空遮罩引导层
- CSS3基础第三篇(布局相关,媒体查询,用户界面)
- CSS的margin塌陷(collapse)
- CSS颜色
- css img标签高度等于宽度.
- css类与伪类 .class:link{}
- 你们有关注过HTML标签的默认样式和浏览器默认样式吗?
- 160427、CSS3实战笔记--多列布局