wuruize888 2018-01-14 03:09 采纳率: 66.7%
浏览 1021
已采纳

css3的问题，谢谢解答。

 <html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            body{
                background: #ecedf0;
                margin: 0;
                padding: 0;
                font-size: 12px;
                width:100%;
                height:100%;
            }

            .main{
                width:100%;
                height:300px;
                float:left;
                margin: 0;
                padding: 0;
                min-width: 800px;
                background: #005ba6;
                display:inline-block;
            }

                        .top{
                            height:60px;
                            width:100%;
                            float:left;
                            background: red;
                        }
            .mleft{
                width:180px;
                height:100%;
                background: #191919;
                float: left;

/*                transition: left 0.3s;*/
            }
            .mleft:hover{
                left:-300px;
            }
            .mmiddle{
                width:20px;
                float: left;
                height:100%;
                background: red;
            }
            .mright{
                margin-left: 200px;
                height:100%;
                float:left;
                background: #008200;
            }
        </style>
    </head>
    <body>

        <div class='main'>
                        <div class='top'></div>
            <div class='bottom'>
                            <div class='mleft'></div>
                            <div class="mmiddle">点我隐藏mleft区域</div>
                            <div class="mright">如果mleft隐藏，此区域保持width:100%</div>
                        </div>
        </div>
    </body>
</html>

实现以下几点：
1.bottom区域以屏幕为中心占比100%高度；
2.点击mmiddle区域隐藏mleft区域，希望以css3的动画过渡效果实现。同时mright占比宽度100%；
3.再次点击mmiddle区域显示mleft区域，同时希望以css3的动画过渡效果实现。

谢谢各位帮忙

  • 写回答

1条回答

  • Go 旅城通票 2018-01-14 07:52
    关注
     <!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      html,  body {
            background: #ecedf0;
            margin: 0;
            padding: 0;
            font-size: 12px;
            width: 100%;
            height: 100%;
        }

        .main {
            width: 100%;
            height: 300px;
            float: left;
            margin: 0;
            padding: 0;
            min-width: 800px;
            background: #005ba6;
            display: inline-block;height:100%
        }

        .top {
            height: 60px;
            width: 100%;
            background: red;
        }
        .bottom{position:absolute;top:60px;bottom:0;width:100%}
        .cubic{-moz-transition:all 0.6s cubic-bezier(0.23,1,0.32,1);-webkit-transition:all 0.6s cubic-bezier(0.23,1,0.32,1);transition:all 0.6s cubic-bezier(0.23,1,0.32,1);}
        .mleft {
            width: 180px;
            height: 100%;
            background: #191919;
           position:absolute;left:0;top:0
        }

        .mmiddle {
            width: 20px;
            position:absolute;
            height: 100%;
            background: red;
           position:absolute;left:180px;top:0
        }

        .mright {
            margin-left: 200px;
            height: 100%;
            background: #008200;
        }
    </style>
</head>
<body>
<div class='main'>
        <div class='top'></div>
        <div class='bottom'>
            <div class='mleft cubic'></div>
            <div class="mmiddle cubic">点我隐藏mleft区域</div>
            <div class="mright cubic">如果mleft隐藏，此区域保持width:100%</div>

        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $('.mmiddle').click(function () {
        var toHide = $(this).data('toHide');
        $(this).data('toHide', !toHide);
        $('.mleft').css('width', toHide ? 0 : 180)
        $('.mmiddle').css('left', toHide ? 0 : 180)
        $('.mright').css('margin-left', toHide ? 0 : 20)
    }).data('toHide',true);
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • css3的问题，谢谢解答。 css3 html5 动画
    2018-01-14 03:09
    回答 1 已采纳 ``` TODO supply a title
  • 关于css3权重问题 css3
    2023-04-19 23:02
    回答 3 已采纳 先模糊的定义一个概念,权重 id选择器 100 类选择 10 标签选择 1 这只是一个大概的权重比例. 然后根据我们的选择器 做加法得出权重看问题1aa 在div的子标签p下从上到下看css第一
  • Css3文字渐变样式问题 css css3 前端
    2022-12-13 00:08
    回答 1 已采纳 自2017年以来，WebKit Bugzilla上有一个尚未解决的公开问题：background-clip:text不适用于display:flex。苹果已经忽视这个错误4年了，它可能永远不会被解决。
  • OpenGL-三维迷宫游戏的设计与实现
    2019-06-23 12:22
    lady_killer9的博客 游戏安装使用演示视频 部分游戏截图 数据库恢复（mysql 5.7.20） 代码使用 Qt部分（Qt5.9.1） VS部分（VS2015） 代码调试 全部资源 这是现代OpenGL入门教程的最后一篇文章，学习OpenG至今，最终以一个游戏...
  • 关于CSS选择器问题，求解答 css css3 html
    2022-03-03 16:39
    回答 2 已采纳 这种写法是为了区分多个span的时候，加个.leftbtn优先级会更高一点
  • 关于Css3 3d翻转的问题 css3 html5
    2019-06-03 10:59
    回答 1 已采纳 我特意去写了个demo，你看下， 重点属性 有注释。 ``` 3D盒子旋转Demo
  • CSS3背景颜色渐变遇到的问题 css3
    2021-09-13 08:44
    回答 2 已采纳 background-size的设置参考上面的的图。 background-position的设置参考这个出现边线是因为高度为auto，并且background-repeat为默认值repeat，因
  • QQ浏览器X5内核问题汇总
    2016-10-18 10:26
    SongChunMin_的博客 重要更新，X5内核即将更新为Blink内核，到时候下面的这些问题将全部被修复。 X5内核开发团队也给开发者们提供了不少指引，推荐关注： http://x5.tencent.com/guide?id=2001
  • css3 写不出3d效果怎么办 css3 html5
    2022-01-18 21:55
    回答 3 已采纳 鼠标经过3d翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
  • css3定位问题根目录百分百宽度 css css3 前端
    2022-09-29 00:09
    回答 4 已采纳 position：absolute设置的元素，其绝对位置相对的元素是它最近的一个父级元素，偏移值由此元素的top、buttom、left、right确定，所以只需要在样式b中添加left:0;即可。望
  • css3 3d样式调节 3d css3 前端
    2022-02-28 14:02
    回答 2 已采纳 transform: rotate这个是旋转，有三个轴（x,y,z），你研究一下看能否实现你的要的效果吧。如果还是不行，可以试试这个（perspective）https://www.w3school.
  • css - 收藏集 - 掘金
    2017-06-01 00:27
    weixin_33814685的博客 当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)<!DOCTYPE html> &l... CSS 自定义属性 — 使用...
  • css3中动画方面报错 css3 前端
    2023-04-12 21:37
    回答 1 已采纳 animation上一行结尾的 分号不对 应该是应为格式 你那个好像是中文格式的 符合一个别的分号
  • Thinkpad常见问题大全（转载联想工程师博客）
    2018-07-18 18:07
    xfxf996的博客 A：如果你做好了3张DVD版的原厂恢复光盘，就可以放心安装任意系统，反正有问题了可以用那3张DVD恢复。使用很简单，按顺序放入光盘，然后参照屏幕提示即可。 Q：T60，同时外接移动硬盘（硬盘盒供电那种）与USB鼠标，...
  • 从零开始使用华为DevEco Studio编写2048小游戏
    2020-11-19 08:15
    Brian_Leeee的博客 从零开始使用华为DevEco Studio编写2048小游戏写在前面概述准备工作开发工具编写位置文件用途具体流程源代码（详解）写在后面 写在前面 概述 准备工作 开发工具 华为HarmonyOS的应用开发工具DevEco Studio下载地址 ...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘