css模仿Instagram 多彩聊天窗口样式
代码语言:html
所属分类:布局界面
代码描述:css模仿Instagram 多彩聊天窗口样式,采用flex布局方式
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet"> <style> *, *::after, *::before { box-sizing: border-box; font-family: 'Roboto', sans-serif; } html { background: #333; height: 100%; } body { -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; display: -webkit-box; display: flex; height: 100%; } code { color: rgba(255, 255, 255, 0.75); display: inline; } .Phone { background: #111; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); height: 100%; max-height: 720px; max-width: 420px; overflow: hidden scroll; width: 100%; } .List { list-style: none; margin: 0; padding: 20px; } .Item { display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; } .Item + .Item { margin-top: 8px; } .Avatar { border-radius: 50%; overflow: hidden; flex-shrink: 0; -webkit-box-flex: 0; flex-grow: 0; height: 32px; width: 32px; } .Avatar-image { display: block; width: 100%; } .Messages { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .Message { color: white; letter-spacing: 0.5px; line-height: 1.25; font-weight: 300; margin: 1px; } .Message-inner { background: #333; display: inline-block; max-width: 260px; padding: 8px 16px; } .Item--left .Messages { margin-left: 16px; } .Item--left .Message-inner { border-radius: 0 16px 16px 0; } .Item--left .Message:first-child .Message-inner { border-top-left-radius: 16px; } .Item--left .Message:last-child .Message-inner { border-bottom-left-radius: 16px; } .Item--right { -webkit-box-pack: end; justify-content: flex-end; } .Item--right .Messages { -webkit-box-align: end; align-items: flex-end; } .Item--right .Message-inner { background-attachment: fixed; background-image: -webkit-gradient(linear, left top, left bottom, from(#4A00E0), to(#FC466B)); background-image: linear-gradient(#4A00E0, #FC466B); background-size: 100vw 100vh; border-radius: 16px 0 0 16px; } .Item--right .Message:first-child .Message-inner { border-top-right-radius: 16px; } .Item--right .Message:last-child .Message-inner { border-bottom-right-radius: 16px; } </style> </head> <body translate="no"> <div class="Phone"> <ul class="List"> <li class="Item Item--left"> <div class="Avatar"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="Avatar-image" /> </div> <div class="Messages"> <div class="Message"> <div class="Message-inner"> Hey there! </div> </div> </div> </li> <li class="Item Item--right"> <div class="Messages"> <div class="Message"> <div class="Message-inner"> Hi 👋, guess you're wondering about the the Instagram style color changing messages? </div> </div> <div class="Message"> <div class="Message-inner"> colour* </div> </div> </div> </li> <li class="Item Item--left"> <div class="Avatar"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="Avatar-image" /> </div> <div class="Messages"> <div class="Message"> <div class="Message-inner"> You read my mind </div> </div> <div class="Message"> <div class="Message-inner"> How is it done? </div> </div> </div> </li> <li class="Item Item--right"> <div class="Messages"> <div class="Message"> <div class="Message-inner"> Pretty simple really, using <code>linear-gradient</code> and <code>background-attachment: fixed;</code> </div> </div> <div class="Message"> <div class="Message-inner"> It creates a great effect. </div> </div> <div class="Message"> <div class="Message-inner"> 👌 </div> </div> </div> </li> <li class="Item Item--left"> <div class="Avatar"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="Avatar-image" /> </div> <div class="Messages"> <div class=&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0