门户设计

发表于 | 分类于 | 评论数： | 阅读次数：

门户设计

视频作为网页背景

#zglyvideo{
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
}

将视频的位置设置为 fixed, min-width/min-height设置为 100% ,同时 z-index 设置为 -100.

animate.css

使用 animate.css 设置动画:

<h4 class=""animated fadeInUp>fadeInUp</h4>

使用 css3 animate 做出文字输入效果

h1{
    border-right: .1em solid;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-weight:  700;
    font-size: 5rem;
    margin-top: 14rem;
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    width: 24rem;
    white-space: nowrap;
    overflow: hidden;
    animation: typing  2.6s steps(4,end),
    blink-caret .5s step-end infinite alternate;

}

@keyframes typing {
    from{width: 0}
}
@keyframes blink-caret { 50% { border-color: transparent; } }

typeing

实现文字输入效果,如果一共有四个字符需要展示,设置动画时长为 2.6s;

steps(4,end)代表动画分四步进行;

h1的 width 从 0 到 24 rem 过渡

实现光标闪烁效果.

thank u !