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

最新推荐文章于 2024-08-14 22:24:56 发布

noxLiu

最新推荐文章于 2024-08-14 22:24:56 发布

阅读量446

点赞数

分类专栏： css3 文章标签： css3

css3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

摘要：

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

效果：

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

noxLiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
具有动态效果的响应式设计

摘要：　　响应式设计已经流行很久了，今天分享一个借助transition来实现动态切换布局的效果。代码：DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> .conteneur_responsive > div
复制链接

扫一扫

专栏目录