H5图标制作

point：

css的内嵌和外链式
h5和css的简单应用

h5代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML5 logo</title><link href="logo.css" type="text/css" rel="stylesheet"></head><body><!-- 这是HTML最外层盒子bg --><div class="bg"><div class="beam" style="transform: rotate(5deg);"></div><div class="beam" style="transform: rotate(15deg);"></div><div class="beam" style="transform: rotate(25deg);"></div><div class="beam" style="transform: rotate(35deg);"></div><div class="beam" style="transform: rotate(45deg);"></div><div class="beam" style="transform: rotate(55deg);"></div><div class="beam" style="transform: rotate(65deg);"></div><div class="beam" style="transform: rotate(75deg);"></div><div class="beam" style="transform: rotate(85deg);"></div><div class="beam" style="transform: rotate(95deg);"></div><div class="beam" style="transform: rotate(105deg);"></div><div class="beam" style="transform: rotate(115deg);"></div><div class="beam" style="transform: rotate(125deg);"></div><div class="beam" style="transform: rotate(135deg);"></div><div class="beam" style="transform: rotate(145deg);"></div><div class="beam" style="transform: rotate(155deg);"></div><div class="beam" style="transform: rotate(165deg);"></div><div class="beam" style="transform: rotate(175deg);"></div><div class="logo" style="top: 120px;left: 229px;"><div class="d_shile1"></div><div class="d_shile2"></div><div class="d_shile3"></div><div class="d_shile4"></div><div class="d_shile5"></div><div class="d_shile6"></div><div style="transform: scale(0.82);left: 31px;top: 25px;"><div class="l.shiled1"></div><div class="l.shiled2"></div><div class="l.shiled3"></div></div><div><div class="gray1"></div><div class="gray2"></div><div class="gray3"></div><div class="gray4"></div></div><div><div class="white1"></div><div class="white2"></div><div class="white3"></div><div class="white4"></div></div><div class="d_shiled7"></div><div class="l_shiled4"></div></div></div></body>
</html>

css代码

/* 第一单元项目1-1使用HTML+css3绘制logo */
body{margin: 0;padding:0;
}
div{position: absolute;
}
.bg{width:800px;height: 600px;background:#f2f2f2;overflow:hidden;
}
.beam{width:1600px;height: 20px;background:#fff;top: 290px;left: -400px;}
.d_shile1,.d_shile2,.d_shile3,.d_shile4,.d_shile5,.d_shile6,.d_shiled7{background:#e15016;
}
.d_shile1{left: 32px;width: 140px;height:346px;
}
.d_shile2{transform: skewX(5deg);left: 16px;width: 100px;height:346px;
}
.d_shile3{transform: skewY(15deg);top: 265px;left: 32px;width: 140px;height:100px;
}
.d_shile4{left:172px;width:140px;height:346px;
}
.d_shile5{transform: skewX(-5deg);left:227px;width:100px;height:346px;
}
.d_shile6{transform: skewY(-15deg);top:265px;left:172px;width:140px;height:100px;}.d_shiled7{height: 20px;top: 199px;width: 80px;left: 60px;}.l_shiled1,.l_shiled2,.l_shiled3,.l_shiled4{background: #ee6812;}
.l_shiled1{left: 172px;width: 140px;height: 346px;
}
.l_shiled2{transform:skewX(-5deg);left: 227px;width: 100px;height: 363px;
}
.l_shiled3{transform: skewY(-15deg);top:282px;left:172px;width:138px;height:100px;
}
.l_shiled4{height: 43px;top: 113px;width: 100px;left: 180px;
}
.gray1,.gray2,.gray3,.gray4{background: #ebebeb;
}
.gray1{height: 43px;width: 102px;left: 70px;top: 70px;
}
.gray2{width: 46px;height: 216px;transform: skewX(5deg);top: 70px;left: 75px;
}
.gray3{width: 95px;height: 43px;left: 77px;top: 156px;
}
.gray4{width: 87px;height: 47px;left: 85px;top: 251px;transform: skewY(15deg);}
.white1,.white2,.white3,.white4{background: #fff;
}
.white1{width: 102px;height: 43px;left: 172px;top: 70px;
}
.white2{width: 46px;height: 216px;transform: skewX(-5deg);top: 70px;left: 223px;
}
.white3{height: 43px;width: 95px;left: 172px;top: 156px;
}
.white4{height: 47px;width: 87px;left: 172px;top: 251px;transform: skewY(-15deg);
}

运行结果：

ps：某一part的色块有误，我没去找，有小伙伴找到留言告诉我呀！

【web前端】H5图片制作相关推荐

web前端H5培训开发设计师好不好
[兄弟连h5;前端;◆ .24小咨询热线:400-700-1307 QQ:3256649897 ◆学H5前端就找"兄弟连h5培训机构;"◆] web前端H5培训开发设计师好不好?想 ...
web前端h5真机调试
手机和电脑连接同一wifi(也就是同一个局域网) 本地跑起自己的项目,比如http://localhost:3333/是你项目运行起来的项目,并且输入链接可以在浏览器里访问查看自己的电脑ip地址比如 ...
css实现web前端最美的loading加载动画！
这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很好的交互体验. 今天这篇文章我们一起 ...
这绝对是有史以来最详细的web前端学习路线
定要善用开发者工具.firefox的firebug和Chrome的F12都是很好的选择,用好了这个必会发现他带给你的帮助比看一本书更多.你把firebug摸透了你还担心对DOM理解不够?考虑到未来,h ...
web前端到底是什么？有前途吗
web前端到底是什么? 某货: "前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> ...
具备这些特征，轻松进入互联网大厂成为web前端工程师
web前端依然是如今的热门行业,尤其是互联网企业,对web前端人才需求旺盛,薪资也不断增高,但这并不意味着找一份web前端工程师的工作很容易.相反,互联网大厂对于web前端工程师要求更高,如果想要成为 ...
零基础转行学web前端开发好学吗？爱创课堂告诉你
近两年web前端可以说是狠狠地火了一把,不仅仅是因为招聘市场需求量大,还有一个重要的原因就是,入行门槛低,入门简单.真的是这样吗?0基础的小白也能转行吗?很多同学都有这样的疑虑,认为没那么简单.下面小 ...
一个大四实习生从安卓小白到可以独自承担安卓和web前端的一年奋斗之旅
努力吧老铁们! 这是一篇无关技术的文章,而是对自己整个大四一年工作经验的总结,记录着自己的学习方法和学习习惯,记录着自己从最开始的一个安卓小白,到现在可以独自承担原生安卓项目.记录着自己在工作之余学习 ...
h5和web前端的区别
一.指代不同 1.h5:是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是baiHTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息. 2.web前端: ...
科大迅飞语音听写（流式版）WebAPI，Web前端、H5调用语音识别，语音搜索，语音听写
前言由于公司有个Web项目需要用到语音搜索功能,找了一些第三方库都不太理想,要么语音识别速度很慢,要么不能精确识别等等,最后选择了迅飞语音(迅飞语音听写(流式版)WebAPI).迅飞语音相对来说做得 ...

【web前端】H5图片制作

H5图标制作

point：

h5代码

css代码

运行结果：

【web前端】H5图片制作相关推荐

最新文章

热门文章