HTML特效

最新推荐文章于 2024-05-21 13:06:07 发布

心树.

最新推荐文章于 2024-05-21 13:06:07 发布

阅读量193

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_60213361/article/details/123042871

版权

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/huojina.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel=""stylesheet>

</head>
<body>
    <div class="loader">
        <div class="rocket">
            <i class="fa fa-rocket" aria-hidden="true"></i>
            <i class="fa fa-cloud" aria-hidden="true" style="--i:0"></i>
            <i class="fa fa-cloud" aria-hidden="true" style="--i:1"></i>
            <i class="fa fa-cloud" aria-hidden="true" style="--i:2"></i>
            <i class="fa fa-cloud" aria-hidden="true" style="--i:3"></i>
        </div>
        <span><i></i></span>
    </div>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #eaeef0;
}
.loader{
    position: relative;
    display: flex;
}

.loader span{
    position: relative;
    width: 250px;
    height: 250px;
    background: #eaeef0;
    border: 6px solid #eaeef0;
    border-radius: 50%;
    box-shadow: -8px -8px 15px rgba(255,255,255,1),
8px 8px 25px rgba(0,0,0,0.15);
    overflow: hidden;
}
.loader span::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 10px 10px 20px rgba(0,0,0,0.5),
inset -5px -5px 15px rgba(255,255,255,1);
}
.loader span::after{
    content: "";
    position: absolute;
    inset: 40px;
    background: #eaeef0;
    border: 3px solid #eaeef0;
    border-radius: 50%;
    box-shadow: -8px -8px 25px rgba(255,255,255,1),
8px 8px 25px rgba(0,0,0,0.25),
inset 3px 3px 10px rgba(0,0,0,0.15),
inset -1px -1px 15px rgba(255,255,255,1);
}
.loader span i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(5px);
    background: linear-gradient(#42abff,#ff4f8b,#ffeb3b);
    animation: animate 1s linear infinite;
}
@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.rocket{
    position: absolute;
    inset: 50px;
    z-index: 10;
    display: flex;
    border-radius: 50% ;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.rocket .fa-rocket{
    position: absolute;
    color: #ff518c;
    font-size: 3.5em;
    -webkit-text-stroke: 2px #000;
    animation: animateRocket 0.2s linear infinite;
}
@keyframes animateRocket {
    0%,100%{
        transform: translate(0px,0px) rotate(-45deg);
    }
    50%{
        transform: translate(0px,-3px) rotate(-45deg);
    }
}
.fa-cloud{
    position: absolute;
    top: calc(35px * var(--i));
    left: calc(45px * var(--i));
    font-size: 2em  ;
    color: white;
    -webkit-text-stroke: 2px #000;
    animation: animateClouds 1s linear infinite;
    animation-delay: calc(-0.5s * var(--i));
}
@keyframes animateClouds {
    0%{
        transform: translateY(calc(-35 * 5px));
    }
    100%{
        transform: translateY(calc(35 * 5px));
    }
}

第二个CSS详情见我的前端图标分享：

https://blog.csdn.net/qq_60213361/article/details/123038138?spm=1001.2014.3001.5501

心树.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML特效

HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/huojina.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.co
复制链接

扫一扫

HTML特效

“相关推荐”对你有帮助么？