探索CSS @scroll-timeline规范
朋友们，想不想玩点儿新鲜的？网页设计可是不能忽视！如果你想要你的网页更加引人入胜，那就试试用CSS搞一个超级炫酷的翻页动画！今天给大家介绍一个神奇的新东西——CSS@scroll-timeline，相信这个会让你的动画既好玩又瞩目！看完之后，我还会带你们去看看两大网站的案例，看看他们是如何将@scroll-timeline运用得如此出色的，也许你们可以从中找到一些灵感！
案例一：WeGame PC端官网首页动画效果
咦，Wegame电脑版官网上的游戏动画超酷的是不是？我发现只要轻轻一滑鼠标就能出现这个效果，我猜他们用的估计是像TweenMax JS这样的动画库。但猜你可能不知道，其实我们也能通过CSS魔法般的@scroll-timeline规则来实现相同的效果！
LOGO元素切割背景
要弄出超炫的转场动画？不难把LOGO往背景前一摆，像带面具似的露出后面的画面。别忘了把白色部分设置成透明，这样背景就能若隐若现地呈现出来咯~
CSS @scroll-timeline实现基本动画效果
div {
background: linear-gradient(-75deg, #715633, #2b2522);
}
学会剪辑技巧，再玩转@scroll-timeline规则，然后炫酷动画就轻松到手！比如说，下滑的时候把’.g-container’缩放60倍，这么好玩又新颖的效果，你还在犹豫什么？赶紧来试一下！
div {
background: linear-gradient(-75deg, #715633, #2b2522);
mask: url(WeGame-LOGO图.png);
mask-repeat: no-repeat;
mask-position: center center;
}
LOGO渐隐与背景渐现
你看那个LOGO揭幕的视频没有？画面开始模糊然后渐渐变清晰，这让人觉得好像有好多层次似的。要想弄懂这到底怎么回事，就得学会控制这些元素：放大或缩小，那样子才能看到深藏的秘密！
进一步优化与细节处理
div {
background: linear-gradient(-75deg, #715633, #2b2522);
mask: url(//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg), linear-gradient(#fff, #fff);
mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-composite: xor;
}
咱得换个场子，光线也得调整对？其实有个妙招，就是把白色调成透明的那种，加几张图进去，再缩小一下就行。这可是@scroll-timeline和CSS一起就能搞定的事儿，效果绝对让你满意！
技术功底与创意结合
做这种炫酷动画不是件容易活儿，要靠真本事才能做好！主要就看你能不能明白咱们需要什么新的点子。用强大的CSS和巧妙的技巧配合起来，做出让人哇哇叫的特效不一定非要用复杂的JavaScript，这就是展现咱们前端牛人们的才华与毅力的时候！
.g-scroll {
position: relative;
width: 100vw;
height: 500vh;
}
.g-wrap {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.g-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
animation-name: scale;
animation-duration: 10s;
animation-timeline: box-move;
}
.g-bg {
position: fixed;
width: 100vw;
height: 100vh;
background: url(LOGO背后的图层);
}
.g-wegame {
position: absolute;
width: 100vw;
height: 100vh;
background: linear-gradient(-75deg, #715633, #2b2522);
mask: url(//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg), linear-gradient(#fff, #fff);
mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-composite: xor;
}
@scroll-timeline box-move {
source: selector("#g-scroll");
orientation: "vertical";
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(60);
}
}
总结与展望
看我看了文章之后才知道，啊原来这个@scroll-timeLine在CSS里面还能做出这么炫的动画来！这不就是CSS的日常操作~以后互联网发展得更好可怎么办？就怕又有好多有趣好看的动起来冒出来，我们这些网友也可以跟着玩儿~把这个用在网页设计里头，说不定还能造出一些让人眼前一亮的交互效果嘞~
。
评论0