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的viewport在移动端Web响应式布局中的运用)
- css3粒子特效(利用CSS3实现毛玻璃效果示例源码)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- css3伸缩布局及图解(利用CSS3实现自定义滚动条代码分享)
- css3水平移动效果(利用css3 translate完美实现表头固定效果)
- css3实现120度的箭头(使用css实现任意大小、任意方向和任意角度的箭头示例)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- css3 图片边框(css3图片边框border-image的用法)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- css3最新特效(CSS3实现的文字弹出特效)
- css3经典动画效果(CSS3 3D位移translate效果实例介绍)
- css3动画效果图(css3实现波纹特效、H5实现动态波浪效果)
- css3弹出动画效果(CSS3实现跳动的动画效果)
- 电影《民间怪谈录之走阴人》定档8月5日,开启一场中式惊悚之旅(电影民间怪谈录之走阴人定档8月5日)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
热门推荐
- dedecms栏目内容怎么插入分页符(dedecms自动给已经发布过的文章中的关键词加超链接)
- 怎么用php开发验证码(PHP简单验证码功能机制实例详解)
- ASP.NET中Web.config文件的配置
- 微信小程序做计算器(微信小程序实现计算器小功能)
- C#栈和堆的区别
- thinkphp使用说明(thinkphp框架使用JWTtoken的方法详解)
- 盘点CSS Selectors Level4中新增的选择器(盘点CSS Selectors Level4中新增的选择器)
- python3.x base64怎么加密解密(python3.x实现base64加密和解密)
- linux如何使用gdb调试(Linux下如何使用gdb调试core文件)
- react执行流程(React开启代理的2种实用方式)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9