H5--风车动画

黄良钵

分类: 程序开发 870 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]

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
HTML5架构、风车动画

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

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

Loading...