css3边框讲解(六种css3实现的边框过渡效果)
类别:Web前端 浏览量:2299
时间:2021-10-27 10:54:10 css3边框讲解
六种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 边框过渡的资料请关注开心学习网其它相关文章!
您可能感兴趣
- css3三维模型(CSS3系列之3D制作方法案例)
- css3实用指南(css3截图_动力节点Java学院整理)
- 用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- css3怎么创建圆角(CSS3中border-radius属性设定圆角的使用技巧)
- CSS3 transition过渡效果
- css3右侧栏伸缩效果(使用CSS3实现环形进度条效果)
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- CSS3中user-select的用法
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- css3盒子布局(CSS3弹性伸缩布局之box布局)
- css3图片悬停切换代码(CSS3 实现的图片悬停的切换按钮)
- css 图片边缘虚化(CSS3对图片照片进行边缘模糊处理的实现)
- css3语法结构(CSS3中的注音对齐属性ruby-align用法指南)
- css3怎么改成3d(灵活运用CSS3特性绘制简易版围棋效果)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
- 换代在即,现在是抄底 7.5代 高尔夫的最佳时机吗(换代在即现在是抄底)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
热门推荐
- css3渐变样式怎么用(CSS3 background-image颜色渐变的实现代码)
- 如何安装phpmysql环境(phpnow重新安装mysql数据库的方法)
- css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
- springboot内置tomcat启动过程(Tomcat启动springboot项目war包报错:启动子级时出错的问题)
- SQL SERVER书签查找
- docker添加mq基础镜像(Docker阿里云RocketMQ 4.5.1部署流程详解)
- dedecms漏洞防范(浅析DedeCMS投票模块漏洞的解决方法)
- python批量创建字典(Python编写合并字典并实现敏感目录的小脚本)
- windows server开启ftp服务器(全面提高Windows系统FTP服务器的安全性能)
- pythonindex函数用法(python sort、sort_index方法代码实例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9