CSS模拟苹果重启界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body {
background: #111 url("http://www.clipartbest.com/cliparts/Rcd/g5d/Rcdg5dXXi.png");
background-size: 25vmin;
background-repeat: no-repeat;
background-position: center 40%;
height: 100vh;
margin: 0;
}
.progress {
width: 400px;
max-width: 85vw;
height: 4px;
position: absolute;
bottom: 20vh;
left: 50%;
border-radius: 4px;
background: rgba(255,255,255,0.5);
transform: translate(-50%, -50%);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 4px;
background: #fff;
animation: load 15s linear;
}
@-moz-keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
@-webkit-keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
@-o-keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
@keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
.
相关推荐
Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面
css模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.
CSS在模拟下拉框的过程中扮演了关键角色。我们可以通过CSS定义下拉按钮的样式，包括背景色、边框、字体等，同时也可以为显示的选项列表设置样式，如宽度、高度、过渡效果等。例如： ```css .custom-select { ...
【纯CSS3模拟iPhone X背景切换动画】 在现代网页设计中，动态效果是提升用户体验的重要手段之一。"纯CSS3模拟iPhone X背景切换动画"是一个技术主题，它旨在利用CSS3的强大功能，无需JavaScript干预，就能实现类似...
在本项目中，“CSS3+jQuery 模拟苹果系统”是一个使用现代Web技术来复刻苹果设备用户界面的示例。这个项目结合了CSS3的样式功能和jQuery的交互效果，为网页创建出类似苹果系统的视觉体验和交互行为。下面我们将深入...
在本项目"jQuery+CSS3模拟Mac OS界面.zip"中，开发者使用了现代Web技术，包括HTML5、CSS3和jQuery，来创建了一个类似于Mac OS操作系统界面的交互式用户界面。这个项目对于学习如何利用这些技术来构建动态、响应式的...
在本文中，我们将深入探讨如何使用CSS和HTML创建一个简洁且高效的登录界面。CSS（层叠样式表）和HTML（超文本标记语言）是构建网页布局和设计的基础工具，它们一起构成了网页的结构和样式。 首先，让我们从HTML部分...
在这个登录界面中，可能使用了CSS3的渐变、阴影、圆角和边框图片等特性来增加视觉吸引力。例如，`border-radius`属性用于创建圆角效果，`box-shadow`则为元素添加了深度感。 CSS3还支持动画和过渡效果，使得登录...
苹果系统的导航菜单以其简洁、直观的设计闻名，本项目旨在利用JavaScript和CSS技术来复现这一效果。接下来，我们将深入探讨如何使用这两种强大的前端技术来实现这个功能。 首先，CSS（Cascading Style Sheets）是...
为了模拟苹果Dock的阴影效果，可以使用伪元素`::before`和`::after`： ```css .dock-item::before, .dock-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; ...
CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟开关样式.rar CSS3模拟...
在这个登录界面源码中，CSS3的这些特性被广泛应用于创建平滑的动画过渡，提升用户体验。 在压缩包的文件名中，"animated-login-form"可能是一个带有动态效果的登录表单，利用CSS3的动画来增强用户交互。"login-...
在网页设计领域，JavaScript（JS）和层叠样式表（CSS）是两种不可或缺的技术，用于创建动态、交互式的用户界面。本项目通过结合这两种技术，实现了经典的苹果机（MAC OS）桌面特效，让访客可以体验到类似苹果操作...
本项目名为“带科幻风格的纯CSS3用户登录界面设计”，灵感来源于科幻电影《钢铁侠》中的斯塔克工业超级电脑，旨在创建一个具有未来感和科技气息的登录界面。 首先，我们要理解CSS3是什么。CSS3（Cascading Style ...
苹果菜单栏以其简洁、清晰的界面设计而闻名，它通常位于屏幕顶部，包含应用的图标、菜单项和系统状态指示器。复刻这样的效果需要对CSS有深入的理解，特别是对于盒模型、定位、过渡、伪类选择器以及响应式设计的理解...
本教程将深入探讨如何利用jQuery库和CSS3技术，构建一个模拟手机闹钟界面的效果。这个项目不仅适用于学习者掌握相关技能，也对实际项目开发具有很高的参考价值。 首先，我们来看一下主要涉及的技术点： 1. **...
jQuery css3模拟iPhone界面及滑动解锁代码，分别引入jquery-ui-1.8.16.custom.min.js、jquery.1.7.js、modernizr-2.js、iphone.js几个脚本，由于使用了CSS3技术，因此在IE9以下版本的浏览器中显示效果有问题，请使用...
仿写苹果官网，纯html+css,零基础学了三天小成果，使用hbuilder软件
在这个项目中，“使用css绘制的iphoneX界面”是一个有趣的实践，旨在利用CSS的特性来创建一个视觉上与苹果iPhone X相似的界面。这个练习不仅可以提升开发者对CSS布局、选择器、伪类和过渡等概念的理解，还可以展示...