HamronyOS开辟5.0【鸿蒙OS开机动画】实例
https://i-blog.csdnimg.cn/direct/7035e35bb019425fb6deac2673f831c9.png分析动画
仔细看了好几遍鸿蒙OS的开机动画，大抵分成以下几个阶段：
[*]字母O的睁眼效果，直接把上面大佬写的copy下来
[*]HarmonyOS 除了O之外的其他字母显现，而且整体缩小向左平移
[*]平移的同时会有一个聚光灯效果，像一个手电筒照亮在O上面，然后扩散至全部字母显现
[*]字母O下方的下划线动效
开敲
屏幕兼容问题
起首必要考虑的一个问题是兼容，当然这里说的不是兼容IE……只是必要简单兼容一下差别屏幕巨细的显示，确保在PC和手机上能正常显示
https://i-blog.csdnimg.cn/direct/f8c384a30baf4295bba7f5c046ac88c1.png
简单用媒体查询rem布局写了一下差别分辨率屏幕下的显示巨细，主要为了自己方便计算，这里贴一下代码，不做太多解释了，不认识的可以去了解一下rem布局的原理
html {
font-size: 10px;
}
@media screen and (max-width: 767px) {
html {
font-size: 6px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
html {
font-size: 8px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
html {
font-size: 10px;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 12px;
}
}
字母O的睁眼动画就不做解释了，直接去看原文，我在此底子上做了修改
HarmonyOS 除了O之外的其他字母显现，而且整体缩小向左平移
html结构如下，做了一些修改
<div class="container">
<span class="delay">Harmony</span>
<div class="letter">
<ul class="ul">
<li class="harmony"></li>
</ul>
<ul class="ul">
<li class="harmony"></li>
</ul>
<svg>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 6" />
</filter>
</svg>
</div>
<span class="delay">S</span>
</div>
除了O之外其他字母显现这个很轻易，用opacity就可以实现，等2秒是让字母O动画竣过后实行，加这个动画的目的主要是先让字母O实行完动画，配合聚光灯效果
https://i-blog.csdnimg.cn/direct/7938533d58b64872b433ec93e090acc3.png
.delay{
opacity: 0;
animation: fade_in 2s 0.5s forwards;
}
@keyframes fade_in {
to {
opacity: 1;
}
}
整体缩小向左平移起首想到的是缩放然后向左平移，末了发现平移都没须要了，直接默认整体放大，原点设置在左侧中心位置，如许缩小动画的时间会整体以左边为基点恢复到原位
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]