css实现手机设置列表ui效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现手机设置列表ui效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ padding: 150px; } .ios-modern-settings__container { font-family: -apple-system, BlinkMacSystemFont, "SF Pro", sans-serif; max-width: 300px; width: 100%; height: 380px; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-radius: 18px; padding: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow-y: auto; position: relative; scrollbar-width: none; /* Firefox */ } .ios-modern-settings__container::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .ios-modern-settings__header { font-size: 20px; font-weight: 600; color: #000000; margin: 8px 0 14px 12px; letter-spacing: -0.4px; } .ios-modern-settings__card { display: flex; align-items: center; background-color: #ffffff; border-radius: 12px; padding: 12px 14px; margin: 4px 0; cursor: pointer; transition: transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1), background-color 0.25s ease, box-shadow 0.25s ease; } .ios-modern-settings__card:hover { background-color: #f7f7f8; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .ios-modern-settings__card:active { transform: scale(0.96); transition: transform 0.1s ease; } .ios-modern-settings__icon { width: 34px; height: 34px; margin-right: 12px; display: flex; justify-content: center; align-items: center; border-radius: 10px; transition: transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1); } .ios-modern-settings__card:hover .ios-modern-settings__icon { transform: scale(1.05); } .ios-modern-settings__icon svg { width: 22px; height: 22px; } .ios-modern-settings__content { flex: 1; } .ios-modern-settings__title { font-size: 16px; font-weight: 500; color: #000000; margin: 0; letter-spacing: -0.3px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0