Heim > Artikel > Web-Frontend > 具有动态效果的响应式设计_html/css_WEB-ITnose
具有动态效果的响应式设计_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:591160Durchsuche
?摘要：
响应式设计已经流行很久了，今天分享一个借助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> 效果：
改变浏览器大小就能看到效果了
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：php正则匹配html中的带class的div，选取其中的内容_html/css_WEB-ITnoseNächster Artikel：漫谈css布局_html/css_WEB-ITnose