css关闭按钮样式

xiaoxiao2021-02-28  101

效果图:录屏的时候忘了把鼠标录上,效果是鼠标移上放大变红透明度改变_(:3」∠)_懒得录第二遍了,只需要修改定位的right值和top值

代码:

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关闭按钮</title> <style> .aui_close { width: 20px; height: 20px; line-height: 20px; display: block; position: absolute; left:10px; top:10px; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; font-size: 18px; border-radius: 20px; background: #999; color: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-transition: linear .06s; -webkit-transition: linear .06s; transition: linear .06s; padding: 0; text-align: center; text-decoration: none; outline: none; cursor: pointer; } .aui_close:hover { width: 24px; height: 24px; line-height: 24px; left:8px; top:8px; color: #FFF; box-shadow: 0 1px 3px rgba(209, 40, 42, .5); background: #d1282a; border-radius: 24px; transition: all 0.2s ease-out; opacity: 0.8; } </style> </head> <body> <a class="aui_close" href="javascript:void(0);">×</a> </body> </html>

 

转载请注明原文地址: https://www.6miu.com/read-2614757.html

最新回复(0)