以下是程序代码 以下是程序代码 <!DOCTYPE <a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/html" title="html" rel="nofollow" target="_blank">html</a>> <<a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a>> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/css" title="css" rel="nofollow" target="_blank">css</a>"> .zm-container { width:480px;height:278px; position:relative; } .z-container { width:260px;height:190px;overflow:hidden; position:absolute;left:0;top:0; } .z-1 { background:#6cb; width:87px;height:17px;padding:0 0 18px 25px; border-radius:0 0 0 12px; position:absolute;left:0;top:0; } .z-1:after { content:""; display:block;background:#fff; height:17px; border-radius:0 0 0 6px; } .z-2 { background:#6cb; width:25px;height:72px; position:absolute;left:46px;top:35px; } .z-2:after { content:""; display:block;background:#6cb; width:106px;height:18px; position:absolute;bottom:0;left:-45px; } .z-3 { background:#6cb; width:90px;height:84px;border-radius:0 0 90px 0; position:absolute;left:-20px;top:107px; } .z-3:before { content:""; display:block;background:#fff; width:90px;height:76px;border-radius:0 0 90px 0; position:absolute;left:-25px;top:0; } .z-4 { width:130px;height:130px;border:20px solid #6cb; border-radius:130px; position:absolute;left:88px;top:17px; cursor:pointer; } .z-4:after { content:""; width:80px;height:80px; background:#fff; position:absolute;left:-20px;bottom:-20px; } .z-4 span.dot1,.z-4 span.dot2,.z-4 span.dot3 { width:18px;height:18px; display:block;background:#f86; border-radius:18px; position:absolute;left:23px;top:52px; z-index:1; } .z-4 span.dot2 { left:57px; z-index:3; } .z-4 span.dot3 { left:91px; z-index:3; } .z-4 span.dot1 { animation:changebg1 3s 1000; -moz-animation:changebg1 3s 1000; -webkit-animation:changebg1 3s 1000; } .z-4 span.dot2 { animation:changebg2 3s 1000; -moz-animation:changebg2 3s 1000; -webkit-animation:changebg2 3s 1000; } .z-4 span.dot3 { animation:changebg3 3s 1000; -moz-animation:changebg3 3s 1000; -webkit-animation:changebg3 3s 1000; } .z-4:hover span.dot1 { animation:dotAnimate1 1s 1; -moz-animation:dotAnimate1 1s 1; -webkit-animation:dotAnimate1 1s 1; } .z-4:hover span.dot2 { animation:dotAnimate2 1s 1; -moz-animation:dotAnimate2 1s 1; -webkit-animation:dotAnimate2 1s 1; } .z-4:hover span.dot3 { animation:dotAnimate3 1s 1; -moz-animation:dotAnimate3 1s 1; -webkit-animation:dotAnimate3 1s 1; } @-moz-keyframes changebg1 { 0% {background:#6cb;} 25% {background:#6cb;} 50% {background:#f86;} 75% {background:#f86;} 100% {background:#f86;} } @-moz-keyframes changebg2 { 0% {background:#f86;} 25% {background:#f86;} 50% {background:#6cb;} 75% {background:#f86;} 100% {background:#6cb;} } @-moz-keyframes changebg3 { 0% {background:#f86;} 25% {background:#f86;} 50% {background:#f86;} 75% {background:#6cb;} 100% {background:#f86;} } @-moz-keyframes dotAnimate1 { 0% {top:52px;} 25% {top:56px;} 30% {top:56px;} 60% {top:42px;} } @-moz-keyframes dotAnimate2 { 0% {top:52px;} 25% {top:48px;} 30% {top:48px;} 60% {top:62px;} } @-moz-keyframes dotAnimate3 { 0% {top:52px;} 25% {top:56px;} 30% {top:56px;} 60% {top:42px;} } .z-5 { width:128px;height:80px; overflow:hidden; position:absolute;left:40px;bottom:3px; } .z-5 span { width:220px;height:220px;border:20px solid #6cb; border-radius:220px; display:block; position:absolute;left:0;bottom:0; } .m-container { width:206px;height:190px; position:absolute;top:0;left:275px; } .m-1 { width:35px;height:17px;overflow:hidden; position:absolute;left:34px;top:0; } .m-1:before,.m-2:before { content:""; width:49px;height:85px; background:#6cb;display:block; border-radius:50%; position:absolute;left:0;top:-43px; } .m-1:after,.m-2:after { content:""; width:21px;height:27px; background:#fff;display:block; border-radius:50%; position:absolute;left:28px;top:-10px; } .m-2 { width:35px;height:17px;overflow:hidden; position:absolute;right:34px;top:0; -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); } .m-3 { font-height:0;line-height:0; height:2px;width:70px; background:#6cb; position:absolute;left:68px;top:15px; } .m-4,.m-4:before,.m-4:after { width:206px;height:18px; background:#6cb;display:block; position:absolute;top:17px;left:0; } .m-4:before { content:""; top:34px; } .m-4:after { content:""; top:68px; } .m-5 { width:206px;height:18px; background:#6cb; position:absolute;left:0;top:119px; } .m-5:after { content:""; display:block; background:#6cb; width:26px;height:90px; position:absolute;left:90px;top:-86px; } .m-6 { width:120px;height:53px;overflow:hidden; position:absolute;left:0;bottom:0; } .m-6 span,.m-7 span { background:#6cb;display:block; width:220px;height:180px;border-radius:50%; position:absolute;left:-98px;bottom:0; } .m-6 span:before,.m-7 span:before { content:""; display:block;background:#fff; width:190px;height:138px;border-radius:50%; position:absolute;left:2px;bottom:12px; } .m-7 { width:120px;height:53px;overflow:hidden; position:absolute;right:0;bottom:0; -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); } </style> </head> <body> <div class="logo" onclick="<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>:location.href=’<a href="https://www.gaodaima.com/go.html?url=http://www.zhimei.com’">" rel="nofollow">http://www.zhimei.com’"></a>; <div class="zm-container"> <div class="z-container"> <div class="z-1"></div> <div class="z-2"></div> <div class="z-3"></div> <div class="z-4"><span class="dot1"></span><span class="dot2"></span><span class="dot3"></span></div> <div class="z-5"><span></span></div> </div> <div class="m-container"> <div class="m-1"></div> <div class="m-2"></div> <div class="m-3"></div> <div class="m-4"></div> <div class="m-5"></div> <div class="m-6"><span></span></div> <div class="m-7"><span></span></div> </div> </div> </div> </body> </html>[/code]<br /><input onclick="runEx('CodeText23798')" type="button" value="运行代码"/> <input onclick="doCopy('CodeText23798')" type="button" value="复制代码"/> <input onclick="saveCode('CodeText23798')" type="button" value="另存代码"/><br /> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div> </div> <p>欢迎大家阅读<span style='color:red;'>《用纯CSS代码打造的知美网站LOGO图形_css》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/23874.html" target="_blank" title="用纯CSS代码打造的知美网站LOGO图形_css">用纯CSS代码打造的知美网站LOGO图形_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="23874" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/css" rel="tag">css</a><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/java" rel="tag">java</a><a href="https://www.gaodaima.com/tag/javascript" rel="tag">JavaScript</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432440.html" title="java怎么样学java正确" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/6.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="java怎么样学java正确" /><br><span class="r_title">java怎么样学java正确</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432401.html" title="Java面试题（11）" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/11.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java面试题（11）" /><br><span class="r_title">Java面试题（11）</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432366.html" title="软件构造 03 正则表达式" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/1.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="软件构造 03 正则表达式" /><br><span class="r_title">软件构造 03 正则表达式</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432360.html" title="类和对象的概念与类和对象的关系" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/7.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="类和对象的概念与类和对象的关系" /><br><span class="r_title">类和对象的概念与类和对象的关系</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432359.html">面向对象思想概述、类和对象概念、类和对象的关系</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432357.html">4.15软工学习周报</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432314.html">Java面向对象下笔记&1000以内素数</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432291.html">学习Java应该留意的问题</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432250.html">Java集合框架(四)-HashMap</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432246.html">java学习</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432243.html">Java 入门与进阶P-7.1+P-7.2</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432233.html">Java方法</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"> 提交评论 评论通知 表情 贴图 加粗 删除线 居中 斜体 签到 Hi，您需要填写昵称和邮箱！ 昵称昵称 (必填) 邮箱邮箱 (必填) 网址网址
以下是程序代码 以下是程序代码 以下是程序代码 以下是程序代码