摘要:接下来就为各个部分添加动画文字旋转知识有限,不足之处请多包涵。
直接上图(gif)
整体的html不多赘述
The Force Awakens
这个例子主要包含三个部分:上面的STAR,中间的文字,下面的WARS
首先考虑的是三部分的定位,这里首先遇到前端css布局的一大问题--居中
.starwars-demo{ height: 17em; width: 34em; position: absolute; left: 50%; top: 50%; /* 变形 */ transform: translate(-50%,-50%); /* 是3D */ transform-style: preserve-3d; perspective: 800px; }
网页布局:
1、正常模式基于文档流的布局(从左到右,从上到下块级元素,行内元素)
2、定位(position)破坏文档流,
3、浮动布局 float:left pc端常用的布局方式
4、flex 弹性布局 等分,及父子关系布局
5、grid 布局 九宫格
这里我们用position来对整个starwars-demo进行居中定位:首先left: 50%和top: 50%,然后再往左和上移动容器自身的50%,这样就达到了居中的效果。
接下来就为各个部分添加动画
.star,.wars{ position: absolute; } .star{ top: -0.75em; animation: star 10s ease-out infinite; } @keyframes star{ 0%{ opacity: 0; transform: scale(1.5); } 20%{ opacity: 1; } 89%{ opacity: 1; transform: scale(0.6); } 100%{ opacity: 0; transform: translateZ(-400em) } } .wars{ bottom: -0.5em; animation: wars 10s ease-out infinite; } @keyframes wars{ 0%{ opacity: 0; transform: scale(1.5); } 20%{ opacity: 1; } 89%{ opacity: 1; transform: scale(0.6); } 100%{ opacity: 0; transform: translateZ(-400em) } } .byline{ position: absolute; color: #ffffff; font-family: Lato; font-style: 2.25em; left: 2em; right: -2em; top: 42%; letter-spacing: .4em; text-transform: uppercase; } .byline span{ display: inline-block; animation: spin-letter 10s linear infinite; } .byline{ animation: move-byline 10s linear infinite; } @keyframes move-byline{ 0%{ transform:translateZ(5em); } 100%{ transform:translateZ(0); } } /* 文字旋转 */ @keyframes spin-letter{ 0%,100%{ opacity: 0; transform: rotateY(90deg) } 30%{ opacity: 1; } 70%,80%{ transform: rotateY(0); opacity: 1; } 88%,100%{ opacity: 0; } }
知识有限,不足之处请多包涵。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113129.html
摘要:今日励志语录有志者自有千计万计,无志者只感千难万难。三动画技术越来越不陌生,使用门槛也渐渐降低,而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君,每天早晨为你推送前端知识,度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计,无志者只感千难万难。 文章原出处:腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...
摘要:今日励志语录有志者自有千计万计,无志者只感千难万难。三动画技术越来越不陌生,使用门槛也渐渐降低,而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君,每天早晨为你推送前端知识,度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计,无志者只感千难万难。 文章原出处:腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...
阅读 3113·2023-04-26 02:33
阅读 3081·2023-04-25 21:33
阅读 889·2021-09-02 09:56
阅读 2858·2019-08-30 15:44
阅读 2435·2019-08-30 13:15
阅读 1013·2019-08-30 13:04
阅读 1614·2019-08-29 15:09
阅读 3932·2019-08-26 18:26