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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
有用请赞一下咯!嘻嘻