html+css图片2D旋转
浏览数：48 /
时间：2015年06月09日
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
*{margin:0px 0px;padding:0px 0px;}
.page{width: 1040px;
height: 330px;
background:rgba(212, 99, 38, 1);
box-shadow: 1px 1px 10px rgba(153, 129, 26, 1);
margin: 55px auto;
border-radius: 8px;
border: 1px solid rgba(20, 107, 131, 1);}
.page dl{width:200px;text-align:center;
margin:60px 30px 20px 15px;
display:inline-block;/*改变块元素为行内元素不影响宽度 高度 让他们并排*/
}
.page dl .title{font-zixe:35px;line-height:45px;
color:#535353;font-family:"微软雅黑"}
.page dl dd{font-size:14px;line-height:20px;color:#a0a0a0;
font-weight:600;}
.page dl:hover img{
animation:mying 800ms linear;
}
@keyframes mying{
form{transform:roteY(0deg);}
to{transform:rotateY(360deg);}
}
@keyframes mying2{
form{transform:roteX(0deg);}
to{transform:rotateX(360deg);}
}
@keyframes mying3{
form{transform:roteZ(0deg);}
to{transform:rotateZ(360deg);}
}
</style>
</head>
<body>
<div class="page">
<dl>
<dt>
<img src="img/icon1.png"/>
</dt>
<dd class="title">名师亲授</dd>
<dd>多年教学经验沉淀</dd>
<dd>精讲考试技巧与策略</dd>
</dl>
<dl>
<dt>
<!--插入图片 src路径-->
<img src="img/icon2.png"/>
</dt> <!--自定义列表 表头-->
<dd class="title">项目实战</dd><!-- 表内容-->
<dd>实时互动体验全新课堂</dd><!-- 表内容-->
<dd>拉近在线师生沟通距离</dd><!--表内容-->
</dl>
<dl>
<dt>
<!--插入图片 src路径-->
<img src="img/icon4.png"/>
</dt> <!--自定义列表 表头-->
<dd class="title"> 作业批改</dd><!-- 表内容-->
<dd> 倾心批改作业</dd><!-- 表内容-->
<dd> 快速反馈结果</dd><!--表内容-->
</dl>
<dl>
<dt>
<!--插入图片 src路径-->
<img src="img/icon3.png"/>
</dt> <!--自定义列表 表头-->
<dd class="title"> 推荐工作</dd><!-- 表内容-->
<dd> 全职就业保障</dd><!-- 表内容-->
<dd>就业专业指导服务</dd><!--表内容-->
</dl>
</div>
</body>
</html>
</span></strong>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
