【HTML5校企公益课】第三天
1、上午2D。旋转变色的。。。
基本思路就是先写静态画面然后添加动画。
<!--告诉浏览器该文件为网页格式-->
<html>
<!--网页的头部标签-->
<head>
<!--设置网页的编码格式，让中文不乱码-->
<meta charset="utf-8">
<!--标题-->
<title>2D动画</title>
<!--设置元素选择器的样式-->
<style>
/*根据id获取 选择器 #id名，根据class名 .class名*/
.classA {
/*设置宽高*/
width: 20px;
height: 20px;
/*设置颜色*/
background-color: black;
/*设置形状*/
border-radius: 50%;
/*position*/
position: absolute;
/*运算符号两边一定要有空格*/
left: calc(50% - 10px);
top: calc(50% - 10px);
/*设置动画*/
animation: changeColor 3s infinite linear reverse;
} /*转动的圆*/
.classB {
/*设置宽高*/
width: 100px;
height: 100px;
/*设置颜色*/
background-color: black;
/*设置形状*/
/*border-radius: 50%;*/
/*position*/
position: absolute;
left: calc(50% - 50px + 100px);
top: calc(50% - 50px + 100px);
/*设置动画*/
/*动画名称 必要的*/
animation-name: xuanzhuan, changeColor;
/*设置动画时间 必要的。*/
animation-duration: 5s;
/*设置动画次数 inifinaite 匀速*/
animation-iteration-count: infinite;
/*设置速率 linear 匀速*/
animation-timing-function: linear;
/*设置动画的方向*/
animation-direction: reverse;
/*将上面的动画属性合并为以下写法，仅适用于单个动画，多个动画的设置只能分开写
animation: xuanzhuan 3s infinite linear reverse;
animation: changeColor 0.25s infinite linear reverse;
/*设置旋转中心，默认是自转*/
transform-origin: -50px -50px;
} /*设置动画*/
@keyframes xuanzhuan{
/*设置初始状态*/
0%{
/*转换 transform*/
transform: rotate(0deg) scale(1);
}
/*设置结束状态 scale缩放 translate平移 倾斜 skew*/
50%{
transform: rotate(180deg) scale(2);
}
100%{
transform: rotate(360deg) scale(1);
}
} @keyframes changeColor{
0%{
background-color: white;
}
10%{
background-color: aliceblue;
}
20%{
background-color: bisque;
}
30%{
background-color: white;
}
40%{
background-color: white;
}
50%{
background-color: #FF0000;
}
60%{
background-color: white;
}
70%{
background-color: #FF0000;
}
80%{
background-color: aquamarine;
}
90%{
background-color: blue;
}
100%{
background-color: red;
}
}
</style> </head>
<!--网页的身体-->
<body>
<div id="aa", class="classA"></div>
<div id="bb", class="classB"></div>
</body>
</html>
2、下午3D。旋转正方体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
/*取消body标签默认产生的外间距*/
margin: 0;
background-color: pin;
/*第一步：开启弹性布局,对子元素*/
display: flex;
/*第二步：设置水平方向居中 justify-content自适应*/
justify-content: center;
/*第三部：设置垂直居中*/
align-items: center; /*设置镜头与平面的距离*/
perspective: 3000px;
/*设置镜头在平面上的位置*/
/*perspective-origin: 0% 0%;*/
perspective-origin: right top;
}
/*定义section容器的大小颜色*/
section {
width: 300px;
height: 300px;
/*设置相对定位：目的让【子】元素设置【绝对】定位时可以【参照】*/
position: relative;
/*开启3D样式*/
transform-style: preserve-3d;
/*旋转*/
animation: xuanzhuan 6s infinite linear;
} @keyframes xuanzhuan {
/*旋转的时候z轴保持不变,x和y做360度旋转*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
} /*对每一个div统一设置样式*/
div {
width: 300px;
height: 300px;
border: 2px solid black;
/*将文本居中*/
/*水平*/
text-align: center;
/*设置行高*/
line-height: 300px;
/*设置文本格式*/
font-family: "agency fb";
font-size: 30px;
color: darkblue;
/*定位：每一个面【相对】大箱子设置【绝对】定位*/
position: absolute;
opacity: 0.7;
/*设置图片*/
background-repeat: no-repeat;
background-size: cover;
}
.front {
background-image: url(../img2/1.jpg);
transform: translateZ(150px);
}
.back {
background-image: url(../img2/2.jpg);
transform: translateZ(-150px);
}
/*旋转的时候坐标轴也会跟着旋转*/
.left {
background-image: url(../img2/3.jpg);
transform: rotateY(90deg) translateZ(150px);
}
.right {
background-image: url(../img2/4.jpg);
transform: rotateY(90deg) translateZ(-150px);
}
.top {
background-image: url(../img2/5.png);
transform: rotateX(90deg) translateZ(150px);
}
.down {
background-image: url(../img2/6.jpg);
transform: rotateX(90deg) translateZ(-150px);
}
</style>
</head>
<body>
<!--第一步：定义一个大盒子来装六个面-->
<section>
<!--装六个面 前后左右上下-->
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="down"></div>
</section>
</body>
</html>
要把section想象成一个大盒子。。。
【HTML5校企公益课】第三天的更多相关文章
- 【HTML5校企公益课】第一天
1.搭建基本的开发环境.学校电脑用的是浏览器是Chrome,编辑器是HBuilder. 2.初步介绍HTML5的Web项目基本结构. css:样式表 img:存放图片 js:存放脚本文件 .html: ...
- 【HTML5校企公益课】第二天
1.上午讲昨天的作业. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 【HTML5校企公益课】第四天
1.上午考试没去.. 2.下午跟不上.. 变色.html <!DOCTYPE html> <html> <head> <meta charset=" ...
- C语言探索之旅】 第一部分第四课第三章：变量的世界之显示变量内容
内容简介 1.课程大纲 2.第一部分第四课第三章:变量的世界之显示变量内容 3.第一部分第五课预告:基本运算 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用 ...
- 吴恩达课后习题第二课第三周：TensorFlow Introduction
目录 第二课第三周:TensorFlow Introduction Introduction to TensorFlow 1 - Packages 1.1 - Checking TensorFlow ...
- HTML5简单入门系列（三）
前言 本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存. 客户端存储数据介绍 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没 ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5 Canvas游戏开发（三）lufylegend开源库件(上)
lufylegend可以解决HTML5开发游戏中会遇到的一些问题: 1.各种浏览器对于JavaScript和HTML的解析是不一致的. 2.手机浏览器和PC浏览器的区别. 3.JavaScript并非 ...
- 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景
开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
随机推荐
- 提高php编程效率的小结
1.如果将类的方法定义为:static,它的执行效率将提升为近4倍 2.php中数组的元素调用,使用关联数组优于索引数组 3.使用each快于print. 4.尽量使用foreach()替代for() ...
- （转）java Exception层次结构详解
转自:http://www.importnew.com/14688.html 1. JAVA异常层次结构 异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程 ...
- 【分享】Windows日志查看工具分享
在Linux下查看日志,使用tail.grep.find等命令还比较方便,后来需要在Windows中处理一些问题,发现缺少类似的功能,比如tailf实时输出,于是在网上收集了一些相关的小工具,希望能够 ...
- VSCode调试配置
http://code.visualstudio.com/docs/editor/debugging#_launch-configurations VSCode内置Node.js运行时, 能调试jav ...
- Linux中buffer/cache,swap,虚拟内存和page ++
1.Buffer 和 cache Free 命令相对于top 提供了更简洁的查看系统内存使用情况: [apptest@vs022 ~]$ free -m ——以MB为单位 ...
- hdu4328(经典dp用悬线法求最大子矩形)
http://wenku.baidu.com/view/728cd5126edb6f1aff001fbb.html 关于悬线法,这里面有详解. 我当时只想到了记录最大长度,却没有想到如果连最左边和最右 ...
- 【BZOJ1511】[POI2006]OKR-Periods of Words next数组
[BZOJ1511][POI2006]OKR-Periods of Words Description 一个串是有限个小写字符的序列,特别的,一个空序列也可以是一个串. 一个串P是串A的前缀, 当且仅 ...
- oracle的order by decode根据文字自定义排序的例子
oracle的order by decode根据文字自定义排序的例子: order by decode(t.title, '当前生效预警', 1, '今日即将生效', 2, '明日预计生效', 3, ...
- Spring Data JPA 一：环境搭建
搭建开发环境是最麻烦的事情,各种冲突各种异常,记一下搭建过程,仅供大家参考: 用的gradle搭建的项目,先亮一下项目的大概目录: 注意一定要是这个 web工程用spring/src/main/web ...
- [LintCode] 带重复元素的排列
递归实现: class Solution { public: /** * @param nums: A list of integers. * @return: A list of unique pe ...