如何实现在HTML以下设计

-6

请找到下面的截图
如何将其转换成HTML如何实现在HTML以下设计

为了更清楚地理解
- 设计应响应
- 图标为动画时，悬停在图标
- 如何将图标在那些位置

如果背景图片，我可以做到这一点，但我需要使它成为HTML元素

enter image description here

2014-11-21 CnuVas

（ᾥhat不是这样的一个问题吗？）请详细说明，如果说明如果你的社交圈/图是元素或背景图片它应该是响应式的，如果你正在讨论围绕元素或任何东西的文本对齐。同时显示您迄今为止所尝试的所有代码，以解释您的具体问题。否则你的问题不适合本网站所需的问答格式。 *欲了解更多信息：* [help] – 2014-11-21 01:27:34

到目前为止您尝试过什么？这个问题太模糊了，没有人会去你的项目。如果你想有一个答案，至少有一个HTML代码或什么的。或者，如果您不知道HTML，请转至Google和Google“HTML教程”。 – Tetsudou 2014-11-21 02:03:26

要将此图像转换为HTML，您可以使用不同的方法。但我肯定会使用SVG图像。

为了做到这一点：

您可以创建插画/草图SVG图像或类似的软件
然后你就可以分出层次不同的元素，并给每个图层的名称
出口SVG并用代码编辑器打开它。你会发现，每一层都有一个ID
现在你可以用CSS动画的每个ID

来源

2014-11-21 03:17:23

嗯取决于你所看到的HTML。点和线图像可以作为背景图像添加到CSS中，但是当文本增加时它会重叠图像，如果您想在文本增加时使图像更大，则会更加复杂。

来源

2014-11-21 01:01:03 seahorsepip

那些圈子是图标 – CnuVas 2014-11-21 01:04:59

那么？您仍然可以将所有内容合并为一个大图像并将其用作背景图像。当你想让每个图标都是可单击的单独html元素时，它会变得更加复杂。 – seahorsepip 2014-11-21 01:07:23

当鼠标悬停在这些图标上时，我需要实现一些动画 – CnuVas 2014-11-21 01:08:41

我会看看<canvas>元素。你可以画圆圈和线条。文字渲染往往是“不太好”（至少可以这么说），所以你可能想要那的一部分是位图。其余的，drawCircle和moveTo/lineTo就足够了。（嗯，和椭圆弧）

来源

2014-11-21 01:14:14 dhc

尝试是这样的：

#content { 
 
     width: 664px; 
 
     margin: auto; 
 
     position: relative; 
 
     top: 150px; 
 
     z-index: 1; 
 
    } 
 
    
 
    heading { 
 
     display: block; 
 
     width: 100%; 
 
     text-align: center; 
 
     font-style: italic; 
 
     font-size: larger; 
 
     font-family: sans-serif; 
 
    } 
 
    
 
    article { 
 
     margin: 10px 100px; 
 
    } 
 
    
 
    #frame { 
 
     z-index: 0; 
 
     width: 664px; 
 
     margin: 0 auto; 
 
    }

<!doctype html> 
 
    <html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link href="demo.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
     <div id="container"> 
 
    \t  <div id="content"> 
 
    \t \t  <heading>Title</heading> 
 
    \t \t  <article> 
 
    \t \t \t  <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
 
        industry. Lorem Ipsum has been the industry's standard dummy text ever 
 
        since the 1500s,when an unknown printer took a galley of type and 
 
        scrambled it to make a type specimen book. It has survived not only 
 
        five centuries, but also the leap into electronic typesetting, 
 
        remaining essentially unchanged.</p> 
 
    \t \t  </article> 
 
    \t  </div> 
 
    \t  <div id="frame"><img src="http://placehold.it/60x60" /></div> 
 
     </div> 
 
    </body>

请注意，我用一个透明背景重新保存图像为PNG（而不是白色），并且我使用了644像素作为＃内容和＃帧的宽度，仅仅因为那恰好是图像的宽度。更改以反映您的全分辨率图像的实际宽度。

来源

2014-11-21 02:16:06 PaulL

如何实现在HTML以下设计

回答

相关问题