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彩贝高级搜索页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color:white;
width: 200px;
border: 1px gray solid;
padding-left: 30px;
}
nav{
background: red;
width: 160px;
height: 5px;
}
.b{
text-align: center;
}
div:hover .hide {
opacity: 1;
height: 100%;
}
select{
width: 60px;
margin: 8px;
}
.hide{
padding: 0 10px;
opacity: 0;
height: 0;
transition: all 1s linear;
}
}
</style>
</head>
<body>
<div class="box">
<h2>高级搜索</h2>
<nav></nav>
<p><input type="text" placeholder="请输入关键词" /></p>
<p > <input type="button" value="搜索" /></p>
<div class="hide">
<select name="">
<option value="1">场合</option>
</select>
<select name="">
<option value="1">性别</option>
</select>
<select name="">
<option value="1">风格</option>
</select>
<select name="">
<option value="1">色系</option>
</select>
<select name="">
<option value="1">价格</option>
</select>
<select name="">
<option value="1">年龄</option>
</select>
<select name="">
<option value="1">季节</option>
</select>
</div>
</div>
</body>
</html>
4制作百度糯米导航信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px auto;
}
#box {
position: fixed;
right: -10px;
top: 200px;
}
#box img {
border-radius: 5px;
padding: 10px 10px 10px 10px;
background: black;
}
#box span {
line-height: 38px;
display: inline-block;
background: red;
color: white;
position: relative;
right: 104px;
top: 0px;
opacity: 0;
float: right;
text-align: center;
border-radius:5px ;
}
#box :hover span {
opacity: 100;
animation: spread 1s linear;
}
#box div {
margin-bottom: 5px;
position: relative;
left: 50px;
}
@keyframes spread {
0% {
transform: translate(40px, 0);
}
100% {
transform: translate(0px, 0);
}
</style>
</head>
<body>
<img src="img.png" width="100%" />
<div id="box">
<div><span>购物车</span><img src="toolbar_05.png" /></div>
<div><span>我的关注</span><img src="toolbar_10.png" /></div>
<div><span>我的足迹</span><img src="toolbar_15.png" /></div>
<div><span>我的消息</span><img src="toolbar_19.png" /></div>
</div>
</body>
</html>
5制作城市街景动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
}
div{
background: gray;
width: 100%;
height: 350px;
animation: spread 8s infinite linear alternate ;
}
.ac{
background: url(img/balloon.png) no-repeat no-repeat center;
animation: ac 10s infinite linear alternate;
}
@keyframes ac{
0%{
transform: translate(-100px,0) rotate(0deg);
}
25%{
transform: translate(-300px,0) rotate(30deg);
}
50%{
transform: translate(-500px,0) rotate(60deg);
}
100%{
transform: translate(-1250px,0) rotate(0deg);
}
}
img:nth-of-type(1){
position:absolute;
top: 10px;
height: 250px;
width: 120px;
right: 40px;
transform: rotate(25deg);
}
img:nth-of-type(2){
position:absolute;
top: 100px;
left: 650px;
width: 100px;
}
img{
width: 300px;
}
img:nth-of-type(10){
position:absolute;
top: 280px;
left: 0px;
width: 1500px;
height: 100px;
z-index: 0;
}
img:nth-of-type(3){
position: absolute;
top: 180px;
width: 500px;
height: 200px;
left: 60px;
z-index: 5;
}
img:nth-of-type(4){
position: absolute;
top: 60px;
z-index: 7;
left: 150px;
height: 400px;
width: 200px;
}
img:nth-of-type(5){
position:absolute;
top: 110px;
height: 250px;
left: 480px;
z-index: 2;
width: 150px;
}
img:nth-of-type(9){
position:absolute;
top: 140px;
left: 800px;
z-index: 3;
}
img:nth-of-type(6){
position:absolute;
top: 320px;
width:100%;
left: 0px;
height: 200px;
z-index: 1;
}
img:nth-of-type(8){
position:absolute;
top: 270px;
left: 80px;
z-index:6 ;
width: 650px;
height: 250px;
}
img:nth-of-type(11){
position:absolute;
top: 270px;
z-index: 6;
width: 650px;
height: 250px;
}
img:nth-of-type(7){
position:absolute;
top: 270px;
z-index: 7;
width: 650px;
height: 250px;
left: -350px;
}
img:nth-of-type(12){
position:absolute;
top: 270px;
z-index: 7;
width: 650px;
height: 250px;
left: 300px;
}
img:nth-of-type(13){
position:absolute;
top: 270px;
z-index: 7;
width: 650px;
height: 250px;
right: -220px;
}
@keyframes spread{
0%{
background:plum ;
}
25%{
background:black ;
}
50%{
background:pink ;
}
100%{
background:white;
}
}
</style>
</head>
<body>
<div>
<img class="ac" src="balloon.png" />
<img src="beans.png" />
<img src="dowEventCenter.png" />
<img src="friendshipShell.png" />
<img src="Glockenspiel.png" />
<img src="groundBack.png" />
<img src="groundFront.png" />
<img src="groundMid.png" />
<img src="Planetarium.png" />
<img src="skyline.png" />
<img src="groundMid.png" />
<img src="groundFront.png" />
<img src="groundFront.png" />
</div>
</body>
</html>