【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游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
随机推荐
- Openstack(Kilo)安装系列之Keystone（四）
创建租间.用户.角色 一.To configure prerequisites 1.Configure the authentication token: export OS_TOKEN=ADMIN_ ...
- php form 图片上传至服务器上
本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...
- Java反射基础（一）
构造方法的获取 1. 四个方法:getConstructors()获取所有的构造方法: getConstructor(parameters)获取匹配参数的构造方法: getDeclaredCons ...
- 上传文件ie7
https://www.cnblogs.com/front-end-develop/p/6214818.html 第一步:html中引入jQuery-1.7.1.js和ajaxFileUpload.j ...
- eclipse ${user}和${date}
在Eclipse中使用类的自动注释时,@author ${user}, 这个值不会随着你更改系统用户名而改变.有的人会将这个 ${user} 变量直接替换为某个固定名称. 以下方法可以修改它的值. 在 ...
- 阿里面试经历JAVA总结
为记录阿里的电面经历,特与大家分享,岗位是JAVA研发工程师. 一面主要问题如下: 1)首先自我介绍 2)数据结构算法的基本问题,如排序算法,二叉树遍历,后序遍历非递归,图的最短路径问题 3)对一个数 ...
- 《从零开始学Swift》学习笔记（Day 55）——使用try?和try!区别
原创文章,欢迎转载.转载请注明:关东升的博客 在使用try进行错误处理的时候,经常会看到try后面跟有问号(?)或感叹号(!),他们有什么区别呢? 1.使用try? try?会将错误转换为可选值,当调 ...
- Centos7 下安装mysql数据库
centos7系统,安装mysql发现已经默认的是mariadb. 只能安装mariadb,mariadb是mysql一个分支,对mysql完全支持 1 安装 yum -y install maria ...
- 会议室预订 - 对td的处理以区分预订者
w 待处理
- shader常用
1 模型空间转裁剪空间 UnityObjectToClipPos(v.vertex) 2 模型空间转世界空间 mul( unity_ObjectToWorld, v.vertex ) 3 雾三件套 U ...