这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果。
这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,
比如:HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。
一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>zhoukai</title>
<link rel="stylesheet" href="from.css"/>
</head>
<!--
作者:offline
时间:2017-09-04
描述:1.用html和css实现上图整体布局效果
(显示各部分字体内容各5分,手机图片正常显示5分,共20分)
-->
<body>
<div id="data">
<div class="left">
<!--
作者:offline
时间:2017-09-04
描述:2.当鼠标悬停在 时,其字体变为原来的1.2倍,
(5分)同时字体颜色发生变化。(字体颜色自己定)(5分)
-->
<div class="left_top">
<span>
<b>Blue App Template</b>
</span>
</div>
<!--
作者:offline
时间:2017-09-04
描述:3.当鼠标悬停在 时,其字体旋转360度。(有代码5分,效果实现5分)
-->
<div class="left_center">
<span>
<b>One page Responsive HTML5 parallax business landing page</b>
</span>
</div>
<div class="left_footer">
<span>
<b>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Similique autem,
atque in voluptatibus repellat nostrum iusto
architecto vel placeat numquam omnis assumenda.</b>
</span>
</div>
<!--
作者:offline
时间:2017-09-04
描述:4.当鼠标移动到 时,其图标渐变为 (由之前的透明变为白底黑字)(5分),
当鼠标再次移出时图标渐变为原来的样子。(5分)
-->
<div class="left_f">
</div>
</div>
<!--
作者:offline
时间:2017-09-04
描述:5.当鼠标移动到“手机图片”上时,
手机图片顺时针倾斜25度。(图片变化5分,达到效果5分)
-->
<div class="right">
<img src="phone.png" />
</div>
</div>
</body>
</html>
下面的是css布局,仔细专研
*{
margin: 0;
padding: 0;
}
#data{
width: 1500px;
height: 800px;
margin: 0 auto;
background: red;
background:url("bg.jpg");
}
.left{
height: 800px;
width: 800px;
float: left;
}
.left .left_top{
margin-top: 100px;
width: 600px;
font-size: 40px;
height: 100px;
color: white;
margin-left: 100px;
}
.left .left_top span:hover{
font-size: 60px;
color: red;
}
.left .left_center{
width: 600px;
height: 80px;
text-align: center;
padding-top: 50px;
font-size: 32px;
color: white;
margin-left: 100px;
}
.left .left_center:hover{
width: 600px;
height: 100px;
transform: rotate(360deg);
transition: 2s;
}
.left .left_footer{
width: 600px;
margin-top: 50px;
font-size: 20px;
height: 100px;
margin-left: 100px;
}
.left .left_footer span{
color: white;
}
.left .left_f{
width: 300px;
margin-top: 50px;
height: 100px;
margin-left: 100px;
background: url("003.png");
background-repeat: no-repeat;
}
.left .left_f:hover{
width: 300px;
height: 100px;
background: url("001.png");
background-repeat: no-repeat;
}
.right{
width: 600px;
height: 800px;
float: right;
padding-left: 50px;
/*background: {220,0,0,0.6};*/
}
.right img:hover {
margin-top: 100px;
margin-left: 100px;
transform: skew(-25deg);
-ms-transform: skew(-25deg);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-moz-transform: skew(-25deg);
}