使用CSS3制作版头动画效果


Posted in HTML / CSS onDecember 24, 2020

使用CSS3制作版头动画效果

网易看游戏官网(http://kanyouxi.163.com/)(已下架),是我以前(2014年)做的一个项目,也是我们首个放弃Flash,采用HTML5与制作动画的网站,当时业内为数不多的采用CSS3用于主动画实际生产的网站,当然现在已经很广泛使用了,特别是在移动端,CSS3是性能的保障。现在总结分享一下,能让自己有温故知新之余,也希望对初学者进阶有帮助。

怎样的动画?

这个动画并不算复杂,但包含了transform,rotate,translate,keyframes,缓动,和循环次数这几个重要的内容。好了,先看看动画效果,下面是录屏动画,也可以到网易看游戏官网(http://kanyouxi.163.com/)(已下架)上去看看。

使用CSS3制作版头动画效果

有几个关键点,按顺序分别为:

  •  白色iPhone向上翻动,然后做几个小幅度抖动;
  • 字幕从右边出现,把白色iPhone向左推动;
  • 白色iPhone快到心头后,黑色iPhone也跟随出现;
  • 大标题“网易看游戏”背景波浪式闪烁滚动。

下面让我们我们一个个来。

注:这是一个CSS3进阶实践文章,如果你对CSS3动画还不是很了解,请先看这里: CSS3动画 ,1分钟快速了解一下再回来。

1. 向上翻动并抖动

这里有几个关键属性,详细使用方法可以进去看: @keyframes , transform:rotate(deg);transform-origin:x,y;

准备动画关键帧@keyframes

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    100% {
        transform:rotate(0deg); 
        transform-origin:125px 600px;
        }            
}

我们直接用百份比来作为帧点,因为后面还会把它再细分多个帧。

设置旋转与Anchor Point(锚点transform-origin:x,y; )

transform:rotate(-30deg);
transform-origin:125px 650px;

旋转是必须的,但为何要修改Anchor Point呢?

Anchor Point,是借用了cocos2D里的说法,是指变换的原点。

因为transform的默认锚点是中心,即(50%,50%),在transform里Anchor Point属性就是 transform-origin ,以下是默认值:

transform-origin:50%,50%

在支持3D的变换里,还有第3个数值:z,默认是0

如果不修改,就会以iPhone的中心为原点旋转,这不是我们想要的效果,所以把它移到下方的水平中央去。

这个图片的宽度是250px,高度为525px,下方中央就是(125px,525px),但为了模拟实物在桌子上摇摆,还要往下移一些,经过尝试,我们最终选择了(125px,650px),如下图示:

使用CSS3制作版头动画效果

添加抖动与拟物

抖动其实也是几个关键帧组合的产物,首次旋转不是0度,而是过了一点点的10度,接着往返各两个关键帧,幅度逐渐减小。添加关键帧后的@keyframes改动如下:

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    50% {
        transform:rotate(10deg);
        transform-origin:125px 600px;
        }
    75% {
        transform:rotate(-5deg);
        }
    100% {
        transform:rotate(0deg);
        }
}

注意,上面33%位置的帧处,添加了一条 transform-origin:125px 600px; ,因为如果一成不变的锚点,会给人感觉像是一个钟摆,太死板不够拟物化,想像一下:一个东西以某个抛物线落到地上,经过与地面碰撞,改变运动方向,最终慢慢停下来,所以我们把中心点的高度也减小一点,让人看上去“ 不那么规律 ”。

在关键帧的时间点上,也模拟了慢出的缓动效果。所谓的动画感觉做得好不好,也就是缓动效果做得如何,够不够接近物理世界给人的认知。

这个帧点也并非最后的时间点,请继续往下看。

2. 字幕出现并推走iPhone

字幕出现

字幕在另外一个元素,所以我们新建一个关键帧组:

@keyframes content{
    0% { transform: translate3d(550px,0,0);}
    100% { transform: translate3d(0,0,0);}
}

因为是iPhone动画先走,然后才是字幕,所以动画延时执行 animation-delay :

animation-delay:.2s;

但为了两个关键帧组能更好的同步,不用算来算去,我们也以这样做:

@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

先用透明度隐藏它,在40%才开始,在移动的过程再逐渐显示,让过程更平滑。

前面还说到,中间还要用字幕推iPhone一下,怎么做?

模拟碰撞

纯CSS3是做不了的,除非全程用JS进行,或者用Box2D进行碰撞判断。但我们这里只是一个简单的走过场动画,不需要人机交互,也不会变化移动的距离,所以,我们用一个变戏法,两个动画一起并行,在关键节点埋关键帧,即:字幕移动到iPhone位置时,iPhone才开始移动。

两个关键帧组结合起来就是:

@keyframes iphone-front{
    0% {transform:rotate(-30deg); transform-origin:125px 650px; opacity: 0;}
    20% {transform:rotate(10deg); transform-origin:125px 600px; opacity: 1;}
    30% {transform:rotate(-5deg);}
    38% {transform:rotate(0deg);}
    60% {transform: translate3d(0,0,0);  opacity: 1;}
    90% {transform: translate3d(-340px,0,0); }
    100% {transform: translate3d(-340px,0,0);}
}
@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    60% { transform: translate3d(225px,0,0); opacity: 1; }
    80% { transform: translate3d(0,0,0); opacity: 1; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

/*以下选择器略去了非动画属性设置,例如宽高等,我们就当他们默认就是正确的值吧*/
.iphone-front{ 
    animation: iphone-front 1.8s ease-out forwards;
}
.content{
    animation: content 1.8s ease-out;
}

可以看出,这里没有使用delay属性,是为了更直观的设置并行动画,大家都在60%的位置碰头,都使用了ease-out缓出。

为什么iphone-front的100%帧处要重复90%的内容?因为我们用了 animation-fill-mode 属性,值为forwards,即停在最后一帧,如果100%没有写,就会退回到最初状态了。

3. 黑色iPhone跟随出现

黑色iPhone的动画更简单,只是一个渐现加移动,同样也是另外一个并行动画,不过这次可以用delay了,先预估一下大概出现的时间,可以得到从0.5s开始:

@keyframes iphone-back{
    0% { transform: translate3d(97px,0,0); opacity: 0;}
    40%{ opacity: 0; }
    50%{ transform: translate3d(0,0,0); opacity: 1;}
    100% {opacity: 1; }
}
.iphone-back-ani{
    animation: iphone-back 1.8s ease-out .5s forwards;
}

这里不需要最后一帧重复写代码了,因为它本来就是(0,0,0),不会产生任何变化。

为何用translate3d(x,y,z);而不用translateX(x)?因为早前有人认为这个效率会更高,特别在移动端性能更优。

查看手册:transform

4. 大标题背景波浪

这个不涉及transfrom,让前景与背景重叠在一起,背景图片在y轴不间断移动,无限循环,无缓动;关键的是这个背景图必须上下能无缝连接:

使用CSS3制作版头动画效果

使用CSS3制作版头动画效果

@keyframes title{
    0% { background-position: 0 0;}
    100% { background-position: 0 -76px;}
}

.title-bg{
    width: 301px; 
    height: 61px; 
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background: url(title_text_bg.png) repeat-y;
    animation: title 1.2s linear;
    animation-iteration-count:infinite;
}
.title-front{
    width: 301px; 
    height: 61px;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background: url(title_text_front.png) no-repeat;
}

这是最简单的做法,适合大多数情况。也有另外一些更高级的,例如使用mask,关于mask,有兴趣请看 《CSS Masking》 。

其它效果

使用CSS3制作版头动画效果

结语

手写动画,虽然比较费时,但能让你了解现实原理。如果需要可视化制作,推荐一个在线工具给大家: cssanimate ,相比其它生成器,优点是可以设置多个关键帧,而且可以通过鼠标拖动直接操作,推荐!

到此这篇关于使用CSS3制作版头动画效果的文章就介绍到这了,更多相关css3版头动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
CSS3实现红包抖动效果
Dec 23 #HTML / CSS
html5+css3之制作header实例与更新
Dec 21 #HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 #HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 #HTML / CSS
html+css3实现的登录界面
Dec 09 #HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 #HTML / CSS
CSS3 实现的火焰动画
Dec 07 #HTML / CSS
You might like
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
详解Python中where()函数的用法
2018/03/27 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
家长会学生家长演讲稿
2013/12/29 职场文书
年会搞笑主持词
2014/03/27 职场文书
户籍证明模板
2014/09/28 职场文书
python爬虫--selenium模块
2021/03/31 Python
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Java 死锁解决方案
2022/05/11 Java/Android