【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游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
随机推荐
- HP proliant服务器从usb启动
1,开机出现自检画面开始按F9进入设置,进入BIOS 选择standard boot order(rpl),把usb driver放在第一位,保存好 2,按F1开始启动. (注:我使用ubuntu14 ...
- 用用匿名函数和闭包加apply强制待定函数调用时使用特定上下文
<button id="test">点我</button> <script> var button={ clicked:false, click ...
- 开发新手教程【三】Arduino开发工具
Arduino开发环境搭建 获取Arduino IDE开发工具 下载地址 :http://arduino.cc/en/Main/Software 能够下载release 版.Beta版和前期版本号 A ...
- Jmeter JDBC执行多条SQL
今天在编写自动化回归脚本的时候,需要在jmeter的jdbc请求中执行多条sql,在百度里搜索了一些文章,按照网上提供的步骤,发现不起作用,后来发现是作者的截图误导了,为了让后面的同学少走弯路,这里我 ...
- 认识tornado（三）
实际上handler有很多讲究,在Application类的注释中,就讲了不少. 1. 首先,(regexp,tornado.web.RequestHandler)中的第一个参数不是普通的字符串,而是 ...
- 【BZOJ3439】Kpm的MC密码 Trie树+可持久化线段树
[BZOJ3439]Kpm的MC密码 Description 背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当 ...
- hibernate中inverse作用
默认 inverse="false"即该元素指向的类负责维护该关系. 如: <hibernate-mapping> <class name="com.h ...
- [UVa OJ] Longest Common Subsequence
This is the classic LCS problem. Since it only requires you to print the maximum length, the code ca ...
- 解决Windows 7 IIS7.5 用户 'IIS APPPOOL\{站点名} AppPool'登录失败
今天调试程序的时候,使用VS调试没有任何问题,但是发布到IIS就发生错误了,网上搜索了一下,问题具体上就出在IIS的应用程序池的设置上.我使用的是Windows7 IIS7.5. 错误为:用户 'II ...
- iOS接收远程通知响应方法
点击 iOS 接收远程推送主要牵扯到的方法有以下五种 (1) - (BOOL)application:(UIApplication *)application didFinishLaunchingWi ...