“蚂蚁行军”和彩色边框设计

这里展示两种边框效果，一种是“蚂蚁行军”的动态边框效果，当然，截图中是看不出来动效的，读者需要自己动手运行才能看到效果；另一种是类似老式信封边框一样的彩色边框效果，这个效果在实际开发用到的可能性相对“蚂蚁行军”来说要高一些，有些开发者会采用图片背景的方式来实现这种效果，这里笔者直接用css来实现。

<div class="div1">蚂蚁行军边框效果
</div>
<div class="div2">彩色边框效果
</div>

来两个简单的div标签

.div1{padding: 1em;border: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;
}
@keyframes ants{to{background-position: 100%;}
}
.div2{padding: 1em;border: 16px solid transparent;border-image: 16 repeating-linear-gradient(-45deg,red 0,red 1em,transparent 0,transparent 2em,#58a 0,#58a 3em,transparent 0,transparent 4em);
}

上面是上面两种效果的css样式，读者直接粘贴成html文件，并运行就可查看效果，相信会让你惊喜一番。

“蚂蚁行军”和彩色边框设计相关推荐

html5添加渐变边框效果,《CSS3揭秘》上（边框，投影，渐变，条纹效果，蚂蚁行军）...
最近看了<css3揭秘>一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找.不得不感叹学无止境哦~ 1.边框与背景半透明边框 .demo{ background- ...
打孔怎么定位_红米K40将要发布，采用居中打孔屏，极窄边框设计
12月底,各大厂商将陆续发布新品,华为nova8系列将在23日登场,vivoX60系列.小米11系列还没确定发布时间,估计官方也要预热了.其中小米11将首发骁龙888芯片,享有一个月独占期,对于产品宣 ...
Latex制作三线表 Latex制作复杂表格加彩色边框高亮显示
Latex制作三线表,可对数据进行加彩色边框和背景色高亮显示.通过在导言区调用相应的宏包,在代码区定义一个新的彩色盒子的命令块\newtcbox,自行设定相应的参数(arc:盒子圆角半径:colbac ...
数据可视化——彩色通用设计之色彩搭配(制作对色盲人群友好的图形和演示)
数据可视化--彩色通用设计之色彩搭配(制作对色盲人群友好的图形和演示) 概述:本文翻译Masataka Okabe的Color Universal Design (CUD------How to ma ...
华为p7android5.1系统,华为 P7 超窄边框设计直升安卓5.1系统
[每日科技网] [Yesky新闻频道消息]6月8日葡萄牙网站Android Geek放出了几张截图,显示华为 Mate 7.P7等手机已经运行上了Android 5.1,EMUI版本则是3.1. 华为 ...
基于色度或其他彩色属性设计一个简单的肤色检测器
要求:肤色检测基于色度或其它彩色属性设计一个简单的肤色检测器. 用手机自拍一张人脸图像. 剪切照片或另外用画笔工具拾取那些可能是肤色的像素(人脸部位). 对这些肤色像素计算彩色分布,如彩色直方图.( ...
Qt之无边框设计、鼠标移动窗体、子窗口阴影设计学习
1)无边框设计代码如下,在构造函数中加入: setWindowFlags(Qt::FramelessWindowHint); //去掉系统边框,设置标志 2)子窗口阴影效果,如下代码: //阴影边框效 ...
b类蚂蚁金服_股权设计与合伙制，解析蚂蚁金服与华为的顶层结构
股权设计与合伙制商道君这篇文章讲一讲股权设计与合伙制. 股权设计和合伙制两者都是企业的顶层设计,股权的设计和合伙人制度有不同之处,但核心点都只有一个那就是--争夺企业的控制权. 举例: 马云与阿里巴 ...
html入门基础-边框设计(入门级)
登录页面的开发-样式开发一.切片3:设计框架图 1.1.原型图(axure) 用axure现场画 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXFfSgAW- ...

“蚂蚁行军”和彩色边框设计

“蚂蚁行军”和彩色边框设计相关推荐

最新文章

热门文章