【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游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
随机推荐
- Unity3D必备知识: 物理学公式
一.质点的运动(1)——直线运动 1)匀变速直线运动 1.平均速度V＝s/t(定义式) 2.有用推论Vt*Vt-Vo*Vo＝2as 3.中间时刻速度Vt/2＝V平＝(Vt+Vo)/2 4.末速度Vt＝ ...
- 浏览器同源策略及Cookie的作用域
from:https://blog.csdn.net/wang379275614/article/details/53333054 如题,本文主要介绍两方面内容:首先简单介绍浏览器的同源策略与其带来的 ...
- [Go语言]从Docker源码学习Go——init()方法和identifier首字母大小写区分
init()方法 如果想在一个go文件里,进行一些初始化的工作,可以把代码放到init()方法中. init()方法先被执行. func init() { // initialization of p ...
- IE、FF脚本兼容性问题
1.window.event IE有这个对象:FF没有,FF通过参数传递 2.获取事件源 IE:srcElement FF:target 3.添加与去除事件 IE:element.attachEven ...
- matplotlib绘制圆饼图
import matplotlib.pyplot as plt labels = ['Nokia','Samsung','Apple','Lumia'] values = [10,30,45,15] ...
- 在Scrapy中使用IP池或用户代理（python3）
一.创建Scrapy工程 scrapy startproject 工程名 二.进入工程目录,根据爬虫模板生成爬虫文件 scrapy genspider -l # 查看可用模板 scrapy gensp ...
- nodemailer发送邮件各个服务器接口
来自:https://github.com/nodemailer/nodemailer-wellknown/blob/master/services.json#L125 { "1und1 ...
- 被Chrome下的remove闪了一下腰
有用户反映说购物车删除不了东西,于是有了下面的测试. 浏览器:ie7 ie8 ie9 chrome 代码: <a href="javascript:" onclick=&qu ...
- springmvc控制器controller单例问题
springmvc controller默认的是单例singleton的,具体可以查看注解scope可以一目了然. 单例的原因有二: 1.为了性能. 2.不需要多例. 1.这个不用废话了,单例不用每次 ...
- vue-cli注册全局组件
在main.js开头引入组件,然后注册组件,例如: import Vue from 'vue' import VueRouter from 'vue-router' import VueResourc ...