div+css实现三维悬浮倾斜天气预报卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现三维悬浮倾斜天气预报卡片效果代码
代码标签: div ss 三维 悬浮 倾斜 天气 预报 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <style> body { background: #E0EAFC; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #E0EAFC, #CFDEF3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: "Montserrat", sans-serif; text-align: center; padding: 100px; } .weather { perspective: 1000px; } .weather-symbol { display: block; width: 50px; height: 50px; } .weather-symbol.is-sunny { background: url("https://db.tt/Eci0vL1h") no-repeat center; } .weather-symbol.is-sunny.is-white { background: url("https://db.tt/lSuOMB3o") no-repeat center; } .weather-symbol.is-foggy { background: url("https://db.tt/7jdwCwXc") no-repeat center; } .weather-symbol.is-rainy { background: url("https://db.tt/FfcVMaVr") no-repeat center; } .weather__teaser { display: inline-block; vertical-align: top; width: 340px; margin: 0 auto 1%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); border-radius: 10px; position: relative; background: white; overflow: hidden; text-align: left; } .weather__teaser header { text-align: center; position: relative; overflow: hidden; height: 280px; padding-bottom: 40px; } .weather__teaser header .weather-symbol { position: absolute; z-index: 200; left: 50%; transform: translateY(70px) translateX(-50%); } .weather__teaser header h1 { position: absolute; z-index: 200; color: white; text-align: center; font-size: 42px; left: 50%; transform: translateY(90px) translateX(-50%); text-shadow: 1px 1.732px 3px rgba(0, 0, 0, 0.2); } .weather__teaser header .hour { position: absolute; z-index: 200; color: white; text-align: center; font-size: 22px; font-weight: light; left: 50%; transform: translateY(160px) translateX(-50%); text-shadow: 1px 1.732px 3px rgba(0, 0, 0, 0.2); } .weather__teaser header img { width: 480px; height: auto; display: block; transform: scale(1.4); top: 0; position: absolute; transition: 0.3s margin-top, 0.1s transform; } .weather__teaser .main-content { position: relative; padding: 10px 0; text-align: left; left: 0; width: 100%; bottom: 0; transition: bottom 0.3s; background: white; box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.2); display: table; } .weather__teaser .main-content:before { content: ""; } .weather__teaser .main-content .weather-column { padding: 0 0 20px; display: table-cell; text-align: center; opacity: 0.5; transition: all 0.3s; cursor: pointer; } .weather__teaser .main-content .weather-column.is-active, .weather__teaser .main-content .weather-column:hover { opacity: 1; transition: all 0.3s; } .weather__teaser .main-content .weather-column .weather-symbol { margin: 0 auto; } .weather__teaser .main-content .weather-column .day { text-transform: uppercase; font-weight: bold; font-size: 20px; margin: 10px 0 0; } .weather__teaser .main-content .weather-column .temperature { margin: 5px 0 0; } </style> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> </head> <body > <div class="weather"> <section class="weather__teaser"> <article class="weather-teaser__web"> <header> <span class="weather-symbol is-sunny is-white"></span> <h1>32°C</h1> <p class="hour">23:00</p> <img src="//repo.bfw.wiki/bfwrepo/image/6323c2063254b.png" class="image-style-teaser-work"> </header> <main class="main-content"> <article class="weather-column"> <span class="weather-symbol is-rainy"></span> <p class="day">Sun</p> <p class="temperature">26°</p> </article> <article class="weather-column is-active"> <span class="weather-symbol is-sunny"></span> <p class="day">Mon</p> <p class="temperature">32°</p> </article> <article class="weather-column".........完整代码请登录后点击上方下载按钮下载查看
网友评论0