Home > Article > Web Front-end > 具有动态效果的响应式设计_html/css_WEB-ITnose
具有动态效果的响应式设计_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:591136browse
?摘要：
响应式设计已经流行很久了，今天分享一个借助transition来实现动态切换布局的效果。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .conteneur_responsive > div { -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .conteneur_responsive { max-width:825px; width:100%; } .conteneur_responsive > div { position: relative; box-shadow: 1px 1px 4px #999999; display: inline-block; vertical-align: top; background-color: #ffffff; width: 30%; height: 630px; margin: 5px; } .prequelle { color: #ffffff; font-weight: 100; font-size: 40px; padding:80px; } .gene_text { text-align: center; color: #999999; padding: 15px; font-weight: 300; font-size: 14px; }.btn { padding: 15px; color: #ffffff; margin:15px; position: absolute; bottom: 0px; width:76%; font-weight: 300; font-size: 16px; } @media screen and (max-width: 900px) { .conteneur_responsive { max-width:610px; width:100%; } .conteneur_responsive > div { background-color: #ffffff; display: inline-block; width: 100%; height:auto; } .prequelle { color: #ffffff; font-weight: 100; font-size: 40px; padding:40px; } .btn { padding: 15px; color: #ffffff; margin:15px; position: absolute; bottom: 0px; width:90%; font-weight: 300; font-size: 16px; } } </style></head><body> <div align="center"> > Resize your navigator's window to see this awesome responsive effect <<br><br> <div class="conteneur_responsive"> <div class="column"> <div class="prequelle" style="background-color: #1abc9c;">9?</div> <div class="gene_text">Omitto iuris dictionem in libera civitate contra leges senatusque consulta; caedes relinquo; libidines praetereo, quarum <br /><br />--<br /><br /> abiecisse et morte voluntaria</div> <div class="btn" style="background-color: #1abc9c;">Buy it</div> </div> <div class="column"> <div class="prequelle" style="background-color: #f39c12;">11?</div> <div class="gene_text">Omitto iuris dictionem in libera civitate contra leges senatusque consulta; caedes relinquo; libidines praetereo, quarum <br /><br />--<br /><br /> abiecisse et morte voluntaria <br /><br />--<br /><br /> idcirco omitto, quod non gravissima sint, sed quia nunc sine teste dico</div> <div class="btn" style="background-color: #f39c12;">Buy it</div> </div> <div class="column"> <div class="prequelle" style="background-color: #e74c3c;">25?</div> <div class="gene_text">Omitto iuris dictionem in libera civitate contra leges senatusque consulta; caedes relinquo; libidines praetereo, quarum <br /><br />--<br /><br /> abiecisse et morte voluntaria <br /><br />--<br /><br /> idcirco omitto, quod non gravissima sint, sed quia nunc sine teste dico <br /><br />--<br /><br /> relinquo; libidines praetereo, quarum</div> <div class="btn" style="background-color: #e74c3c;">Buy it</div> </div> </div> </div></body></html> 效果：
改变浏览器大小就能看到效果了
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：php正则匹配html中的带class的div，选取其中的内容_html/css_WEB-ITnoseNext article：漫谈css布局_html/css_WEB-ITnose