您的位置：首页 > Web前端 > CSS

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

2015-08-12 13:39 615 查看

摘要：

　　响应式设计已经流行很久了，今天分享一个借助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>

效果：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航