六种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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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解析url的三个示例
2014/01/20 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Python封装shell命令实例分析
2015/05/05 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
5款非常棒的Python工具
2018/01/05 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
酒店员工检讨书
2014/02/18 职场文书
技能竞赛活动方案
2014/02/21 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python