HTML/CSS

CSS代码轻松实现虚线边框滚动动画

也想出现在这里?联系我们
创客云

百度 ueditor 编辑器网站首页底部有一个滚动虚框的效果,如下 GIF 示意:
CSS代码轻松实现虚线边框滚动动画-云模板
当时我看到这个效果的时候,很兴奋,没想到做这个官网页面的还是个 CSS 牛人!等我打开控制台一看——恩,原来是 JS 计算实现的,我就默默地关掉了页面,假装刚才什么都没发生过。

实际上,这种效果三两行 CSS 代码就可以实现,且 IE10+浏览器都支持。

也想出现在这里?联系我们
创客主机
  1. <div class="box">
  2.     <div class="content">内容占位</div>
  3. </div>
  1. .box {
  2.     width: 200px;
  3.     background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px);
  4.     animation: shine 1s infinite linear;
  5.     overflow: hidden;
  6. }
  7. .content {
  8.     height: 128px;
  9.     margin: 1px; padding: 10px;
  10.     background-color: #fff;    
  11. }
  12. @keyframes shine {
  13.     0% { background-position: -1px -1px;}
  14.     100% { background-position: -12px -12px;}
  15. }
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

8

8年专注高端建站

秋季到冬季,是一个季节的距离:

①、感恩回馈云模板VIP会员限时 6 折 ---》充值VIP

②、买模板送等值主机(高速、稳定、免备案)活动火热进行中 ---》云模板

咨 询 客 服