资讯专栏INFORMATION COLUMN

【css3简单animation动画】实现星球大战荧幕变幻

chemzqm / 1613人阅读

摘要:接下来就为各个部分添加动画文字旋转知识有限,不足之处请多包涵。

直接上图(gif)

整体的html不多赘述

这个例子主要包含三个部分:上面的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

相关文章

  • css3新特性总结

    摘要:六过渡和动画过渡效果,通过指定某些属性和变幻参数,以原始定义为开始状态,通过鼠标操作变化,状态定义结束状态,实现过渡效果。 一、圆角边框 border-radius:5px; 二、多背景图 background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 三、颜色和透明度(由原来的...

    novo 评论0 收藏0
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧

    摘要:今日励志语录有志者自有千计万计,无志者只感千难万难。三动画技术越来越不陌生,使用门槛也渐渐降低,而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君,每天早晨为你推送前端知识,度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计,无志者只感千难万难。 文章原出处:腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

    LittleLiByte 评论0 收藏0
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧

    摘要:今日励志语录有志者自有千计万计,无志者只感千难万难。三动画技术越来越不陌生,使用门槛也渐渐降低,而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君,每天早晨为你推送前端知识,度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计,无志者只感千难万难。 文章原出处:腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

    liuyix 评论0 收藏0

发表评论

0条评论

chemzqm

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<