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

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

摘要:


  

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


相关文章
|
存储 算法 容器
【优选算法专栏】专题十六:BFS解决最短路问题(二)
【优选算法专栏】专题十六:BFS解决最短路问题(二)
123 1
|
9月前
|
XML Java 应用服务中间件
Spring Boot 两种部署到服务器的方式
本文介绍了Spring Boot项目的两种部署方式:jar包和war包。Jar包方式使用内置Tomcat,只需配置JDK 1.8及以上环境,通过`nohup java -jar`命令后台运行,并开放服务器端口即可访问。War包则需将项目打包后放入外部Tomcat的webapps目录,修改启动类继承`SpringBootServletInitializer`并调整pom.xml中的打包类型为war,最后启动Tomcat访问应用。两者各有优劣,jar包更简单便捷,而war包适合传统部署场景。需要注意的是,war包部署时,内置Tomcat的端口配置不会生效。
2184 17
Spring Boot 两种部署到服务器的方式
|
11月前
|
消息中间件 Kafka
【赵渝强老师】Kafka分区的副本机制
在Kafka中,每个主题可有多个分区,每个分区有多个副本。其中仅有一个副本为Leader,负责对外服务,其余为Follower。当Leader所在Broker宕机时,Follower可被选为新的Leader,实现高可用。文中附有示意图及视频讲解。
286 0
|
人工智能 搜索推荐 程序员
操作系统的演进与现代计算的未来
在数字时代的浪潮下,操作系统作为计算机技术的核心,其发展轨迹映射了技术进步的脉络。从单任务到多任务,从封闭到开源,操作系统的演进不仅仅是功能的增加和性能的提升,更是对人机交互、数据处理和网络通信方式的根本变革。本文将通过探索操作系统的历史演变,揭示其对现代计算架构的影响,并展望操作系统在未来计算领域可能带来的革命性变化。
135 27
|
存储 JSON 关系型数据库
MySQL JSON 类型:功能与应用
MySQL JSON 类型:功能与应用
|
Java 测试技术 C#
几个好用的自动化测试工具总结
【6月更文挑战第4天】几个好用的自动化测试工具总结
892 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的竞赛报名系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的竞赛报名系统附带文章源码部署视频讲解等
88 0
|
设计模式 存储 API
C++桥接模式大解析:轻松设计与实现高效软件架构
C++桥接模式大解析:轻松设计与实现高效软件架构
490 0
|
存储 监控 数据挖掘
C#医院数字化LIS(检验信息系统)源码
LIS系统能够自动处理大量的医学数据,包括样本采集、样本处理、检测分析、报告生成等。它能够快速、准确地进行化验检测,提高医院的运营效率。LIS系统还提供了丰富的数据分析功能,能够对医院化验室的业务流程进行全面、细致的监控。
241 0
|
安全 网络安全
为您的网站添加SSL安全认证签章
为您的网站添加SSL安全认证签章
432 0