【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游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
随机推荐
- Page_ClientValidate 用法
JS script function ConfirmMe(){ return confirm("Do you want to proceed?");} ASPX <asp ...
- UE寻找Actor
void FTestButtonModule::PluginButtonClicked() { GEngine->AddOnScreenDebugMessage(-, .f, FColor::R ...
- Request的属性和防止图片被盗链
Request.AppRelativeCurrentExecutionFilePath,获取当前执行请求相对于应用根目录的虚拟路径,以~开头,比如"~/default.ashx" ...
- select标签设置只读的方法（下拉框不可选但可传值）
1. <select id="s1" name="s1" onfocus="this.defaultIndex=this.selectedInd ...
- 69、ViewPagerIndicator+ViewPager实现Tab
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- jQuery初始化$(function() { }
$(document).ready(function () { }//没有双引号 $(function() { }
- oracle批量update
我个人觉得写的很好 http://blog.csdn.net/wanglilin/article/details/7200201 需求: 将t2(t_statbuf)表中id和t1(T_Mt)表相同的 ...
- orchestrator-Raft集群部署
本文简要说明下orchestrator的Raft集群部署,其实部署很简单主要是好好研究下配置文件的配置,这里我的样例配置文件暂时只适用于我们这块业务 如果您自己使用请根据情况自行修改. 主要通过配置文 ...
- Storm-源码分析-Topology Submit-Task
mk-task, 比较简单, 因为task只是概念上的结构, 不象其他worker, executor都需要创建进程或线程 所以其核心其实就是mk-task-data, 1. 创建TopologyCo ...
- 转！！Java设置session超时（失效）的时间
Java设置session超时(失效)的时间 在一般系统登录后,都会设置一个当前session失效的时间,以确保在用户长时间不与服务器交互,自动退出登录,销毁session具体设置的方法有三种:1 ...