1，CSS 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;
3，QQ彩贝高级搜索页面。
4，百度糯米购物信息导航。
<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>
5，城市街景动画。
<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>
3076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
