寒假：HTML

最新推荐文章于 2021-01-19 16:36:06 发布

Foog。青陵

最新推荐文章于 2021-01-19 16:36:06 发布

阅读量120

点赞数

制作圆形：
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为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>

Foog。青陵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
寒假：HTML

制作圆形：元素的宽度和高度必须相同圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50&amp;amp;%制作半圆形：制作上半圆或下半圆时，元素的宽度是高度的两倍，而且圆角半径为元素的高度值制作左半圆或右半圆时，元素的高度是宽度的两倍，而且圆角半径为元素的宽度值制作扇形：是元素宽度，高度，圆角半径相同圆角取值不同标准文档流：是指元素根据块元素或行内元素的特性按照从上到下，从左到右的自...
复制链接

扫一扫