css实现玻璃形态的悬浮Blob动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现玻璃形态的悬浮Blob动画效果代码
代码标签: css 玻璃 形态 悬浮 Blob 动画 效果 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Blob Animation And Glassmorphism with CSS</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Nunito", sans-serif; } body { background: #1f1f47 } .container { min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .card { width: 400px; min-height: 250px; background: rgba( 255, 255, 255, 0.15 ); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); backdrop-filter: blur( 18px ); -webkit-backdrop-filter: blur( 18px ); border: 1px solid rgba( 255, 255, 255, 0.18 ); border-radius: 1rem; padding: 1.5rem; z-index: 10; color: whitesmoke; } .title { font-size: 2.2rem; margin-bottom: 1rem; } .subtitle { font-size: 1rem; margin-bottom: 2rem; } .btn { background: none; border: none; text-align: center; font-size: 1rem; color: whitesmoke; background-color: #fa709a; padding: 0.8rem 1.8rem; border-radius: 2rem; cursor: pointer; } .blob { position: absolute; width: 500px; height: 500px; background: linear-gradient( 180deg, rgba(47, 184, 255,0.42) 31.77%, #5c9df1 100% ); mix-blend-mode: color-dodge; -webkit-animation: move 25s infinite alternate; animation: move 25s infinite alternate; trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0