xml地图|网站地图|网站标签 [设为首页] [加入收藏]
腾讯微云黑色遮罩引导蒙版更好的CSS实现方式,
分类:web前端

rem 产生的小数像素问题

2015/11/05 · CSS · 1 评论 · rem

原文出处: 淘宝前端团队(FED)- 颂晨   

图片 1

由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带来的问题。

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式

2016/03/08 · CSS · 1 评论 · 蒙版

原文出处: 张鑫旭(@张鑫旭 )   

CSS3制作Loading动画

2015/10/31 · CSS · Loading

原文出处: AlloyTeam- TAT.yana   

虽然现在互联网的网速越来越快,但永远都跟不上我们生活节奏的加快。资深网瘾少女表示,这世上最刺眼的不是阳光,而是“正在加载”;最长的不是周杰伦的电影,而是“正在加载”;最痛心的事情不是你不爱我,而是“正在加载”(语文老师告诉我排比要至少写三句)。

 

这是为什么呢

为什么loading让我们如此痛苦呢?因为,我们看到的loading是这样的  图片 2是这样的   图片 3颜值再高一点的是这样的  图片 4

这就是为什么要叫他们“菊花”,就因为长得丑啊喂!

我们要在这个看脸的世界存活下去!!!

刚出生的时候我是个大圆脸,塌鼻梁,单眼皮,曾经一度被隔壁阿姨怀疑我是我妈捡来的==但我善良可爱的母亲大人对我不离不弃,常常跟我说“先天不足,后天弥补”,我才有了继续活下去的勇气。作为网页,如果真的没办法改变“加载慢”这个病,那么把loading的动画做的好看一点,萌用户一脸血,“愉快的时光总是转瞬即逝”。

又是一个刷朋友圈的难眠的夜晚,一篇文章吸引了我《什么样的loading动画,我会等!》。只要一点点简单的创意,加一点点简单的动效设计,加载过程就充满了乐趣。

那么我们一起来用纯纯的CSS3做几个简单有趣的loading动画吧~(效果图均为动图!效果图均为动图!效果图均为动图!)

 

首先,我们做一个最简单的进度条样的动画(这里偷懒下,只兼容webkit内核了==)

图片 5

其中,animation-timing-function的默认状态是ease(低速开始,加快,在结束前变慢),ease-in(低速开始),ease-out(低速结束),ease-in-out(低速开始低速结束),linear(匀速),还可以用cubic-bezier(0, 0, 0, 0)来设置速度。具体的速度曲线和设置速度值可以在http://cubic-bezier.com上查到。

animation-iteration-count的infinite表示无限次循环;animation-direction的normal表示动画播放完后从头开始播放,reverse和normal相反,是从后向前播放,还有alternate会逆向播放。

XHTML

<a href="; <img alt="1" class="alignnone size-medium wp-image-8625" src="" style="height:115px; width:400px" /> </a> <a href="; <img alt="12" class="alignnone size-medium wp-image-8623" src="" style="height:356px; width:400px" /> <span style="font-size:16px"> <span style="color:#000000">然后我们在@keyframes中规定动画效果,由于是直线进行,所以只有开始和结束两个状态就OK了。</span> </span> </a> <a href="; <img alt="11" class="alignnone size-medium wp-image-8631" src="" style="height:162px; width:300px" /> </a>

1
2
3
4
5
6
7
8
9
10
11
12
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/1.png">
  <img alt="1" class="alignnone size-medium wp-image-8625" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/1-300x86.png" style="height:115px; width:400px" />
</a>    
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/12.png">
    <img alt="12" class="alignnone size-medium wp-image-8623" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/12-300x267.png" style="height:356px; width:400px" />
    <span style="font-size:16px">
     <span style="color:#000000">然后我们在@keyframes中规定动画效果,由于是直线进行,所以只有开始和结束两个状态就OK了。</span>
   </span>
</a>    
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/111.png">
    <img alt="11" class="alignnone size-medium wp-image-8631" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/111-300x162.png" style="height:162px; width:300px" />
</a>

 

效果如下

图片 6

 

卡带Loading

 

上面那个黄条是什么鬼==好丑的有没有!!!

于是我灵光一闪,卡带的样子来做loading一定不错~

我找了一个卡带的图,把其中的转轮切出来,使用rotate来使圆圈旋转。注意要使用transform-origin: 50% 50%;使动画以圆圈的圆心旋转。

图片 7

于是就出现了如下的效果:

图片 8

 

牛顿摆Loading

 

做好了卡带的效果后我的灵感欲罢不能,看到家里的牛顿摆就好想把它做成loading。

牛顿摆只有两端的小球会动,那么我们只要以绳子顶端为轴心旋转一定的角度就可以啦~于是我们使用Photoshop来简单画一个牛顿摆的图片。

但是,摆动速度并不是随便就可以的,毕竟也算是个自由落体运动。开始的时候会有个横向的加速度,然后就是有个向下的重力加速度,毕竟用户中只有少数是物理学家,所以只要有个大概的速度变化即可。也就是说小球开始运动先加速再减速,到最顶端后再加速。于是使用图片 9来设置速度。

搞定!于是牛顿摆的Loading是这样的:

图片 10

 

橘子甩汁Loading

 

就说我对取名字什么的不擅长。。。

在开头提到的那篇文章中,我看到了一个动图真的是萌我一脸血,让我不禁咽了咽口水。

就是这货!!

图片 11

其实叫“橘子甩汁”还是挺形象的==

这里,我将整个动画分为三部分。

图片 12

第一部分是整个的进度条动画,这里我们的第一个颜值略低的进度条就派上了用场。我们将背景色换成黄色,然后给进度条加上8px的border就可以啦。

第二部分是最右边的橘子切面,只要固定好位置就可以,注意,一定要将它置到最顶。

第三部分就是橘子果肉部分,因为要向不同方向旋转不同路径运动,所以我分成了三个状态。图片 13

图片 14

图片 15

translate为平移运动,translate(left的值,top的值);rotate从0到360度为逆时针转动,反之为顺时针转动。通过给translate和rotate设置的值不同,就可以改变果肉运动的状态。然而我们不可以让他们同时间出现,那么我们可以为其中一个果肉动画设置delay图片 16,这样就有了果肉不断被甩出的效果。

css3动画十分简单有趣,只要通过简单的平移变换的组合就可以做出很多可爱的动效。

 

如果loading动画不再是菊花,那么等待也不再是件痛苦的事了。

1 赞 1 收藏 评论

图片 17

rem

关于 rem 这个单位的介绍,在此就不赘述,有兴趣的同学可以阅读一丝的《响应式十日谈第一日:使用 rem 设置文字大小》,文章对 rem 进行了详细的介绍。

一、微云的实现

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

图片 18

图片 19

虽然最终的效果满足了产品的需求,对于用户而言,目的已经达到。但是,从代码质量层面、潜在的体验提升可能性、使用场景广度上来讲,还是弱了很多的。

举例来说,如果我们某个提示区域面积很大,那中间的那个镂空区域尺寸是不是要变,那后面的背景图片怎么办?搞新图,有人看到了使用了background-size:cover, 那IE7,IE8怎么办?哦,可能微云不需要管IE7, IE8.

如果不需要管IE7, IE8,那这里的实现就显得更加小白了。我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片。

用途

在无线开发中,响应式布局尤为重要,先不说屏幕尺寸越来越多样化的 iPhone,单是安卓就有 N 多种尺寸要适配。

在没有使用 rem 之前,想要按照设计师的想法去适配不同 分辨率1 是一件非常难操作的事情。用了 rem 以后,一切简单了许多,你可以用它来设置元素的宽高、间距…,然后针对不同的分辨率计算并设置相对应的根字体大小,然后元素就好像缩放过一样自动适应了当前的分辨率,大大的降低了适配工作量。

Demo:

图片 20

上图是同一个页面在 Apple iPhone 5 和 Samsung Galaxy S4 两款机器下的效果,可以看出从 320px 宽的 iPhone 5 到 360px 宽的 S4,图片像是等比放大了一样,我们分析下这个原理:

假定2 width=320px 的分辨率下的根字体大小是 32px,由此推算:

  • width=320px 分辨率下:

    根字体大小是 32px,该分辨率下宽 1rem 的元素在浏览器里的真实宽度就是 1 * 32 = 32px;

  • width=360px 分辨率下:

    如果要达到等比放大的效果,宽 1rem 的元素在浏览器里的真实宽度就应该是 32 * (360/320) = 36px,由此得出 width=360px 分辨率下的根字体大小为 36px;

由此可见等比缩放是通过控制根字体大小来实现的,且根字体大小与屏幕宽度成正比。

二、我的实现

主要在于思维方式的变化。拼积木这种想法大家都比较容易想到,符合日常认知,但是,但代码层面,我们可以进行思维转换,发散思考,偌大的半透明遮罩层,我们不要老想着背景色块背景色块,可以突破常规思维,把它认为是边框,一个很大很大的边框(我们平时使用border都是1像素巨多),这样,我们自然就有了镂空效果。

如下图示意:
图片 21

但是,目前我们中间的镂空区域方的,有没有什么办法变成圆的呢?
自然有,方法1是元素设置超大圆角,但是,此时为了边框依然填满整个屏幕,border边框尺寸要大大增大,但是,为了不影响页面的滚动条,我们必须再嵌套一层标签,就显得啰嗦了;
方法2则是方法1某些方面的逆向思维处理,就是把当前元素作为外层限制标签,里面重新生成一个大尺寸伪元素,实现自适应尺寸的圆角效果,这个好,HTML干净不啰嗦,CSS一步到位(代码如下示意);

.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,.75); }

1
2
3
4
5
6
7
8
9
10
.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,.75);
}

大家可以看到,上面的伪元素的各个参数都是固定参数值,与外部元素的尺寸什么的没有任何关系,只要外部元素尺寸不超过400,里面永远会有一个正椭圆的内阴影的镂空图形(因为超出部分会被.cover隐藏),要理解圆角和正椭圆的关系,可以参考我之前的文章:“秋月何时了,CSS3 border-radius知多少?”。

眼见为实,耳听为虚,您可以狠狠地点击这里:一层标签实现网站引导镂空蒙版功能demo (点击黑色蒙层会有引导切换效果)

demo这个镂空蒙层所使用的HTML代码如下:

<div class="cover"/></div>

1
<div class="cover"/></div>

没错,就这么简单,没什么嵌套,没有什么五个元素变形金刚合体,没有使用图片。

微云这张图片3K多,以微云的用户访问量,估计流量费要不少钱的。

而且,大家如果点击蒙版,会发现,镂空的区域大小每次都是不一样的,有大有小,有高有瘦,而微云的那个实现方法要满足此需求就棘手;而且,大家发现没,这些尺寸位置的变化都是动画来动画去的,不是嗙嗙嗙这种生硬的效果,更soft, 对用户视觉引导效果更好,你看,我从这里到这里了,为什么可以实现动画效果呢,因为我们的镂空和内阴影都是CSS实现的,而微云的图片方法,显然是无法有动画的。

图片 22

JS代码辅助
当然,我的实现也离不开JS的辅助,JS的工作很简单,让蒙层的width/height以及border大小和需要引导的元素相关联。

我特意整了个可以公用的方法coverGuide(命名不喜欢自己随便改):

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 pageHeight = doc.scrollHeight, pageWidth = doc.scrollWidth; // 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 = ''; } } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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 pageHeight = doc.scrollHeight,
            pageWidth = doc.scrollWidth;
 
        // 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 = '';
            }
        }
    }
};

这里的coverGuide方法使用原生JS实现,IE6+浏览器都是兼容的,不依赖JS库,大家可以随意使用。当然,写得匆忙,没有严格验证,可能有bug,大家可以稍微留点心。

使用非常简单,语法如下:

coverGuide(cover, target);

1
coverGuide(cover, target);

其中cover就是.cover这个单独的蒙版元素,target则是我们需要指引的元素,按钮啊,导航什么的。然后,我们的镂空区域自动定位到target的位置,大小也是target元素的大小。超省心。

具体使用,可参考上面的demo,源代码就在页面上。

IE7,IE8怎么办
如果你需要兼容IE7,IE8,我们不妨就方框效果;如果设计和产品接受不了,则可以使用图片打个补丁,例如上面JS代码部分的:

cover.innerHTML = '<img src="guide-shadow.png">';

1
cover.innerHTML = '<img src="guide-shadow.png">';

我demo使用的这个图片长下面这样:
图片 23

大小还有阴影都是我自己随手一搞的,旨在示意,真实项目大家可以向设计师索要图片。

然后,CSS超easy, 图片撑满我们的cover就可以。

/* IE7, IE8 img */ .cover > img { width: 100%; height: 100%; }

1
2
3
4
/* IE7, IE8 img */
.cover > img {
    width: 100%; height: 100%;    
}

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:腾讯微云黑色遮罩引导蒙版更好的CSS实现方式,

上一篇:圣杯布局小结 下一篇:没有了
猜你喜欢
热门排行
精彩图文