六种css3实现的边框过渡效果


Posted in HTML / CSS onApril 22, 2021

六种效果

六种css3实现的边框过渡效果

实现代码

html

<h1>CSS Border Transitions</h1>

<section class="buttons">
  <button class="draw">Draw</button>

  <button class="draw meet">Draw Meet</button>

  <button class="center">Center</button>

  <button class="spin">Spin</button>

  <button class="spin circle">Spin Circle</button>

  <button class="spin thick">Spin Thick</button>
</section>

css3

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #60daaa;
  border-left-color: #60daaa;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
  color: #fbca67;
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: #fbca67;
  border-right-color: #fbca67;
}
.meet:hover::after {
  border-bottom-color: #fbca67;
  border-left-color: #fbca67;
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

.center:hover {
  color: #6477b9;
}
.center::before, .center::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
}
.center::before {
  border-top: 2px solid #6477b9;
  border-bottom: 2px solid #6477b9;
  transform: scale3d(0, 1, 1);
}
.center::after {
  border-left: 2px solid #6477b9;
  border-right: 2px solid #6477b9;
  transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform 0.5s;
}

.spin {
  width: 5em;
  height: 5em;
  padding: 0;
}
.spin:hover {
  color: #0eb7da;
}
.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
}
.spin:hover::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  transform: rotate(270deg);
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

.thick {
  color: #f45e61;
}
.thick:hover {
  color: #fff;
  font-weight: 700;
}
.thick::before {
  border: 2.5em solid transparent;
  z-index: -1;
}
.thick::after {
  mix-blend-mode: color-dodge;
  z-index: -1;
}
.thick:hover::before {
  background: #f45e61;
  border-top-color: #f45e61;
  border-right-color: #f45e61;
  border-bottom-color: #f45e61;
  transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
}
.thick:hover::after {
  border-top: 2.5em solid #f45e61;
  border-left-width: 2.5em;
  border-right-width: 2.5em;
}

/* Page styling */
html {
  background: #fefefe;
}

body {
  background: #fefefe;
  color: #4b507a;
  font: 300 24px/1.5 Lato, sans-serif;
  margin: 1em auto;
  max-width: 36em;
  padding: 1em 1em 2em;
  text-align: center;
}

.buttons {
  isolation: isolate;
}

h1 {
  font-weight: 300;
  font-size: 2.5em;
}

以上就是六种css3实现的边框过渡效果的详细内容,更多关于CSS3 边框过渡的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
CSS预处理框架——Stylus
Apr 21 #HTML / CSS
基于CSS3画一个iPhone
CSS3 实现NES游戏机的示例代码
css实现文章分割线样式的多种方法总结
Apr 21 #HTML / CSS
You might like
php MySQL与分页效率
2008/06/04 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php图片上传类 附调用方法
2016/05/15 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
用Python读取几十万行文本数据
2018/12/24 Python
django 控制页面跳转的例子
2019/08/06 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
银行财务部实习生的自我鉴定
2013/11/27 职场文书
年度评优评先方案
2014/06/03 职场文书
超市周年庆活动方案
2014/08/16 职场文书
教师个人学习总结
2015/02/11 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL