风车动画

程序开发 H5--风车动画

[secret key='5297'] 今天开始培训了，学习h5，不知道h5的就业情况怎样？在上大学的时候选错专业真的是很悲剧的，出来不好找工作，我现在觉得只要不是重点名牌大学，选个好专业比选学校好多了！你们觉得智游集团的培训怎样？说是签就业协议，保证工作后工资不低于5k，这是真的吗？h5的未来怎样？应该不错吧。早上主要讲了h5的相关历史啊，能做什么之类的。听了到现在又忘了o(╯□╰)o [/secret] 简单学习H5架构和做一个风车动画页面。 H5架构学习如下：  <html>  <head>  <meta charset="UTF-8">  <title>H5基本架构</title>  <style> /*样式选择器*/ body{ /*属性名：属性值*/ /*设置背景颜色*/ background-color:red; /*设置字体颜色*/ color:white; /*设置字体大小*/ font-size:50px; } </style> </head>  <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 243 1 0

阅读详情

黄良钵博客

程序开发 H5--风车动画

崔先森

挖站否

阿凯

崔先森

清靈語

崔先森

轩陌

北海の猫

崔先森

崔先森