摘要：

　　响应式设计已经流行很久了，今天分享一个借助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">&gt; Resize your navigator's window to see this awesome responsive effect &lt;<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>

效果：

　　改变浏览器大小就能看到效果了

具有动态效果的响应式设计相关推荐

一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
基于物理尺寸的响应式设计(转)
两种Queries之间的细微区别比较如下两个media-query声明: @media (min-resolution: 341dpi) and (min-width: 767px) > ...
为什么要学习响应式设计
编者按:以下是图灵即将出版的新书<响应式Web设计:HTML5和CSS3实战>的封底文字.相信它能解答一些读者的疑问. 随着iPad mini的发布,又一个新的屏幕尺寸诞生了.用不着全面统 ...
设计师不应该错过的响应式设计框架（含优缺点分析）
Ethan Marcotte称响应式设计是基于网格建立一个网站.Marcotte定义这项技术后,响应式设计框架开始出现,主要是css和JavaScript的结合.许多框架都是开源的,可以免费下载和快速 ...
web设计经验一提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议一.直观性和易用性在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
媒体查询响应式设计
一.媒体查询 <1>作用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@m ...
响应式设计的十个基本技巧
为什么80%的码农都做不了架构师?>>> Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也 ...
8个实用的响应式设计框架
2019独角兽企业重金招聘Python工程师标准>>> 响应式Web设计的运用越来越更加广泛.因此,做为一名Web开发人员和前端设计师,我们有必要了解更多的有关于响应式设计的工具和资 ...
转自CSDNattilax的专栏：自适应网页设计跟响应式设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...

具有动态效果的响应式设计

摘要：

代码：

效果：

具有动态效果的响应式设计相关推荐

最新文章

热门文章

具有动态效果的响应式设计

​摘要：

代码：

效果：

具有动态效果的响应式设计相关推荐

最新文章

热门文章

摘要：