六种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 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
HTML中的表单元素介绍
Feb 28 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针对cookie操作的队列操作类实例
2014/12/10 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
orm获取关联表里的属性值
2016/04/17 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue实现购物车列表
2020/06/30 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python中global用法实例分析
2015/04/30 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
上班旷工检讨书
2015/08/15 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python