您的位置：首页 > Web前端 > CSS

Html和css动画及其效果

2017-10-09 08:09 656 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<style type="text/css">

#div1{
width:2400px;
height:1132px;
padding: 50px;
background-image:url("bg.jpg");
}
.change{
font-size: 50px;
}
.change:hover {
color: aquamarine;
font-size: 60px;
}
.changes:hover{
color:indigo;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display:block;
transition:2s;

}
/*       @keyframes animat_tans {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}*/

.img1{ width:500px; height:700px; margin-left: 400px}/*效果右侧的手机图片*/
.img1:hover{transform:skew(0deg,25deg);}/*设置当鼠标划过或停到图片上时图片顺时针倾斜25度*/
</style>
</head>
<body >
<div id="div1">
<div style="width:600px;float:left">
<h1 style="padding-top: 100px;margin-left: 100px;color: snow"><p class="change">Blue App Template</p></h1>
<h3 style="padding-top: 100px;margin-left: 100px;color: snow"><a class="changes">One page Responsive HTML5 parallax<br> business landing page</a></h3>

<h4 style="padding-top: 100px;margin-left: 100px ;color: snow">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Similique autem,<br>atque in voluptatibus repellat nostrum iustoarchitecto vel placeat<br> numquam omnis assumenda.</h4>
<a href="http://frg.wan.360.cn" target="_blank">
<img style="margin-left: 100px" src="001.png" height="70" width="286"
onmouseover="this. src='001.png'" onmouseout="this. src='003.png'"/>
</a>

</div>
<div style="width:600px;float: left;text-align: center" >
<img class="img1" src="phone.png" class="changes"/>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航