6款CSS特效边框样式

1.创建一个css文件写入下面代码

button {background: none;border: 0;box-sizing: border-box;box-shadow: inset 0 0 0 2px #f45e61;color: #f45e61;font-size: inherit;font-weight: 700;margin: 1em;padding: 1em 2em;text-align: center;text-transform: capitalize;position: relative;vertical-align: middle;}button::before, button::after {box-sizing: border-box;content: '';position: absolute;width: 100%;height: 100%;}.draw {-webkit-transition: color 0.25s;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: #2415f3;}.draw:hover::before, .draw:hover::after {width: 100%;height: 100%;}.draw:hover::before {border-top-color: #2415f3;border-right-color: #2415f3;-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}.draw:hover::after {border-bottom-color: #2415f3;border-left-color: #2415f3;-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;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: #068b2e;}.meet::after {top: 0;left: 0;}.meet:hover::before {border-top-color: #068b2e;border-right-color: #068b2e;}.meet:hover::after {border-bottom-color: #068b2e;border-left-color: #068b2e;-webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;}.center:hover {color: #c40eab;}.center::before, .center::after {top: 0;left: 0;height: 100%;width: 100%;-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;}.center::before {border-top: 2px solid #c40eab;border-bottom: 2px solid #c40eab;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);}.center::after {border-left: 2px solid #c40eab;border-right: 2px solid #c40eab;-webkit-transform: scale3d(1, 0, 1);transform: scale3d(1, 0, 1);}.center:hover::before, .center:hover::after {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;}.spin {width: 6em;height: 6em;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;-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;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;-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;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: 3em 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;-webkit-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;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: 3em solid #f45e61;border-left-width: 3em;border-right-width: 3em;}

2.在Html页面引入并使用

<link rel="stylesheet" href="./css/你的css文件名称">

<div class="btn-class"><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>
</div>

3.接下来在浏览器中打开你就可以看到酷炫的动画了

6款CSS特效边框样式相关推荐

php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...
去掉文本框默认特效边框样式
如果input{line-height:44px;}光标就会很高,要取掉. 取掉文本框特效边框样式input:focus{outline:none} 转载于:https://www.cnblogs.c ...
php外边框样式,CSS的边框样式
摘要:CSS中的边框样式,课程中主要是讲了border属性的使用,第一是有边框线的一个使用方式:第二个是边框圆角的实现:第三个是边框阴影的实现. 第一:边框线的使用方式是border中的三个属性,b ...
CSS 控制边框样式
CSS盒子(CSS box) 首先要清楚,CSS中没有box这个属性.CSS的盒子(box)是由以下几个部分组成的: 内容(content).填充(padding).边框(border)和边界(mar ...
css网页边框样式代码,css3边框样式(示例代码)
我们在设计网页样式的时候,经常会用到边框,那么css中的边框具体有哪些样式呢,下面我们来看. 首先,在css中设置border的时候,我们一般给给出三个值,线条样式,线条粗细,线条颜色. 以上的三个值 ...
css 实现app图标样式_界面按钮样式丑？不可能！16款css实现炫酷按钮
今天跟大家分享与CSS3按钮相关的特效展示案例,这些例子特效主要由CSS3编写出来,除了新鲜有创意之外,编写代码质量也很高,对于前端人员或设计师都有参考的价值,当然有的不是全CSS3编写的,部分是需要 ...
html表格展开格式,4款简单常见的纯CSS表格(table)样式
本文介绍4款简单常见的纯CSS表格(table)样式. 1.默认表格(default table) 添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders ...
css特效文件,CSS样式特效演示文件修改版.ppt
CSS样式特效演示文件修改版第五章 CSS样式特效回顾详述getElementById( )的主要功能详述getElementsByName( )的主要功能简述制作浮动广告图片的实现思路简 ...
css特效2：流光边框
作为流光系列之一,流光边框和流光背景只有在::after上设置存在区别,所以本文中将不会有与流光背景相同的代码,如果您还没有看流光背景时怎么做的话,建议先看我前面的文章 css特效1:流光背景?我不允 ...
用CSS添加鼠标样式-箭头、小手、十字 CSS实现虚线之dotted边框-点虚线、dashed边框-破折号虚线
用CSS添加鼠标样式-箭头.小手.十字- & CSS实现虚线之dotted边框-点虚线.dashed边框-破折号虚线 //小手样式 cursor:pointer; cursor其他取值 aut ...

6款CSS特效边框样式

6款CSS特效边框样式

1.创建一个css文件写入下面代码

2.在Html页面引入并使用

3.接下来在浏览器中打开你就可以看到酷炫的动画了

6款CSS特效边框样式相关推荐

最新文章

热门文章