关注用户体验，分享前端技术

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

​摘要：

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

 

效果：

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

 

posted @   夕阳白雪  阅读(770)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示