HTML+CSS制作Windows启动加载动画

HTML+CSS制作Windows启动加载动画
效果图如下：

HTML部分源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Windows加载动画</title><link rel="stylesheet" href="style.css">
</head><body><div class="container"><div class="loader"><span></span><span></span><span></span><span></span><span></span></div><p>Windows正在加载...</p></div>
</body></html>

CSS部分源代码如下：

:root {--background-color: #2c3e50;--border-color: #7591AD;--text-color: #34495e;--color1: #EC3E27;--color2: #fd79a8;--color3: #0984e3;--color4: #00b894;--color5: #fdcb6e;--color6: #e056fd;--color7: #F97F51;--color8: #BDC581;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}.container {width: 400px;height: 400px;/* background-color: turquoise; */display: flex;justify-content: center;align-items: center;flex-direction: column;color: #fff;font-size: 18px;
}.loader {position: relative;width: 100px;height: 100px;margin: 10px;/* background-color: violet; */
}.loader span {position: absolute;width: 100px;height: 100px;animation: animate 3.5s linear infinite;
}.loader span::before {position: absolute;content: "";background-color: #FFF;width: 10px;height: 10px;bottom: 0;left: calc(50% - 5px);border-radius: 50%;
}.loader span:nth-child(1) {animation-delay: 0.1s;
}.loader span:nth-child(2) {animation-delay: 0.2s;
}.loader span:nth-child(3) {animation-delay: 0.3s;
}.loader span:nth-child(4) {animation-delay: 0.4s;
}.loader span:nth-child(5) {animation-delay: 0.5s;
}@keyframes animate {74%{transform: rotate(600deg);}79% {transform: rotate(720deg);opacity: 1;}80% {transform: rotate(720deg);opacity: 0;}100% {transform: rotate(810deg);opacity: 0;}
}

HTML+CSS制作Windows启动加载动画相关推荐

php设置加载动画,如何用CSS3制作页面圆圈加载动画（附代码）
打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...
心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
css 实现心形加载动画
文章目录前言一.html代码二.css 总结前言心形加载动画提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <html><head&g ...
html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
css线条伸缩_CSS3加载动画之线条伸缩
加载动画之线条伸缩效果图思路通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影.对动画而言,keyframes 和 animation 是必不可少的技巧.同时本例中使用了 ...
html吃豆豆代码,超萌css制作吃豆豆加载效果
web前端群,189394454,有视频.源码.学习方法等大量干货分享
python能做页面加载动画吗_HTML+CSS实现页面加载（loading）动画效果
大家在浏览页面时有没有遇到页面正在loading(加载)的情况,那作为一个前端开发人员,你知道如何用CSS3和HTML制作页面加载动画效果吗?这篇文章就和大家分享一个超级简单实用的CSS3 圆圈加载( ...
ionic 去掉启动页的加载动画菊花转
ionic 去掉启动页的加载动画菊花转在config.xml文件里添加 <preference name="ShowSplashScreenSpinner" value= ...

HTML+CSS制作Windows启动加载动画

HTML+CSS制作Windows启动加载动画相关推荐

最新文章

热门文章