带动画的中央分割布局（仅限CSS）

时间：2016-02-16 01:12:02

标签： html css animation css-animations

重要说明：只有CSS / HTML，但不是javascript（客户端不允许）

最近开始了我网站的主页，并希望制作一个集中划分的布局。想要将徽标放在中间，将一张图片放在顶部，使用一个按钮指向页面，另一个放在页面下面，具有相同的功能。

动画应悬停在按钮（或其周围的定义区域）上，如我在此处所做的那样： 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>

如图所示，如果将鼠标悬停在按钮上，则按钮后面的背景图像会显示“完全”（没有重新缩放），徽标（显示为B）向下移动到25％，而没有悬停的按钮会缩小尺寸，字体大小及其背后的图像在其下方滑动，用户无法正常看到它（用户无法通过向下滚动看到它）。

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

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

详情：

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

过去两天一直在想我是怎么做的，因为我是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>

1 个答案:

答案 0 :(得分：1)

如果您在悬停时增加按钮区域，那么您可能只在CSS中获得一些结果：

  

技巧来自指针事件，伪来增加可扩展区域 

/* 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

相关问题
最新问题