HTML5动画

这又是一款基于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);
}

猜你喜欢