div+css实现网站通知通告弹出层代码
代码语言:html
所属分类:弹出层
代码描述:div+css实现网站通知通告弹出层代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin:0; padding:0 } *,:after,:before { box-sizing:border-box } body,html { height:100% } .bj { background-image:url(//repo.bfw.wiki/bfwrepo/svg/xyjz.svg); background-size:cover } html { -webkit-tap-highlight-color:transparent; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; line-height:1.6; font-size:14px; -webkit-tap-highlight-color:transparent } body { -webkit-touch-callout:none; -webkit-font-smoothing:antialiased; font-family:-apple-system-font,BlinkMacSystemFont,helvetica neue,pingfang sc,hiragino sans gb,microsoft yahei ui,microsoft yahei,Arial,sans-serif } body { color:#282828; background:#f7f8f9 } .shortcuts-mobile-overlay { transition:background .3s ease }.popup-main p:last-child { position:relative } .popup-main p:last-child::after { content:" "; position:absolute; left:0; top:0; width:100%; height:1px; background-color:#f1f3f5 } @media only screen and (max-width:559px) { .popup-main p:last-child::after { -webkit-transform:scaleY(.5); transform:scaleY(.5) } }@font-face { font-family:iconfont; src:url(fonts/iconfont.eot%3Ffanger.html); src:url(fonts/iconfont.eot%3Ffanger.html) format("embedded-opentype"),url(fonts/iconfont.ttf%3Ffanger.html) format("truetype"),url(fonts/iconfont.woff%3Ffanger.html) format("woff"),url(fonts/iconfont.svg%3Ffanger.html) format("svg"); font-weight:400; font-style:normal; font-display:block } .shortcuts-mobile-overlay { pointer-events:none; position:fixed; top:0; left:0; bottom:0; right:0; background-color:transparent; content:""; z-index:19 } .popup-btn { padding:0 15px; line-height:40px; font-size:14px; display:inline-block; border-radius:8px } .popup-btn { transition:box-shadow .2s ease; background:#e50914; color:#fff; background:linear-gradient(to right,#ff711f 0,#e50914 100%); box-shadow:0 10px 12px -4px rgba(229,9,20,.25) } .popup-btn:hover { box-shadow:0 10px 12px -4px rgba(229,9,20,.4) } .popup-btn { position:relative; overflow:hidden; border-radius:50px; font-weight:700; padding:0 30px } .popup-btn:hover { color:#fff } .popup-btn::after { content:''; height:50px; width:25px; background:#fff; position:absolute; top:-5px; transform:skewX(-45deg); right:115%; opacity:.25 } .popup-btn:hover::after { right:-44%; transition:right .56s ease } @media(max-width:1024px) { .popup-btn::after { right:-44%; o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0