记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[HTML5/CSS3] 太棒了!mask 轻松构建炫酷CSS探照特效![含1P]

[复制链接]
发表于 2017-6-11 20:33:34 | 显示全部楼层 |阅读模式
       今天 为大家带来 mask  的新 demo,打造过程比前作复杂一些,本作代号是:Think different,希望大家能喜欢小弟做的 demo,多提建议帮助我改进。(请在 Chrome 下浏览)


太棒了!mask 轻松构建炫酷CSS探照特效! different,animation,infinite,contrast,Chrome 【HTML】 203408ugk0v9es00vgczg9 1




       Think different 主要通过同时操作四个图片遮罩层 mask,配合三重预设的 animation ,其中 mask-size 和 animation-fill-mode 属性举足轻重。


       前面所有动画运动完成后,对比度 contrast 动画再不断进行反复,作为本栗彩蛋… 好啦,话不多说,以下是 demo 效果和 code:


       HTML CODE


       demo结构较简单,也没有使用伪类

<div class="demo"></div><!-- end demo -->



       CSS CODE


       这里所用到的CSS3知识点并不复杂,只是要对他的概念了解清楚

body{ background-color:#f5f5f5; }

.demo{
        -webkit-animation:
                mask-preheat 1s,
                mask-motion 5s 1s ease-out,
                demo-motion 2.5s 6s linear infinite;
        -webkit-animation-fill-mode:
                none,
                forwards,
                none;
        background:url(../images/main.jpg) 0 0 no-repeat;
        color:#fff;
        height:500px;
        margin:1em auto;
        -webkit-mask:center no-repeat;
        -webkit-mask-image:
                url(../images/apple.png),
                url(../images/apple.png),
                url(../images/apple.png),
                url(../images/apple.png);
        -webkit-mask-size:10%;
        width:650px;
}

@-webkit-keyframes mask-preheat{ 50%{ -webkit-mask-size:20%,20%,20%,20%; } }
@-webkit-keyframes mask-motion{
        5%{
                -webkit-mask-position:left top,center,center,center;
                -webkit-mask-size:20%,10%,10%,10%;
        }
        10%{
                -webkit-mask-position:left top,right top,center,center;
                -webkit-mask-size:20%,20%,10%,10%;
        }
        15%{
                -webkit-mask-position:left top,right top,left bottom,center;
                -webkit-mask-size:20%,20%,20%,10%;
        }
        20%{
                -webkit-mask-position:left top,right top,left bottom,right bottom;
                -webkit-mask-size:20%,20%,20%,20%;
        }
        60%{
                -webkit-mask-position:left bottom,left top,right bottom,right top;
                -webkit-mask-size:20%,20%,20%,20%;
        }
        80%{
                -webkit-mask-position:center;
                -webkit-mask-size:10%,10%,10%,10%;
        }
        90%{
                -webkit-mask-position:center;
                -webkit-mask-size:20%,20%,20%,20%;
        }
        100%{
                -webkit-mask-position:top,right,bottom,left;
                -webkit-mask-size:40%,40%,40%,40%;
        }
}

@-webkit-keyframes demo-motion{
        50%{ -webkit-filter:contrast(1.5); }
}







DEMO:http://www.w3cplus.com/demo/css3/ThinkDifferent/


下载:ThinkDifferent.zip

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
微信扫一扫,每天教程更新!
想学习最新知识关注“今日教程”微信公众号!站长每天更新教程,每天八条,欢迎关注支持!!!
快速回复 返回顶部 返回列表