html5 css3样式图标怎么做

html5 css3样式图标制作方法：

1、html代码：

<div id="boxes">

<div id="boxShortcode">border-radius: 40px (shortcode)</div>

<div id="box1">border-top-right-radius: 40px (same on both axis)</div>

<div id="box2">border-top-right-radius: 20px 40px (x <y) </div>

<div id="box3">border-top-right-radius: 40px 20px (x >y) </div>

</div>

2、css样式代码：

#boxes div { margin-bottom: 20pxheight: 50pxpadding-left: 20px }

#boxShortcode {

background: cyan

border-radius: 40px

}

#box1 {

background: red

border-top-right-radius: 40px

}

#box2  {

background: yellow

border-top-right-radius: 20px 40px

}

#box3 {

background: lime

border-top-right-radius: 40px 20px

}

3、运行结果：

这是一个示例，可以试着先在阿里巴巴图标将图标加入购物车，然后再下载代码，将文件加压后，引入iconfont.css文件，在i标签中class属性名为iconfont，style样式可以自定义图标的大小和颜色，这里“&#xe782”为一个问号的代码。页面显示的为一个红色的问号。i标签做图标的好处就是将图片文字化，还有其他的方法就是通过<i>标题的伪类来显示图标，配合 ::before 或者::after伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。使用伪类的好处就是：插入的内容在页面的源码里是不可见的，只能在css里可见。

在下研究了一下源代码，渗透到了服务器找了一下：

并强行爆破了一下

最终发现，这是引入了Font Awesome图标，并启用css3动画所制成的

原理为：

用Font Awesome引入一个心形，并用css设置为红色，再用css3关键帧动画使其放大缩小

这是从官网瓢来的源代码：（请确认已引入Font Awesome）

<i class="fa fa-heart" style="font-size:48pxcolor:redanimation:iconAnimate 5s"></i>

css3代码如下

@keyframes iconAnimate {

0%, 100% {

transform: scale(1)

}

10%, 30% {

transform: scale(0.9)

}

20%, 40%, 60%, 80% {

transform: scale(1.1)

}

50%, 70% {

transform: scale(1.1)

}

}

---