跟着，渡一教育学前端，脑壳炸了😵，不过我还是做出来了，复制下面的代码，粘贴就可以食用了
效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载动画</title> <link rel="stylesheet" href="css/index.css"> <!-- jquery在线引入网址 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> /* 初始化所有的元素 */ *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; /* 设置背景 */ background-color: aqua; /* 一种布局方式。它即可以应用于容器中，也可以应用于行内元素 目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性。设为Flex布局以后， 子元素的float、clear和vertical-align属性将失效。 */ display: flex; /* 实现的是水平居中 */ justify-content: center; /* 实现的是垂直居中 */ align-items: center; } /* 设置怪物样子 */ .monster{ position: relative; width: 100px; height: 100px; /* 0.5相当于50% 就变成了一个圆 */ border-radius: 10px; background-color: black; /* 分开两个怪物 */ margin: 10px; display: flex; justify-content: center; align-items: center; /* 按照列来排序 默认是行排序 */ flex-direction: column; /* 设置阴影 第一个是X的偏移量 第二个是Y的偏移量 第三个是阴影的距离 最后一个是阴影的颜色值*/ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 设置动画 第一个设置变量名 name 第二个时间 一直跳一直跳 0到-50 来回都做一个动画，不然非常突兀的感觉，就i有一个缓冲的效果*/ animation: jumping 0.8s infinite alternate; } /* 设置眼睛 */ .monster .eye{ /* 基于父级的40% */ width: 40%; height: 40%; /* 设置圆角 */ border-radius: 50%; background-color: white; margin: 10px; /* 为了设置眼球居中 */ display: flex; justify-content: center; align-items: center; } /* 设置眼球 */ .monster .eye .eyeBall{ width: 50%; height: 50%; border-radius: 50%; background-color: thistle; animation: eyemove 1.6s infinite alternate; } .monster .mouth{ width: 32%; height: 12px; border-radius: 12px; background-color: white; } /* 头上的角 :befor和::before写法是等效的 :befor是CSS2的写法，::before是CSS3的写法 伪类对象要配合content属性一起使用 伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入 伪类对象的特效通常要使用:hover伪类样式来激活 之所以被称为伪元素，是因为他们不是真正的页面元素 tml没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样 可以对其使用诸如页面元素一样的css样式， 表面上看上去貌似是页面的某些元素来展现， 实际上是css样式展现的行为，因此被称为伪元素。 :after 伪元素在元素之后添加内容。 头上的角是两个 -- 旋转 45°之后拼成的 */ .monster::before,.monster::after{ /* absolute会找他最近的有定位的父级定位，不管是reletive还是absolute */ position: absolute; /* content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 */ content: ''; /* 变成一个盒子，可以设置 宽高 */ display: block; width: 20%; height: 10px; border-radius: 10px; background-color: white; /* 基于monster定位 */ top: -10px; left: 50%; } /* 设置每个角的平移和旋转 */ .monster::before{ /* 平移 旋转rotate */ transform: translateX(-70%) rotate(45deg); } .monster::after{ transform: translateX(-30%) rotate(-45deg); } .monster.blue{ /* 给他加上延迟 第一个跳了 他才跳 */ animation-delay: 0.5s; background-color:wheat; } .monster.blue .eyeBall,.monster.blue .mouth{ background-color: darkkhaki; } /* @keyframes规则可以使用来创建动画， 创建动画是通过逐步改变从一个CSS样式到另一个CSS样式， 在动画过程中，您可以更改CSS样式的设定多次， 指定的变化时发生时使用％，或关键字"from"和"to"， 这是和0％到100％相同，0％是开头动画， 100％是当动画完成。为了获得最佳的浏览器支持， 您应该始终定义为0％和100％的选择器。 @keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀）， 但不兼容IE 9以及更早版本的浏览器。 关键帧 jumping 相当于变量 */ @keyframes jumping{ 50%{ top: 0; /* 在他没有往上跳的时候的阴影 */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } 100%{ top: -50px; /* 在他跳起来的时候 Y方向变*/ box-shadow: 0 120px 20px rgba(0, 0, 0, 0.2); } } /* 设置眼睛X方向移动 */ @keyframes eyemove{ 0%,10%{ transform: translate(50%); } 90%,100%{ transform: translate(-50%); } } /* 铺满屏幕 */ .pageLoading{ /* 基于窗口的定位 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: wheat; display: flex; justify-content: center; align-items: center; /* 列 */ flex-direction: column; /* 在他执行opacity 的时候也有一个加载动画 */ transition: opacity 0.5s; } /* 白色的条 */ .pageLoading .loading{ width: 200px; height: 8px; background-color: white; border-radius: 5px; /* 调整距离 */ margin-top: 50px; /* 控制增长的进度条 */ overflow: hidden; } .pageLoading .loading .bar{ /* 这个里面的进度条跟外面的一样的 初始是 0 */ width: 0%; height: 100%; background-color: tomato; } .pageLoading.complete{ /* 透明度 不透明0.5 */ opacity: 0; } /* monster 旋转一圈 */ .pageLoading.complete .monster{ /* 动画执行的时间 */ transition: 0.5s; /* 缩小 旋转 */ transform: scale(0.1) rotateZ(360deg); } </style> </head> <body> <!-- 这是第二个界面看到的内容 --> <div> <!-- 文字部分 --> <h2 class="monsterText">Hello <br>Adger </h2> <h3>I want you to be better</h3> </div> <!-- 第一个怪物 --> <div class="monster"> <!-- 眼睛部分 --> <div class="eye"> <!-- 眼球部分 --> <div class="eyeBall"></div> </div> <!-- 嘴巴部分 --> <div class="mouth"></div> </div> <!-- 第二个怪物部分 --> <div class="monster blue"> <!-- 眼睛部分 --> <div class="eye"> <!-- 眼球部分 --> <div class="eyeBall"></div> </div> <!-- 嘴巴部分 --> <div class="mouth"></div> </div> <!-- loading加载动画 这个div覆盖到那些div之上 --> <div class="pageLoading"> <!-- 第三个怪物部分 --> <div class="monster"> <!-- 眼睛部分 --> <div class="eye"> <!-- 眼球部分 --> <div class="eyeBall"></div> </div> <!-- 嘴巴部分 --> <div class="mouth"></div> </div> <!-- loading加载 上面的条--> <div class="loading"> <!-- 在里面一直跑的条 --> <div class="bar"></div> </div> </div> <script> var per = 0; // 不断的让width += 1 每隔 30 毫秒就加等于 1 var time; console.log(time) time = setInterval(function() { $(".bar").css("width",per + "%") // 每次一进来 就加等于 1 per += 1; // 如果 width > 100 了 就停下来 展示 if(per > 100){ // 当大于 100的 时候 给pageLoading 加一个class类名透明度变透明 complete不能加点 然后清除时间 $(".pageLoading").addClass('complete'); // 当大于 100的 时候 monsterText 慢慢展示 setTimeout(function () { $(".monsterText").html("<h2>I am adger</h2>") },3000); clearInterval(time); } },30); </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
