master

分支 (1)

管理

管理

master

cgb2007
/
h5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.moveBox{
				width: 100px;
				height: 100px;
				background-color: #FF0000;

				animation: mymove 5s infinite;/* 关键字:动画;动画名 动画时间 无限 */
			}
			@keyframes mymove{/* @keyframes:关键帧 */
				from{width: 0px;}/* 第一帧 */
				to{width: 300px;}/* 最后一帧 */
			}
			.transitionBox{
				width: 100px;
				height: 100px;
				border-radius: 100px;
				background-color: aqua;
				transition: height 2s;/*拉伸方向(横向/纵向),时间:2秒*/
			}
			/*hover与冒号之间不能有空格*/
			.transitionBox:hover{
				height: 300px;
			}


			ul{
				list-style: none;/* 列表样式,去除· */
			}
			li{
				float: left;/* 浮动,不换行:浮动 居左 */
				margin-right: 10px;/* li之间空15个像素 */
				background-color: hotpink;
				padding: 5px 10px 5px 10px;
				/* 浏览器兼容性 */
				/* x轴方向倾斜30度,deg为单位,必须写 */
				-webkit-transform: skewX(30deg);/* 谷歌浏览器自带工具:变形动画:X,Y轴 */
			}
			li:hover{/* 不能有空格,鼠标移入执行,退出则还原 */
				background-color: #00FFFF;
			}
			a{/* 文字默认有下划线,点击过是紫色 ,未点击是默认色*/
				text-decoration: none;/* 文字修饰:none去掉文字修饰 */
				color: white;/* 衬托背景色 */
				/* li倾斜30度,这里要将文字再正过来,调整-30度 */
				-webkit-transform: skewX(-30deg);
				display: block;/* 改变a标签的性质,不然进行换行,改成块结构,配合上一句使用 */
			}

		</style>
	</head>
	<body>
		<div>移动效果</div>
		<div class="moveBox"></div>

		<div>拉伸效果</div>
		<div class="transitionBox"></div>

		<div>菜单效果</div>
		<div>
			<ul>
				<!-- target="_balnk"跳转新网页   href规定连接的目的地 -->
				<li><a href="http://www.sina.com.cn" target="_blank">新浪新闻</a></li>
				<li><a href="http://www.toutiao.com" target="_blank">今日头条</a></li>
				<li><a href="http://www.baidu.com" target="_blank">百度新闻</a></li>
				<li><a href="http://www.ifeng.com" target="_blank">凤凰新闻</a></li>
			</ul>
		</div>
	</body>
</html>