VUE CSS流动边框特效（二）

效果：

HTML:

 <div class="divSide"><span class="s-1" /><span class="s-2" /><span class="s-3" /><span class="s-4" />
</div>

CSS :

.divSide {overflow: hidden;width: 460px;height: 994px;position: relative;background-color: #021025;border: 1px solid rgba(11, 85, 140, 0.5);>span{position: absolute;display: block;}.s-1 {filter: hue-rotate(0deg);top: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(90deg, transparent, #3a86ff);animation: animate1 1s linear infinite;}.s-2 {filter: hue-rotate(60deg);top: -100%;right: 0;width: 3px;height: 100%;background: linear-gradient(180deg, transparent, #3a86ff);animation: animate2 1s linear infinite;animation-delay: 0.25s;}.s-3 {filter: hue-rotate(120deg);bottom: 0;right: 0;width: 100%;background: linear-gradient(270deg, transparent, #3a86ff);animation: animate3 1s linear infinite;animation-delay: 0.5s;}.s-4 {filter: hue-rotate(300deg);bottom: -100%;left: 0;width: 3px;height: 100%;background: linear-gradient(360deg, transparent, #3a86ff);animation: animate4 1s linear infinite;animation-delay: 0.75s;}
}
@keyframes animate1 {0% {left: -100%;}50%,100% {left: 100%;}
}
@keyframes animate2 {0% {top: -100%;}50%,100% {top: 100%;}
}
@keyframes animate3 {0% {right: -100%;height: 3px;}50%,100% {height: 2px;right: 100%;}
}
@keyframes animate4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}
}

VUE CSS流动边框特效（二）相关推荐

VUE CSS流动边框特效（一）
效果: HTML: <div class="divSide" /> CSS: .divSide {width: 460px;height: 994px;position ...
HTML/CSS/JS 鼠标特效二（鼠标点击WEB页面出现彩色爱心冒泡特效）
1.实际效果 [青树柠檬~旧事老酒] 2.示例代码 /*--鼠标点击特效,不同颜色桃心图案*/ <script type="text/javascript">!func ...
css矩形外发光,CSS3 实现发光边框特效
运行效果: html css body { margin: 0; width: 100vw; height: 100vh; background: #010326; } .root { --glow_ ...
css 科技边框_CSS3实现发光边框特效
这篇文章我们来讲一下在网站建设中,CSS3实现发光边框特效.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 运行效果: html CSS body { margin: 0; ...
CSS3新特性总结及CSS组件、特效汇总
本文分2部分: 之前写的CSS3新特性详解篇,共6篇博文总结: 常见的一些CSS组件.效果汇总(不包括BootStrap等前端框架已实现的CSS组件): 一.CSS3新特性总结 1.CSS3选择器.边 ...
CSS基础班笔记(二)
web前端剑法之css ??web前端剑法之css 地址 ??CSS基础班笔记(一) https://blog.csdn.net/Augenstern_QXL/article/details/1155 ...
DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚 ...
Vue+Vant 基于DatetimePicker进行二次开发，实现yyyyMMdd hh:mm:ss时间选择
Vue+Vant 基于DatetimePicker进行二次开发,实现yyyyMMdd hh:mm:ss时间选择 1.效果图 2.前提 3.项目结构 4.index.vue 5.timeSelectio ...
纯CSS3流光边框特效
实现原理: div的before元素当成左边框内部一个class=bottom的i标签当下边框 div的after元素当成右边框内部一个class=top的i标签当上边框效果图: 原理图: 左边 ...

VUE CSS流动边框特效（二）

VUE CSS流动边框特效（二）相关推荐

最新文章

热门文章