CSS3动画
程序员文章站
2022-06-23 15:06:29
...
效果图
跟着，渡一教育学前端，脑壳炸了????，不过我还是做出来了，复制下面的代码，粘贴就可以食用了
<!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>
上一篇： 电饭煲蛋糕简单方便的两种做法