html+css图片2D旋转

最新推荐文章于 2022-10-12 15:43:41 发布

DRMIVET Stone

最新推荐文章于 2022-10-12 15:43:41 发布

阅读量1.4k

点赞数

分类专栏： html+css网页前台文章标签： css 图片

Wangqi

本文链接：https://blog.csdn.net/u012651389/article/details/43940753

版权

html+css网页前台专栏收录该内容

25 篇文章 3 订阅

订阅专栏

<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>

DRMIVET Stone

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+css图片2D旋转

MyHtml.html *{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);
复制链接

扫一扫