六种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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 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依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
javascript读取RSS数据
2007/01/20 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python2随机数列生成器简单实例
2017/09/04 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python global全局变量函数详解
2018/09/18 Python
Django框架反向解析操作详解
2019/11/28 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python 爬取疫情数据的源码
2020/02/09 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
七年级地理教学反思
2014/01/26 职场文书
环境建设实施方案
2014/03/14 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
市场营销计划书范文
2015/01/16 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python