CSS3动漫:5种预载动漫实际效果案例

日期:2021-03-02 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

完成如图所示的动漫实际效果:

预载动漫1:双旋圈

在两个不一样方位转动的圆圈。大家对内圈的转速界定了1个CSS编码,即内圈比外圈的速度快2倍。
 

完成如图所示:

html编码:

<body style="background: #ffb83c;">
    <div id="preloader⑴">
        <span></span>
        <span></span>
    </div>
</body>

css编码:

#preloader⑴{
    position: relative;
}
#preloader⑴ span{
    position: absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}
#preloader⑴ span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin⑴ 2s infinite linear;
}
#preloader⑴ span:nth-child(2){
    top:20px;
    left:20px;
    width:40px;
    height: 40px;
    animation: spin⑵ 1s infinite linear;
}
@keyframes spin⑴{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); opacity: 0.5;}
    100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin⑵{
    0%{transform: rotate(0deg); opacity: 0.5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg);opacity: 0.5;}
}

预载动漫2:交叠圈

两个圆圈开展横向交叠往返挪动。每一个圆圈都设定了独立的反方向挪动动漫主要参数。
 

实际效果:

html编码:

<body style="background: #4ad3b4;">
    <div id="preloader⑵">
        <span></span>
        <span></span>
    </div>
</body>

css编码:

#preloader⑵{
    position: relative;
}
#preloader⑵ span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}
#preloader⑵ span:nth-child(1){
    animation: cross⑴ 1.5s infinite linear;
}
#preloader⑵ span:nth-child(2){
    animation: cross⑵ 1.5s infinite linear;
}
@keyframes cross⑴{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross⑵{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}
}

预载动漫3:转动圈

实际效果:

html编码:

 

<body style="background: #ab69d9;">
    <div id="preloader⑶">
        <span></span>
    </div>
</body>

css编码:

#preloader⑶{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    border-radius: 999px;
    
}
#preloader⑶ span{
    position: absolute;
    width:80px;
    height:80px;
    border:4px solid transparent;
    border-top:4px solid #fff;
    border-radius: 999px;
    top:⑷px;
    left:⑷px;
    animation: rotate 1s infinite linear;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

预载动漫4:颤动圈

这是1种墨西哥波浪纹纹的动漫实际效果,根据设定不一样圆圈之间的延迟时间主要参数来完成。
 

实际效果:

html编码:

<body style="background: #c1d64a;">
    <div id="preloader⑷">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css编码:

#preloader⑷{
    position: relative;
}
#preloader⑷ span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}
#preloader⑷ span:nth-child(1){
    left:0;
    animation-delay: 0s;
}
#preloader⑷ span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}
#preloader⑷ span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}
#preloader⑷ span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}
#preloader⑷ span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}
@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(⑶0px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}
}

预载动漫5:雷达圈

1种雷达辐射源实际效果,给3个span elements设定同样的淡入淡出实际效果,再予每一个略微延迟时间下便可完成。
 

实际效果:

html编码:

<body style="background: #f9553f;">
    <div id="preloader⑸">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css编码:

#preloader⑸{
    position: relative;
}
#preloader⑸ span{
    position:absolute;
    width:50px;
    height: 50px;
    border:5px solid #fff;
    border-radius: 999px;
    opacity: 0;
    animation: radar 2s infinite linear;
}
#preloader⑸ span:nth-child(1){
    animation-delay: 0s;
}
#preloader⑸ span:nth-child(2){
    
    animation-delay: 0.66s;
}
#preloader⑸ span:nth-child(3){
    animation-delay: 1.33s;
}

@keyframes radar{
    0%{transform: scale(0);opacity: 0;}
    25%{transform: scale(0);opacity: 0.5;}
    50%{transform: scale(1);opacity: 1.0;}
    75%{transform: scale(1.5);opacity: 0.5;}
    100%{transform: scale(2);opacity: 0;}
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。