Css网页中属性的操作，缩放，旋转，图片倾斜

最新推荐文章于 2022-10-04 21:59:22 发布

scvas

最新推荐文章于 2022-10-04 21:59:22 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/wuzhanbin/article/details/77916520

版权

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

使用HBuilder编写的

安卓混合开发第一周周考题

css网页中属性的操作，缩放，旋转，图片倾斜

Css样式

@charset "utf-8";
/* CSS Document */
.d1{
   width:2400px;
    height:1100px;
    color:#FFF;
    background-image:url(../imgs/bg.jpg);}
.left{ width:1500px;height:1100px; float:left; }
.right{ width:800px; height:1100px; float:right}
.phone{ margin:100px 110px}
table{margin:150px;}
.phone:hover{ transform:skew(0,25deg)}

h3:hover{
animation:aa 4s infinite;}
@-moz-keyframes aa
{
   0%{transform:rotate(0deg);}
   100%{transform:rotate(360deg);}
}
p{ font-size:48px;}
p:hover{ transform:scale(1.2); color:#0F9}
font{ font-weight:800}

Html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
</head>

<body>
<div class="d1">
<div class="left">
   <table width="1000" border="0" cellspacing="0" height="600px">
<tr>
    <td><p><font>Blue App</font> Template</p></td>
</tr>
<tr>
    <td> <h3>One page Responsive HTML5 parallax<br> business landing page</h3></td>
</tr>
<tr>
    <td> <h4>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Similique autem,<br>
atque in voluptatibus repellat nostrum iusto
architecto vel placeat<br> numquam omnis assumenda.</h4></td>
</tr>
<tr>
    <td><img src="../imgs/003.png"onMouseOver="this.src='../imgs/001.png'" onMouseOut="this.src='../imgs/003.png'"></td>
</tr>
</table>

</div>
<div class="right">
     <img src="../imgs/phone.png" class="phone" width="500px" height="950px">
</div>
</div>
</body>
</html>