HTML5logo的绘制

最新推荐文章于 2021-06-16 05:02:06 发布

月亮不营业

最新推荐文章于 2021-06-16 05:02:06 发布

阅读量339

点赞数 1

分类专栏：笔记文章标签： html5 css3

本文链接：https://blog.youkuaiyun.com/qq_46440394/article/details/104650850

版权

本文详细介绍了如何利用HTML5的canvas元素结合CSS3的样式技巧，实现一个富有创意的logo绘制过程。通过实例代码解析，帮助读者掌握在网页中绘制图形的核心技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5的logo设计</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        div{
            position:absolute;
        }
        .bg{
            width: 8000px;
            height:6000px;
            background:#f2f2f2;
            overflow: hidden;
        }
        .beam{
            width:1600px;
            height:20px;
            background:#fff;
            top:290px;
            left:-400px:
        }
        .d_shield1,.d_shield2 ,.d_shield3,.d_shield3 ,.d_shield4 ,.d_shield5 ,.d_shield6 ,.d_shield7  {
            background:#e15016;
        }
        .d_shield1 {
            left:32px;
            width:140px;
            height:346px;
        }
        .d_shield2 {
            transform: skewx(5deg);
            left:16px;
            width:100px;
            height:346px;
        }
        .d_shield3 {
            transform: skewy(15deg);
            top:265px;
            left:32px;
            width:140px;
            height:100px;
        }
        .d_shield4 {
            left:172px;
            width:140px:
            height:346px;
        }
        .d_shield5 {
            transform :skewX(-5deg) ;
            left :227px;
            width:100px;
            height:346px;
        }
        .d_shield6 {

最低0.47元/天解锁文章