h5绚丽的边框-border渐变和字体颜色渐变
来源:互联网 发布:python数据分析 豆瓣 编辑:程序博客网 时间:2024/05/17 23:40
1.先看效果图:
2.代码上部分注稀:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></head><body><style>body{ text-align: center;}button { background: none; border: 0; box-sizing: border-box;/*border和padding全会在你设置的宽高内部*/ margin: 1em; padding: 1em 2em; box-shadow: inset 0 0 4px 3px plum;/*inset内阴影。该参数可选,不设的话默认是外阴影。*/ color: blue; font-size: inherit; font-weight: 700; position: relative;} button::before, button::after { box-sizing: inherit;/*继承父的*/ content: ''; position: absolute; width: 100%; height: 100%; }.draw { transition: color 2s;/*字体颜色出现渐变一个用时2s*/ } .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: black; } .draw:hover::before, .draw:hover::after { width: 100%; height: 100%; } .draw:hover::before { border-top-color: red; border-right-color: red; transition: width 0.25s ease-out, /*ease-out是结束是慢的*/ height 0.25s ease-out 0.25s; } .draw:hover::after { border-bottom-color: red; border-left-color: red; transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; }</style><button class="draw">Draw border</button></body></html>
有用请赞一下咯!嘻嘻
阅读全文
0 0
- h5绚丽的边框-border渐变和字体颜色渐变
- 字体颜色渐变和边框渐变的一个方法
- silverlight border 边框和背景渐变效果
- Tab栏图标和字体颜色渐变的实现
- css 字体颜色渐变
- 【ps】制作字体上的渐变颜色
- label字体颜色的彩色渐变
- css3实现字体的颜色渐变
- flex的边框渐变
- UGUI中字体颜色渐变
- code实现透明度渐变和颜色渐变的view
- code实现透明度渐变和颜色渐变的view
- code实现透明度渐变和颜色渐变的view
- code实现透明度渐变和颜色渐变的view
- iOS实现透明度渐变和颜色渐变的view
- 渐变按钮、渐变边框
- 字体的线性渐变
- 实现透明度渐变和颜色渐变
- 关于 mysql SET GLOBAL sql_slave_skip_counter = N 的一点记录
- Java值、引用和对象
- CentOS6.X 升级内核Kernel
- React Native下载打开pdf文件
- linux查看端口被哪个进程占用
- h5绚丽的边框-border渐变和字体颜色渐变
- 线性回归学习笔记
- 基于jQuery.i18n.properties插件实现前端页面国际化
- hdu5919 Sequence II(主席树求第k小)
- js添加样式后优先级高于hover的解决办法
- linux 进程间通信(2)
- 10.Python入门之字典1
- Linux维护排错常用命令
- 青橙A1001. 01序列