“蚂蚁行军”和彩色边框设计
来源:互联网 发布:淘宝怎么加入天猫 编辑:程序博客网 时间:2024/06/02 23:27
这里展示两种边框效果,一种是“蚂蚁行军”的动态边框效果,当然,截图中是看不出来动效的,读者需要自己动手运行才能看到效果;另一种是类似老式信封边框一样的彩色边框效果,这个效果在实际开发用到的可能性相对“蚂蚁行军”来说要高一些,有些开发者会采用图片背景的方式来实现这种效果,这里笔者直接用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文件,并运行就可查看效果,相信会让你惊喜一番。
阅读全文
0 0
- “蚂蚁行军”和彩色边框设计
- POJ-蚂蚁行军问题 1852
- UIButton加彩色边框
- 面向对象之设计模式的先行军
- 关于帝国2中的寻路和行军算法
- 关于帝国2中的寻路和行军算法
- 行军路线
- 蚂蚁和大象
- 蚂蚁和大象系列
- 蚂蚁和大象
- 哲学家、蚂蚁和赫耳墨斯
- 【算法设计与分析】蚂蚁
- [原创]角色设计彩色稿
- 关于帝国2中的寻路和行军算法 zhengr(原作)
- 蚂蚁
- 蚂蚁
- 蚂蚁
- 蚂蚁
- 仿射变换
- 图解汽车各部位的名称大全
- next(), nextAll(), siblings()的区别
- Codeforces 851D Arpa and a list of numbers【思维+前缀和】
- TC358778XBG:RGB转MIPI DSI转换芯片,告别SSD2828,LT8918时代
- “蚂蚁行军”和彩色边框设计
- MySQL索引背后的数据结构及算法原理
- less转css的calc问题
- Storm
- rdd
- 反调试与绕过的奇淫技巧
- ubuntu中由apt-get获得的文件包保存在哪里?
- 字符串按空格进行反转
- java文件上传总结