• 当前标签:风车动画

程序开发 H5--风车动画

  [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>

2017-03-05 07:56:05 115 1 0
阅读详情
  • 1
前往