响应式设计已经流行很久了，今天分享一个借助transition来实现动态切换布局的效果。
代码：
Document .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; } } > Resize your navigator's window to see this awesome responsive effect <
9?
查看更多关于具有动态效果的响应式设计_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did106817