用纯CSS3制作的效果非常炫酷的元素边框线条动画特效

所属分类:其他-动画效果

 236953  616  查看评论 (22)
分享到微信朋友圈
X
用纯CSS3制作的效果非常炫酷的元素边框线条动画特效 ie兼容10

这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。

制作方法

HTML结构

该边框线条动画特效的HTML结构使用的是一个空的<div>来作为容器。

<div class="bb"></div>    

CSS样式

该边框线条动画特效的两条动画的线条分别使用.bb::before和.bb::after来制作,并使用animation调用clipMe帧动画来完成线条的运动效果。

.bb, .bb::before, .bb::after {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
         
        .bb {
          width: 200px;
          height: 200px;
          margin: auto;
          background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
          color: #69ca62;
          box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
        }
        .bb::before, .bb::after {
          content: '';
          z-index: -1;
          margin: -5%;
          box-shadow: inset 0 0 0 2px;
          animation: clipMe 8s linear infinite;
        }
        .bb::before {
          animation-delay: -4s;
        }
        .bb:hover::after, .bb:hover::before {
          background-color: rgba(255, 0, 0, 0.3);
        }
         
        @keyframes clipMe {
          0%, 100% {
            clip: rect(0px, 220.0px, 2px, 0px);
          }
          25% {
            clip: rect(0px, 2px, 220.0px, 0px);
          }
          50% {
            clip: rect(218.0px, 220.0px, 220.0px, 0px);
          }
          75% {
            clip: rect(0px, 220.0px, 220.0px, 218.0px);
          }
        }   
        

非常简单的几句代码就完成了这个很酷的边框线条动画效果。

相关插件-动画效果

五种常用的Loading动效

基于jquery和css的简单五种Loading样式,易用,可扩展
  动画效果
 44608  314

简单实用的jQuery和CSS3卡片自动翻牌特效

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backfacevisibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
  动画效果
 47243  356

仿机场的文字切换特效

这是一款模仿机场文字切换的简单的css文字动画效果,一共有六种模式。
  动画效果
 31188  412

超炫背景粒子效果

超炫背景粒子效果
  动画效果
 50205  591

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? 0
    2021/6/9 17:13:16
    怎么修改哪个宽度和高度啊
        西瓜0
        2021/6/9 21:37:09

        比较麻烦,要修改多个位置,clip:rect中多个值,慢慢调

        .bb {
        	width:280px;
        	height:280px;
        	margin:auto;
        }
        @keyframes clipMe {
        	0%,100% {
        	clip:rect(0px,320.0px,2px,0px);
        }
            25% {
            	clip:rect(0px,2px,320.0px,0px);
            }
            50% {
            	clip:rect(318.0px,320.0px,320.0px,0px);
            }
            75% {
            	clip:rect(0px,320.0px,320.0px,318.0px);
            }
        }
    回复
    Geek-zhangggggg 0
    2020/5/12 9:54:38
    您的方丈老铁 0
    2019/4/20 11:12:48
    我还是不太理解这种裁剪,差异值造成的动画效果。有谁可以帮助我,讲一下大概是什么方法吗? 回复
    孤王就是辣么帅 0
    2019/1/25 14:58:44
    我想修改宽度,但是这个边界就异常了,能说下怎么算宽度吗 回复
    爱损 0
    2018/12/26 14:26:14
    边框做成跑马灯行吗
    回复
    Seation 0
    2018/9/3 10:23:34
    请问如何兼容搜狗?IE都行了,搜狗居然不行
    回复
    土豆不是瓜 0
    2017/10/26 12:59:09
    双鱼座的spring 0
    2017/6/1 14:46:33

    如果想给弹出框加这个特效,但是弹出框大小是根据屏幕大小调整的,那这个clip里面的200px怎么改,是只能定死吗,不能用%吗,求解答,谢谢

        Aimee Tang0
        2019/1/20 19:09:47
        你这个最后怎么解决的呀?我也想这样做
        拾荒0
        2019/9/24 15:08:17
        你好,这个是怎么解决的吗,我想用在矩形上
    回复
    。。。。。 0
    2017/4/6 12:04:23
    someone.sth 0
    2016/11/7 22:11:52
    边框铺满屏幕怎么调阿 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复