CSS3创建缝合虚线效果的特效代码
作者：袖梨
2022-06-25
准备工作
制作这样的一个图标，我们需要一个facebook 的图标，还有一张背景图，我们使用这个字体：Modern Pictogram。找到这些资源以后，整个项目的目录看起来像这样的：
构建HTML的代码
创建一个新的HTML文件和CSS文件。然后，链接的CSS文件以及CSS规范的部分，如下。
| 代码如下 | 复制代码 |
创建这个图标，我们只需要一个单一的div。把这个div放置到
区域| 代码如下 | 复制代码 |
F |
|
style样式代码
现在，我们的工作风格，像往常一样，我们开始增加自定义字体使用@font-face和添加的网页的背景，像这样。
| 代码如下 | 复制代码 |
| @font-face { font-family: 'ModernPictogramsNormal'; src: url('fonts/modernpics-webfont.eot'); src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/modernpics-webfont.woff') format('woff'), url('fonts/modernpics-webfont.ttf') format('truetype'), url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); font-weight: normal; font-style: normal; } body { background: url('../img/ios-linen.jpg'); } |
|
然后，我们添加装饰风格图标，包括指定高度和宽度，添加圆角，框的阴影，和背景颜色梯度。
| 代码如下 | 复制代码 |
| .icon { font-family: "ModernPictogramsNormal"; font-size: 4em; color: #fff; text-align: center; line-height: 0.406em; text-shadow: 1px 1px 0px rgba(0,0,0,.5); width: 65px; height: 65px; padding: 7px; margin: 50px auto; position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15); -moz-box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15); box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15); background: #375a9a; background: -moz-linear-gradient(top,#375a9a 0%, #1b458e 100%); background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#375a9a), color-stop(100%,#1b458e)); background: -webkit-linear-gradient(top,#375a9a 0%,#1b458e 100%); background: -o-linear-gradient(top,#375a9a 0%,#1b458e 100%); background: -ms-linear-gradient(top,#375a9a 0%,#1b458e 100%); background: linear-gradient(to bottombottom,#375a9a 0%,#1b458e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375a9a', endColorstr='#1b458e',GradientType=0 ); } |
|
缝合效果特效代码
对于缝合效果，我们要添加 pseudo-elements, :before and :after。我们将首先指定他们的height和width以及圆角，这是小于它们的父元素.icon。
| 代码如下 | 复制代码 |
| .icon:before, .icon:after { content: ""; display: block; width: 63px; height: 63px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: absolute; } |
|
然后，我们将这些伪元素用虚线边框，但每个人都会有不同的颜色。:before将在深蓝色的，像这样。
| 代码如下 | 复制代码 |
| .icon:before { border: 1px dashed #0d2b5e; } |
|
虽然 :after 伪元素边界将低强度有白颜色的，我们定义它的RGBA颜色模式。此外，我们还需要位置:after元素1px从顶部和1px从左到右，所以它的边界线是明显。
| 代码如下 | 复制代码 |
| .icon:after { border: 1px dashed rgba(255,255,255, .1); top: 7px; left: 7px; margin-top: 1px; margin-left: 1px; } |
|
这就是我们需要的所有代码。
