html - 带动画的中央分割布局(仅 CSS)

Question

重要提示:仅 CSS/HTML，但不是 javascript(客户端不允许)

最近开始做我网站的主页，想做一个居中划分的布局。想把 logo 放在中间，上面放一张图片带按钮跳转到页面，下面放一张同样的功能。

动画应该是悬停在按钮(或它周围定义的区域)上，就像我在这里做的一样: GIF ANIMATION OF WHAT IS INTENDED

类似于预期的内容:https://jsfiddle.net/vja85zgL/

* {
  margin: 0px;
  padding: 0px;
}
#wrapper {
  width: 80%;
  height: 200px;
  margin: auto;
}

#wrapper:hover #left:not(:hover) {
  width: 25%;
  transition: width 1s linear;
}

#wrapper:hover #right:not(:hover) {
  width: 25%;
  transition: width 1s linear;
}

#left {
  width: 50%;
  height: 100%;
  background-color: lightblue;
  display: inline-block;
  position: relative;
  transition: width 1s linear;
}

#innerleft {
  position: absolute;
  top: 100px;
  width: calc(100% - 4px);
  text-align: center;
  border: 2px solid black;
}

#right {
  width: 50%;
  height: 100%;
  background-color: lightgrey;
  display: inline-block;
  position: relative;
  transition: width 1s linear;
}

#innerright {
  position: absolute;
  top: 100px;
  width: calc(100% - 4px);
  text-align: center;
  border: 2px solid black;
}

#right:hover {
  width: 75%;
  transition: width 1s linear;
}

#left:hover {
  width: 75%;
  transition: width 1s linear;
}

<div id="wrapper">
    <div id="left">
        <div id="innerleft">
            TITLE 1
        </div>
    </div><div id="right">
        <div id="innerright">
            TITLE 2
        </div>
    </div>
</div>

如上所示，如果将鼠标悬停在按钮上，按钮后面的背景图像会“完全”显示(没有重新缩放)， Logo (显示为 B)向下移动到 25%，并且未悬停的按钮会缩小尺寸和字体大小和它后面的图像在用户无法正确看到的地方滑动到它下面(用户无法通过向下滚动看到它)。

如果悬停在另一个按钮上，动画将转到另一个按钮和图像背景。

在布局回到起始位置之前应该有 2 秒的延迟

详情:

• NO JAVASCRIPT ALLOWED，客户端不允许使用
• 应该是响应式的，所以不要在触摸设备上悬停
• 图片不得调整大小或松散比例
• 全屏布局
• 鼠标模拟用户。
• 如果鼠标没有悬停，动画应该在 3 秒后返回到初始位置
• 初始位置为 50%-50%(几乎，由于 Logo 为 150x150px)
• 结束位置应为 75%-25%。

过去 2 天我一直在思考如何去做，因为我是 CSS 的初学者，但还没有找到方法。

如有任何帮助，我们将不胜感激!

已对设计完成的可用代码(一团糟...):

#business-top {
  	height:50%
    width:100%
}
#business-button {
  height:3em;
  width:12em;
  background-color:#2B2A2A;
  border: .2em solid #ff7600;
  border-radius:1.8em;
  margin:auto;
  margin-top:3em;
}
#logo-separator {
 text-align:center;
}

.separator {
   display: block;
   position: relative;
   padding: 0;
   height: 0;
   width: 100%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 1px solid #ff7600;
   border-bottom: 1px solid #ff7600;
}

#logo {
  margin:auto;
  max-width:150px;
  display:inline-block;
  overflow:hidden
  margin-top:-75px
  
}
#photography-bottom {
  	height:50%
    width:100%
}

#photography-button {
  height:3em;
  width:12em;
  background-color:#2B2A2A;
  border: .2em solid #ff7600;
  border-radius:1.8em;
  margin:auto;
  margin-top:3em;
}
h1 {
  color:#ff7600;
  text-align:center;
  font-size:1.4em;
  vertical-align:middle;
  line-height:2.2em
 }

<div id="business-top"
	<a href="www.lluisballbe.smugmug.com">
		<div id="business-button">
			<h1>BUSINESS</h1>
		</div>
	</a>
</div>

<div id="logo-separator">
<div class="separator"></div>
  <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"</div>
  </div>

<div id="photography-bottom"
	<a href="www.lluisballbe.smugmug.com">
		<div id="photography-button">
			<h1>PHOTOGRAPHY</h1>
		</div>
	</a>
</div>

Answer 1

如果你在悬停后增加按钮的面积，那么你可能只在 CSS 中得到一些结果:

trick comes from pointer-events and pseudo to increase hoverable area

/* tricky part */

div {
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  transition: 1.5s;
}

div:hover {/* will be catch by child with pointer-events auto */
  flex: 3;
}

div:first-child {
  background: turquoise;
}

div a {
  pointer-events: auto;/*  if a is hovered, so is its parent */
  position: relative;/* this could be for the div parent if you want to cover its area */
  padding: 5px;
  border-radius: 0.25em;
  border: 3px solid;
  box-shadow: 2px 2px 5px;
  color: #222;
  background: #aaa;
}

div a:hover:before {/* increase size of button only once hovered */
  content: '';
  position: absolute;
  top: -200px;/* coordonates used to increase pseudo size from its relative position parent. tune to your needs */
  bottom: -200px;
  width: 100%;
}

/* layout */
body,
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div {
  flex: 1;
}

hr {
  width: 100%;
  height: 5px;
  background: red;
  text-align: center;
}

hr:before {
  content: url(http://dummyimage.com/50x50);
  display: inline-block;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: -25px;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

<div>
  <a href="#"> button style</a>
</div>
<hr/>
<div>
  <a href="#"> button style</a>
</div>

来自您的更新片段:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

h1 {
  margin: 0;
}

a {
  display: inline-block;
}

#business-top {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#business-button {
  height: 3em;
  width: 12em;
  background-color: #2B2A2A;
  border: .2em solid #ff7600;
  border-radius: 1.8em;
  margin: auto;
}

#logo-separator {
  text-align: center;
}

.separator {
  display: block;
  position: relative;
  padding: 0;
  height: 0;
  width: 100%;
  max-height: 0;
  font-size: 1px;
  line-height: 0;
  flex: 0;
  border-top: 1px solid #ff7600;
  border-bottom: 1px solid #ff7600;
}

#logo {
  margin: auto;
  max-width: 150px;
  display: inline-block;
  overflow: hidden;
  margin: -75px;
  position: absolute;
}

#photography-bottom {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#photography-button {
  height: 3em;
  width: 12em;
  background-color: #2B2A2A;
  border: .2em solid #ff7600;
  border-radius: 1.8em;
  margin: auto;
}

h1 {
  color: #ff7600;
  text-align: center;
  font-size: 1.4em;
  vertical-align: middle;
  line-height: 2.2em
}

#business-top,
#photography-bottom {
  pointer-events: none;
  position: relative;
  z-index: 1;
  transition: 1s;
  /* min-height: 200px; you ma want this to avoid logo and button to overlap */
}

#business-top a,
#photography-bottom a {
  pointer-events: auto;
}

#business-top:hover,
#photography-bottom:hover {
  flex: 3;
}

#business-top a:hover:before,
#photography-bottom a:hover:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div id="business-top">
  <a href="www.lluisballbe.smugmug.com">
    <div id="business-button">
      <h1>BUSINESS</h1>
    </div>
  </a>
</div>

<div id="logo-separator">
  <div class="separator"></div>
  <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>

<div id="photography-bottom">
  <a href="www.lluisballbe.smugmug.com">
    <div id="photography-button">
      <h1>PHOTOGRAPHY</h1>
    </div>
  </a>
</div>

http://codepen.io/anon/pen/qbvgga