六种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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
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基本函数汇总
2015/07/09 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
javascript截取字符串小结
2015/04/28 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
英语故事演讲稿
2014/04/29 职场文书
诚实守信演讲稿
2014/09/01 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
会议通知范文
2015/04/15 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
调解书格式范本
2015/05/20 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python实现天气查询软件
2021/06/07 Python