课后作业

1.CSS3 2D变形中有哪些变形方式？各自使用方法是什么？

(1)移动 translate(x, y):在2D平面内以X轴和Y轴为标准进行移动

(2)缩放 scale(x, y) :可以对元素进行水平/垂直方向的缩放

(3)旋转 rotate(x deg):对元素进行旋转，正值为顺时针，负值为逆时针

(4)transform-origin:调整元素转换变形的原点

(5)倾斜 skew(x deg, y deg):把元素水平方向上或向下倾斜

2.使用CSS3过渡实现的动画效果和使用animation属性实现的动画效果有什么区别？分别如何使用？

主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

过渡实现动画语法:transition: property duration timing-function delay;

animation属性实现动画:animation-name属性值：绑定动画名(@keyframes名);

3.制作QQ彩贝高级搜索页面

HTML代码:

QQ彩贝高级搜索

CSS样式:

.box {

border: 1px solid #CCCCCC;

width: 250px;

margin: 0px auto

}

#input {

background-color: #CCCCCC;

width: 70px;

height: 30px;

margin-left: 90px;

margin-bottom: 15px;

}

.nav {

width: 170px;

margin-left: 35px;

margin-bottom: 15px;

display: none;

animation: lyar 3s linear 1;

}

div h2 {

margin-left: 15px;

border-bottom: 6px red solid;

padding-bottom: 12px;

width: 210px;

}

select {

width: 70px;

height: 25px;

margin-left: 10px;

margin-bottom: 10px

}

.text{

text-indent: 1em;

}

div p input {

margin-left: 15px;

width: 210px;

height: 40px;

}

div:hover .nav {

display: block;

}

@keyframes lyar {

0% {

opacity: 0;

height: 0%;

}

10% {

height: 20%;

opacity: 0.1;

}

20% {

height: 30%;

opacity: 0.2;

}

30% {

height: 50%;

opacity: 0.3;

}

50% {

height: 60%;

opacity: 0.5;

}

70% {

height: 80%;

opacity: 0.7;

}

100% {

height: 100%;

opacity: 1;

}

}

4.制作百度糯米导航信息

HTML代码:

百度糯米购物信息导航

CSS样式:

.nav {

position: fixed;

top: 300px;

right: 0;

}

.nav span {

display: inline-block;

border: solid 1px #B81914;

border-radius: 5px;

color: white;

width: 90px;

line-height: 36px;

text-align: center;

opacity: 0;

background: #B81914;

float: right;

position: relative;

left: 90px;

}

.nav div {

margin-bottom: 5px;

position: relative;

left: 90px;

}

.nav img {

background: black;

padding: 10px 10px 10px 10px;

border-radius: 5px;

}

@keyframes lyar {

0% {

opacity: 0;

left: 0px;

}

25% {

opacity: 0.25;

left: -30px;

}

50% {

opacity: 0.5;

left: -60px;

}

100% {

opacity: 1;

left: -90px;

}

}

.nav div:hover span {

animation: lyar 0.1s linear both;

}

5制作城市街景动画

HTML代码:

街景动画

CSS样式:

* {

margin: 0px auto;

padding: 0px;

}

.nav {

height: 780px;

background: #212636;

animation: name 15s ease-in-out infinite alternate;

}

@keyframes name {

0% {

background: #212636;

}

20% {

background: #A68575;

}

40% {

background: #F7CCB5;

}

60% {

background: #DCECEC;

}

80% {

background: #B4C0CE;

}

100% {

background: #6D5E80;

}

}

.box1 {

position: absolute;

top: 500px;

z-index: 2;

}

.box2 {

position: absolute;

top: 480px;

left: -350px;

z-index: 12;

}

.box3 {

position: absolute;

top: 480px;

left: 440px;

z-index: 10;

}

.box4 {

position: absolute;

top: 480px;

right: -100px;

z-index: 10;

}

.box5 {

position: absolute;

top: 480px;

right: 920px;

z-index: 8;

}

.box6 {

position: absolute;

top: 480px;

right: -20px;

z-index: 8;

}

.box7 {

position: absolute;

top: 400px;

right: 1000px;

z-index: 1;

}

.box8 {

position: absolute;

top: 422px;

left: 200px;

z-index: 5;

}

.box9 {

position: absolute;

top: 320px;

left: 380px;

z-index: 8;

}

.box10 {

position: absolute;

top: 345px;

left: 650px;

z-index: 4;

}

.box11 {

position: absolute;

top: 475px;

left: 0px;

z-index: 1;

}

.box12 {

position: absolute;

top: 475px;

left: 680px;

z-index: 1;

}

.box13 {

position: absolute;

top: 495px;

right: -50px;

z-index: 1;

}

.box14 {

position: absolute;

top: 430px;

right: 435px;

z-index: 4;

}

.box15 {

position: absolute;

top: 140px;

right: 600px;

z-index: 4;

}

.box16 {

position: absolute;

top: 140px;

right: 1000px;

z-index: 4;

}

.box {

position: absolute;

top: 450px;

right: -205px;

z-index: 4;

}

.box17 {

position: absolute;

top: 140px;

right: 1400px;

z-index: 4;

}

.box18 {

position: absolute;

top: 150px;

right: 130px;

z-index: 5;

transform: rotate(10deg);

animation: noe 15s ease-in-out infinite alternate;

}

@keyframes noe {

0% {

transform: translate(0px) rotate(10deg);

}

20% {

transform: translate(-240px) rotate(10deg);

}

40% {

transform: translate(-480px) rotate(40deg);

}

60% {

transform: translate(-720px) rotate(70deg);

}

80% {

transform: translate(-960px) rotate(50deg);

}

100% {

transform: translate(-1500px) rotate(10deg);

}

}