angular练习

最新推荐文章于 2024-06-12 11:24:43 发布

yin_chenglong

最新推荐文章于 2024-06-12 11:24:43 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yin_chenglong/article/details/80175489


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<style type="text/css">
	ul, li{display:block; position:relative;}

	li{float:left; margin:auto 6px; list-style:none; height:10px; line-height:10px;}

	.cle{clear:both;}
	li{
	background:aliceblue; no-repeat ;
	padding-left:2px;
	}

	/**
	* animation: abc3 3s ease; 同等效果
	*/
	#img3:hover{
	animation-name: abc3;
	animation-duration: 3s;
	animation-timing-function: ease;
	}
	#a:hover{
	transform: rotate(360deg);
	}
	#img2:hover{
	transform: scale(1.5,1.5);
	}
	ul:hover{
	background-color: red;
	}
	ul li:hover{

	color: yellow;
	transform: scale(1.2,1.2);
	}
	/**
	* 定义动画
	*/
	@keyframes abc1{
	from{width: 50px;height: 50px;background-color: red;}
	to{width: 100px;height: 100px;background-color: blue;}
	}
	/**
	* opacity表示透明度
	*/
	@keyframes abc2{
	from{
	opacity: 1;
	background-color: red;

	}
	to{
	opacity: 0.5;
	background-color: blue;
	transform: rotate(360deg) translate(200px,200px) scale(2,2) skew(30deg,30deg);
	}
	}

	@keyframes abc3{
	25%{width: 150px;height: 50px;background-color: blue;transform: rotate(45deg);}
	50%{width: 200px;height: 50px;background-color: yellow;transform: rotate(45deg);}
	75%{width: 150px;height: 50px;background-color: green;transform: rotate(-45deg);}
	100%{width: 100px;height: 50px;background-color: purple;transform: rotate(-90deg);}
	}
	#div1{
	width: 610px;
	height: 120px;
	background-image: url(img/zhoukao4.png);
	}



	}
	</style>
	<title></title>
	</head>
	<body>
	<div id="div1">
	<a id="a" style="float: left; margin-top: 50px; font-size: 50px; color: #FFFFFF;">新疆</a>
	</div>
	<ul>
	<li><a href = "#">首页</a></li>
	<li><a href = "#">新疆简介</a></li>
	<li><a href = "#">风十人情</a></li>
	<li><a href = "#">吃在新疆</a></li>
	<li><a href = "#">路线选择</a></li>
	<li><a href = "#">自助行</a></li>
	<li><a href = "#">摄影录像</a></li>
	<li><a href = "#">游记精选</a></li>
	<div class="cle"></div>
	</ul>
	<a href="http://www.weather.com.cn/weather/101010100.shtml"><img src="img/zhoukao3.png" id="img2"/></a>
	<a href="https://baike.sogou.com/v851026.htm?fromTitle=%E6%96%B0%E7%96%86"><img src="img/zhoukao2.png" id="img2"/></a>
	<a href="http://www.ts.cn/homepage/content/2015-07/06/content_11649673.htm"><img src="img/zhoukao7.png" id="img3" /></a>
	</body>
	</html>