H5--风车动画

BG7ZAG 2017-03-05 07:56:05

分类：程序开发 1175 1

[secret key='5297']

今天开始培训了，学习h5，不知道h5的就业情况怎样？在上大学的时候选错专业真的是很悲剧的，出来不好找工作，我现在觉得只要不是重点名牌大学，选个好专业比选学校好多了！你们觉得智游集团的培训怎样？说是签就业协议，保证工作后工资不低于5k，这是真的吗？h5的未来怎样？应该不错吧。

早上主要讲了h5的相关历史啊，能做什么之类的。听了到现在又忘了o(╯□╰)o

[/secret]

简单学习H5架构和做一个风车动画页面。

H5架构学习如下：

<!--html定义文档-->
<html>
    <!--head标签用于定义文档的头部 它是所有头部元素的容器-->
    <head>
        <!--utf-8国际通用编码格式 防止出现乱码-->
        <meta charset="UTF-8">
        <!--title定义文档的标题-->
        <title>H5基本架构</title>
        <!--stlye设置标签的样式-->
        <style>
            /*样式选择器*/
            body{
                /*属性名         ：属性值*/
                /*设置背景颜色*/
                background-color:red;
                /*设置字体颜色*/
                color:white;
                /*设置字体大小*/
                font-size:50px;
            }
        </style>
    </head>
    <!--body定义文档的所有内容（比如 文本 超链接 图像 表格等）-->
    <body>
        欢迎你们来学习HTML5
    </body>
</html>

风车动画代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>旋转的大风车</title>
        <style>
            section{
                width: 1000px;/*设置宽*/
                height: 500px;/*设置高*/
                /*设置背景颜色*/
                /*background-color:cornflowerblue;*/
                /*设置背景图片 URL链接资源*/
                background-image:url(caodi.png);
                /*设置图片大小*/
                background-size: 100%;
                margin: 0 auto;
            }
            .d1{
                width: 300px;
                height: 300px;
                background-image: url(fengche.png);
                background-size: 100%;
                position: absolute;
                top: 70px;
                left: 440px;
            }
            .d2{
                width: 150px;
                height: 150px;
                background-image: url(fengche.png);
                background-size: 100%;
                position: absolute;
                top: 300px;
                left: 741px;
            }
            .d3{
                width: 250px;
                height: 250px;
                background-image: url(fengche.png);
                background-size: 100%;
                position: absolute;
                top: 200px;
                left: 878px;
            }
            div{
                animation-name: xuanzhuan;
                animation-duration: 0.6s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            /*@keyframes关键帧动画*/
            @keyframes xuanzhuan{
                0%{
                    /*transform使......改变*/
                    transform: rotate(0);
                }
                100%{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <!--块元素 独占一行 能设置宽高
            行元素 横向排列 不能设置宽高
            行内块元素  既能设置宽高 又能向右排列-->
        <section>
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
        </section>
    </body>
</html>

需要的素材图片：

风车动画图片-草地风车动画图片-风车

[secret key='5297']PS:2017-06-26 海南分公司这边好坑啊，说好是4个月学完的，到现在才学完第一阶段，一共分为4个阶段。因为这批招了大部分的在校学生，为了照顾他们学校上课，每天只上3小时的课，而且最近一个月因为学校考试、课程原因差不多一个月没上课了，真是把我们社会上招的学员坑的够惨的！以此为鉴，大家小心！不过总部派的老师还不错，老师只管教课其他不管，所以在海南学习编程，还是别来汇才（海南的分公司名叫汇才）了。[/secret]

H5--风车动画

共 1 条评论关于 “H5--风车动画”