|
|
Last edited by abababa at 4 days ago
那个按钮还可以用css来做成主楼那种形状的，然后把背景弄成圆的，怎么转都是圆，就看不出来背景在转，只看到箭头在转了。就下面这种的：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Details</title>
- <style>
- details > summary {
- list-style: none;
- cursor: pointer;
- padding: 12px 60px 12px 0;
- position: relative;
- border: 1px solid black;
- }
- summary::after {
- content: '';
- width: 40px;
- height: 40px;
- background: #E0E0E0;
- border-radius: 50%;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- transition: all 0.3s ease;
- }
- summary::before {
- content: '';
- width: 20px;
- height: 20px;
- border-left: 4px solid gray;
- border-bottom: 4px solid gray;
- position: absolute;
- right: 30px;
- top: 50%;
- transform:
- translateX(50%)
- translateY(-65%)
- rotate(-45deg);
- z-index: 2;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- }
- details[open] summary::before {
- transform:
- translateX(50%)
- translateY(-35%)
- rotate(135deg);
- }
- summary:hover::after {
- background: #E0E0E0;
- }
- summary:hover::before {
- border-color: #000;
- filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
- }
- </style>
- </head>
- <body>
- <div style="width: 300px;">
- <details>
- <summary>show/hide</summary>
- <p>text</p>
- </details>
- </div>
- </body>
- </html>
|
|
，如下，有一个动画的，然后右边那个三角号，就是content: '>';，可以自己换成别的东西。
