html 边框效果,css实现边框动画效果

最近写了几个页面都用到css动画,以及很多before,after伪类。在此记录一下成果。css边框循环动画,页面效果如下:1、沿着边框动画的图形使用before,after伪类写的。当时想用切图来写,后来考虑到优化,就用了css来写。具体代码如下:i.border-right-animate{display: block;height: 35px;width: 5px;background: #...
摘要由CSDN通过智能技术生成

最近写了几个页面都用到css动画,以及很多before,after伪类。在此记录一下成果。

css边框循环动画,页面效果如下:

bVYEN5?w=531&h=619

1、沿着边框动画的图形使用before,after伪类写的。当时想用切图来写,后来考虑到优化,就用了css来写。具体代码如下:

i.border-right-animate{

display: block;

height: 35px;

width: 5px;

background: #0b82ce;

color: #0b82ce;

position: absolute;

top: 150px;

right: -3px;

-webkit-animation: borderMove 6s linear infinite;

-o-animation: borderMove 6s linear infinite;

animation: borderMove 6s linear infinite;

}

i.border-right-animate:before{

content: '';

display: block;

height: 40px;

width: 7px;

background: #0b82ce;

color: #0b82ce;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现CSS边框发光动画效果,您可以使用CSS的animation属性和box-shadow属性。首先,您可以为具有边框的元素创建一个CSS类,例如名为"glow-border"的类。然后,您可以在该类定义动画和光晕效果。 下面是一个示例代码: ```css .glow-border { animation: glow 2s infinite; border: 2px solid transparent; } @keyframes glow { 0% { box-shadow: 0 0 5px #00ff00; } 50% { box-shadow: 0 0 20px #00ff00; } 100% { box-shadow: 0 0 5px #00ff00; } } ``` 在上面的代码,我们创建了一个名为"glow-border"的类,并为其指定了一个名为"glow"的动画。该动画会在2秒内循环播放。我们还使用了border属性来设置元素的边框样式。 在关键帧动画,我们定义了三个关键帧,分别是0%、50%和100%。在0%和100%的关键帧,我们使用box-shadow属性为元素添加一个绿色的发光效果。在50%的关键帧,我们将box-shadow的大小增加,以增强发光效果。 您可以将"glow-border"类应用于您想要添加发光动画效果的元素上,例如一个div元素。通过这样做,您将看到边框发光的动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【前端实例代码】使用 HTML CSS 和 JavaScript 实现具有带边框悬停动画的彩色发光霓虹灯悬停效果动画按钮...](https://blog.csdn.net/qq_22182989/article/details/126413773)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值