当前位置：首页 > 网页特效 > svg

29个主流社交网站Logo SVG图标

分类：svg 日期：2024-05-14 点击(0) 评论(0)

29个主流社交网站Logo SVG图标

简介

##### HTML结构
这组主流社交网站Logo图标采用无序列表的结构，每一个li元素是一个图标。每个图标都使用svg元素来制作。以Twitter的logo图标为例，它的HTML结构如下：

```html
<li><a href="#" class="icon-26 twitter" title="Twitter"><svg viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg></a></li>     
```
#####  CSS样式
该图标特效中使用CSS来为图标添加前景色和填充色，以及鼠标滑过图标时的图标背景颜色和动画效果：

```html
.icon-26 {
  color: #d926b5;
  fill: #d926b5;
}
.icon-26:hover {
  background: #d926b5;
}              
.icon-26:hover{
  border-radius: 100%;
  color: #0e1925;
  fill: #0e1925;
  -webkit-transform: scale(1.25);
      -ms-transform: scale(1.25);
          transform: scale(1.25);
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
          transition: background-color 0.5s, transform 0.5s ease-out;
}
```

web299.com

29个主流社交网站Logo SVG图标

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果