制作圆形:
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50&%
制作半圆形:
制作上半圆或下半圆时,元素的宽度是高度的两倍,而且圆角半径为元素的高度值
制作左半圆或右半圆时,元素的高度是宽度的两倍,而且圆角半径为元素的宽度值
制作扇形:
是元素宽度,高度,圆角半径相同
圆角取值不同
标准文档流:是指元素根据块元素或行内元素的特性按照从上到下,从左到右的自然排列,这也是元素默认的排列方式
display属性【用于指定HTML标签的显示方式】
display:block:的意思是把span元素转化为块元素,这样做它就具有块元素的特性,支持宽度(width)和高度(height),独占一行
display:inline-block;使div元素和span元素排在一行
display:none:设置元素不会被显示
display:inline;可以实现把块元素变成行内元素的特性
float属性【通过float属性定义网页元素在那个方向浮动,常用属性值有左浮动,右浮动和不浮动】
left:元素向左浮动
right:元素向右浮动
none:元素不浮动
clear【clear属性常用于清楚浮动带来的影响】
left:往左侧不允许浮动元素
right:往右侧不允许浮动元素
both:往左,右两侧不允许浮动元素
none:默认值,允许浮动元素出现在两侧
父级添加overflow属性
可以用来清楚浮动来扩张盒子的高度,由于这种方法不会产生冗余标签,仅需要设置外层盒子的overflow属性值为hidden即可,因此这种方法常用来设置外层盒子包含内层浮动元素的效果,防止父级边框塌陷
visible:默认值,内容不会被修剪,会呈现在盒子之外
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
position属性【指定相对其父级的位置或相对他自身一个在的位置】
static:为默认值,它表示盒子保持在原来应该在的位置上,没有任何移动的效果。
rlative:可以将relative属性设置元素的相对定位,除了将position属性设置为relative还需要指定一定的偏移量,水平方向用left或right属性来指定
1:
<html>
<head>
<meta charset="UTF-8">
<title>HTML5+CSS3城市场景动画</title>
<style>
body {margin:0; padding:0; background-color:#ddf5f7;}
/*-------- 天空背景以及动画 --------*/
.stage {
position: relative;
overflow: hidden;
height: 600px;
background: #ddf5f7;
-webkit-animation: skyset 30s infinite linear normal;
-moz-animation: skyset 30s infinite linear normal;
-o-animation: skyset 30s infinite linear normal;
animation: skyset 30s infinite linear normal;
}
@-webkit-keyframes skyset {
0% { background: #ddf5f7;}
25% { background: #350847;}
50% { background: #0f192c;}
75% { background: #f9c7b8;}
100% { background: #ddf5f7;}
}
@-moz-keyframes skyset {
0% { background: #ddf5f7;}
25% { background: #350847;}
50% { background: #0f192c;}
75% { background: #f9c7b8;}
100% { background: #ddf5f7;}
}
@-o-keyframes skyset {
0% { background: #ddf5f7;}
25% { background: #350847;}
50% { background: #0f192c;}
75% { background: #f9c7b8;}
100% { background: #ddf5f7;}
}
/*-------- 气球以及动画 --------*/
.balloon {
position: absolute;
z-index: 3;
top: 5%;
right: -157px;
background: url(images/balloon.png) no-repeat no-repeat center;
height: 227px;
width: 157px;
-webkit-animation: balloon 30s infinite ease alternate;
-moz-animation: balloon 30s infinite ease alternate;
-o-animation: balloon 30s infinite ease alternate;
animation: balloon 30s infinite ease alternate;
}
@-webkit-keyframes balloon {
0% { right: -157px;
transform: rotate(0deg);}
25% { right: 25%;
transform: rotate(30deg);}
50% { right:50%;
transform: rotate(60deg);}
75% {right:75%;
transform: rotate(30deg);}
100% { right: 100%;
transform: rotate(0deg);}
}
@-moz-keyframes balloon {
0% { right: -157px;
transform: rotate(0deg);}
25% { right: 25%;
transform: rotate(30deg);}
50% { right:50%;
transform: rotate(60deg);}
75% {right:75%;
transform: rotate(30deg);}
100% { right: 100%;
transform: rotate(0deg);}
}
@keyframes balloon {
0% { right: -157px;
transform: rotate(0deg);}
25% { right: 25%;
transform: rotate(30deg);}
50% { right:50%;
transform: rotate(60deg);}
75% {right:75%;
transform: rotate(30deg);}
100% { right: 100%;
transform: rotate(0deg);}
}
/*-------- 城市场景图片 --------*/
.skyline {
position: absolute;
z-index: 5;
width: 100%;
bottom: 26%;
background: url(images/skyline.png) repeat no-repeat;
height: 147px;
}
.beans {
position: absolute;
z-index: 4;
height: 201px;
width: 88px;
bottom: 30%;
left: 50%;
background: url(images/beans.png) no-repeat no-repeat;
}
.ground {
position: absolute;
width: 100%;
bottom: 0;
}
.ground.front {
z-index: 30;
background: url(images/groundFront.png) repeat no-repeat center;
height: 301px;
}
.ground.mid {
z-index: 20;
background: url(images/groundMid.png) repeat no-repeat;
height: 299px;
}
.ground.back {
z-index: 10;
background: url(images/groundBack.png) repeat no-repeat center;
height: 281px;
}
.dowEventCenter {
position: absolute;
z-index: 12;
bottom: 20%;
left: 5%;
background: url(images/dowEventCenter.png) no-repeat no-repeat center;
height: 236px;
width: 524px;
}
.planetarium {
position: absolute;
z-index: 12;
bottom: 18%;
right: 10%;
background: url(images/Planetarium.png) no-repeat no-repeat center;
height: 285px;
width: 347px;
}
.friendshipShell {
position: absolute;
z-index: 21;
bottom: 18%;
left: 20%;
background: url(images/friendshipShell.png) no-repeat no-repeat center;
height: 370px;
width: 231px;
}
.glockenspiel {
position: absolute;
z-index: 11;
bottom: 26%;
right: 50%;
background: url(images/Glockenspiel.png) no-repeat no-repeat center;
height: 263px;
width: 137px;
}
</style>
</head>
<body>
<section>
<div class="stage">
<div class="skyline"></div>
<div class="beans"></div>
<div class="ground back"></div>
<div class="ground mid"></div>
<div class="ground front"></div>
<div class="dowEventCenter"></div>
<div class="planetarium"></div>
<div class="friendshipShell"></div>
<div class="glockenspiel"></div>
<!--汽球-->
<div class="balloon"></div>
</div>
</section>
</body>
</html>
2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转按钮</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
ul {
list-style: none;
margin-bottom: 30px;
overflow: hidden;
}
ul li {
float: left;
margin: 10px;
}
ul a {
display: block;
float: left;
text-decoration: none;
}
ul img {
border: 0;
}
#box img:hover{
-moz-transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
-ms-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
</style>
</head>
<body>
<h2>顺时针旋转360度放大1.2倍</h2>
<ul id="box">
<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
</body>
</html>