吃豆人和火星圆环案例
1. 创建项目
先在桌面创建一个文件夹，然后将这个文件夹拖动到开发具HbuilderX里面
2.创建html网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>上面是最基本的网页结构，你们可以把这个网页结构看成是一个人
<head></head>可以看成是一个人的头部
<body></body>可以看成是一个人身体
<title></title>浏览器的标题，也相当于人的姓名
3.先完成头部的部分
根据我们的分析，我们是希望得到一半圆就可以了
<style>
/* class在样式里面有一个特殊的符号叫. */
.header_up{
width: 400px;
height: 200px;
background-color: yellow;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
}
</style>
<div class="header_up"></div>通过上面的代码，我们已经将吃豆人的上半个脑袋画出来了，接下来，我们先不画下半个脑袋 ，我们先脑袋动起来
在之前的学习里面，我们已经形成了X,Y,Z轴的概念，并且也熟悉了变换的相关知识点，如果没有印象的学生可能参考下面的基础笔记
http://www.softeem.xin:8090/archives/%E5%8F%98%E6%8D%A2
现在我们要使用动画来让上边的脑袋动起来，接下来所使用到的2个点就是动画的定义与动画的使用
http://www.softeem.xin:8090/archives/CSS%E5%8A%A8%E7%94%BB
/* class在样式里面有一个特殊的符号叫. */
.header_up{
width: 400px;
height: 200px;
background-color: yellow;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
/* 变换 */
transform: rotateZ(0deg);
/* 动画的名称 */
animation-name: ani_header_up;
/* 动画的时间 */
animation-duration: 2s;
/* 动画重复的次数,infinite代表无穷次 */
animation-iteration-count: infinite;
/* 动画匀速执行 */
animation-timing-function: linear;
}
/* 定义一个动画 */
@keyframes ani_header_up{
0%{
transform: rotateZ(0deg);
}
50%{
transform: rotateZ(-30deg);
}
100%{
transform: rotateZ(0deg);
}
}完成眼晴部分
首先我们可以根据之前所学习的”子绝父相”去完成，关于子绝父相，可以参考下面的笔记
http://www.softeem.xin:8090/archives/%E5%AE%9A%E4%BD%8D
完成豆子的部分
为了更好的去理解我们的代码，我们在当前的文件夹项目下面新建一个html的文件，命名为02.html
土星圆环案例
1. 创建项目
先在桌面上面创建一个文件夹，命名为
huan，然后将这个文件夹拖入到HbuilderX这个开发工具里面在当前项目的夹文件夹下面创建一个
index.html的文件，并在浏览器中打开开始编码
2.项目代码
先把网页的背景设置为黑色
设置一个盒子，并设置圆锥渐变，具体的基础知识可以参考下面的笔记
http://www.softeem.xin:8090/archives/%E6%B8%90%E5%8F%98#%E5%9C%86%E9%94%A5%E6%B8%90%E5%8F%98
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标哥哥----土星圆环</title>
<style>
body {
background-color: black;
}
.box {
width: 400px;
height: 400px;
/* 圆锥渐变 */
background: conic-gradient(red, blue, green, deeppink, gold, red);
border-radius: 200px;
/* 变换：旋转X轴70度 旋转Y轴15度 */
transform: rotateX(70deg) rotateY(13deg);
/* 使用定义好的动画效果 */
animation: ani_box 10s infinite linear;
}
.small-box {
width: 400px;
height: 400px;
background-color: black;
/* scale是缩放 */
transform: scale(0.68);
border-radius: 200px;
}
.circle {
width: 200px;
height: 200px;
/* 绝对定位 */
position: absolute;
/* 左负右正，上负下正 */
left: calc(50% - 100px);
top: calc(50% - 100px);
border-radius: 50%;
/* 设置盒子的阴影 */
box-shadow: 0px 0px 30px 10px deeppink inset;
}
.main {
width: 400px;
height: 400px;
/* 相对定位 */
position: relative;
}
/* 定义一个动画 */
@keyframes ani_box{
0%{
transform: rotateX(70deg) rotateY(13deg) rotateZ(0deg);
}
100%{
transform: rotateX(70deg) rotateY(13deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="main">
<!-- 环 -->
<div class="box">
<div class="small-box"></div>
</div>
<!-- 球 -->
<div class="circle"></div>
</div>
</body>
</html>总结
transform变换的属性rotate旋转scale缩放
border-radius设置一个圆角，它有四个角“子绝父相”：当一个元素以另一个元素为标准进行位置设置的时候，最好使用子绝父相
元素类型的转换
块级元素：默认独自占有用一行
行内块级元素：可以排在同一行
diaplay:inline-block; /*将元素转换为行内块级元素*/overflow:hidden溢出隐藏@keyframes用于定义动画，animation用于使用动画conic-gradient圆锥渐变的使用HbuilderX开发工具的使用及项目的创建教程来源：软帝杨标老师
