需要在另一个DIV上滑动一个DIV。仅使用CSS

时间：2017-12-29 20:15:50

标签： html css

应该有一个简单的解决方案，但我无法解决问题。我需要使用 geltona 类的div来滑动到具有 zydra 类的div。我必须只使用CSS，但我不能。这可能是显而易见的，但我无法找到解决方案，因为我只使用浮点数和％的宽度和高度，因此我无法通过关键帧设置应该移动的位置。

＆＃13;
＆＃13; 
html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

p {
	margin: 10px;
}

.header {
	height: 5%;
	width: 100%;
}


.geltona {
	height: 15%;
	width: 50%;
	background-color: yellow;
	float: left;
}

.zydra {
	height: 15%;
	width: 50%;
	background-color: lightblue;
	float: right;
}

.balta {
	height: 30%;
	width: 70%;
	background-color: white;
	float: left;
}

.juoda {
	height: 75%;
	width: 30%;
	background-color: black;
	float: right;
}

.oranzine {
	height: 20%;
	width: 35%;
	background-color: orange;
	display: inline;
	float: left;
}

.melyna {
	position: relative;
	height: 45%;
	width: 35%;
	background-color: blue;
	float: right;
}

.zalia {
	height: 25%;
	width: 35%;
	background-color: green;
	float: left;
}

.ruda {
	height: 5%;
	width: 100%;
	background-color: brown;
	float: left;
}




/*  ANIMACIJOS  */
/* 3. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta */



/* 20. Pasisuka nuo 45 laipsnių iki 0 laipsnių ir padidėja 30%; */

.zalia:hover {
	animation: sukasi 3s;
}

@keyframes sukasi {
	0%{transform: rotate(45deg)}
	100%{transform: rotate(0deg) scale(1.3)};
}



/* 21. Nuotrauka atslenka iš viršaus ir mažėja (trukmė 5 sec); */

.header img {
	position: absolute;
    top: -145px;
    max-width: 145px;
    max-height: 145px;
    background: transparent;
    transition: 5s;
}

.header:hover img {
    transition: 5s;
    top: 0;
    max-width: 45px;
    max-height: 45px;
}





/*  MEDIA QUERIES  */

@media only screen and (max-width: 768px) and (max-height: 1024px){

	.geltona {
		height: 25%;
		width: 100%;
	}

	.zydra {
		display: none;
	}

	.balta {
		height: 20%;
		width: 70%;
	}

	.juoda {
		height: 65%;
		width: 30%;
	}

	.oranzine {
		display: none;
	}

	.melyna {
		height: 45%;
		width: 40%;
	}

	.zalia {
		height: 45%;
		width: 30%;
	}

}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title>IPP Kursinis</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width" content="initial-scale=1">

	<link rel="stylesheet" type="text/css" href="src/css/main.css">
</head>
<body>

  <div class="header">
  	<img src="img/foto.jpg">
  </div>

  <div class="geltona"></div>

  <div class="zydra"
	   id="keiciamaSpalva" 
       onmouseover="changeBackground(this.id, 'red', 'yellow');" 
       onmouseout="changeBackground(this.id, 'lightblue', 'black');">
     <p>Lorem ipsum</p>
  </div>

  <div class="balta"
       id="balta" 
  	   onmouseover="showClass();"
  	   onmouseout="removeClass();">
  </div>

  <div class="juoda"></div>

  <div class="oranzine"></div>

  <div class="melyna">
  	<p id="demo"></p>
  </div>

  <div class="zalia"></div>

  <div class="ruda"></div>




  <!-- JAVASCRIPT prasideda nuo čia -->

  <script type="text/javascript">

  	/* Keičiama teksto ir fono spalva pagal nurodymus. */
    function changeBackground(id, color, textColor) {

      document.getElementById(id).style.background = color;
      document.getElementById(id).style.color = textColor;

    };




    /* Parodome bloko klasę ir ją ištriname, kad nesipildytų visas blokas*/

    function showClass() { 

      var element = document.getElementById('balta');
      element.innerHTML = element.innerHTML + "<p> Šio bloko klasė: "+element.className+"</p>";


	};

	function removeClass() {

		document.getElementById('balta').innerHTML = "";

	};




	/* Rodoma lango, ekrano ir slankiklių informacija, tik tuomet, kai keičiame ekrano dydį. */

	window.onresize = displayWindowSize;
    function displayWindowSize(){

	  document.getElementById("demo").innerHTML =
	  "Ekrano plotis: " + screen.width + "<br>" +
	  "Ekrano aukštis: " + screen.height + "<br>" +
	  "Lango plotis: " + window.innerWidth + "<br>" +
	  "Lango aukštis: " + window.innerHeight + "<br>" +
	  "Slankiklio horizontali padėtis: " + window.scrollX + "<br>" +
	  "Slankiklio vertikali padėtis: " + window.scrollY;

	};

  </script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

对于此代码的更改量最少，我想出了这个。

将您的两个相邻容器（ geltona 和 zydra ）包裹在另一个容器中（ gelzy 此处）并为其提供position:relative以及position:absolute与left:0 and right:0而不是floats的两个子容器。

利用悬停 上的转换来移动 geltona （使用更高的z-index ） 左侧的50％在蓝色容器上重叠

.gelzy{
position:relative;
height:15%;
width:100%;
}

.geltona {
  height: 100%;
  width: 50%;
  background-color: yellow;
  left:0;
  position: absolute;
  z-index:2;
  transition:left 1s ease-in-out;
}

.zydra {
  height: 100%;
  width: 50%;
  background-color: lightblue;
  right:0;
  position: absolute;
}

.geltona:hover {
  left:50%;
}


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

p {
  margin: 10px;
}

.header {
  height: 5%;
  width: 100%;
}

.gelzy{
position:relative;
height:15%;
width:100%;
}

.geltona {
  height: 100%;
  width: 50%;
  background-color: yellow;
  left:0;
  position: absolute;
  z-index:2;
  transition:left 1s ease-in-out;
}

.zydra {
  height: 100%;
  width: 50%;
  background-color: lightblue;
  right:0;
  position: absolute;
}

.geltona:hover {
  left:50%;
}

.balta {
  height: 30%;
  width: 70%;
  background-color: white;
  float: left;
}

.juoda {
  height: 75%;
  width: 30%;
  background-color: black;
  float: right;
}

.oranzine {
  height: 20%;
  width: 35%;
  background-color: orange;
  display: inline;
  float: left;
}

.melyna {
  position: relative;
  height: 45%;
  width: 35%;
  background-color: blue;
  float: right;
}

.zalia {
  height: 25%;
  width: 35%;
  background-color: green;
  float: left;
}

.ruda {
  height: 5%;
  width: 100%;
  background-color: brown;
  float: left;
}


/*  ANIMACIJOS  */


/* 3. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta */


/* 20. Pasisuka nuo 45 laipsnių iki 0 laipsnių ir padidėja 30%; */

.zalia:hover {
  animation: sukasi 3s;
}

@keyframes sukasi {
  0% {
    transform: rotate(45deg)
  }
  100% {
    transform: rotate(0deg) scale(1.3)
  }
  ;
}


/* 21. Nuotrauka atslenka iš viršaus ir mažėja (trukmė 5 sec); */

.header img {
  position: absolute;
  top: -145px;
  max-width: 145px;
  max-height: 145px;
  background: transparent;
  transition: 5s;
}

.header:hover img {
  transition: 5s;
  top: 0;
  max-width: 45px;
  max-height: 45px;
}


/*  MEDIA QUERIES  */

@media only screen and (max-width: 768px) and (max-height: 1024px) {
  .geltona {
    height: 25%;
    width: 100%;
  }
  .zydra {
    display: none;
  }
  .balta {
    height: 20%;
    width: 70%;
  }
  .juoda {
    height: 65%;
    width: 30%;
  }
  .oranzine {
    display: none;
  }
  .melyna {
    height: 45%;
    width: 40%;
  }
  .zalia {
    height: 45%;
    width: 30%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>IPP Kursinis</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" content="initial-scale=1">

  <link rel="stylesheet" type="text/css" href="src/css/main.css">
</head>

<body>

  <div class="header">
    <img src="img/foto.jpg">
  </div>
  <div class="gelzy">
  <div class="geltona"></div>

  <div class="zydra" id="keiciamaSpalva" onmouseover="changeBackground(this.id, 'red', 'yellow');" onmouseout="changeBackground(this.id, 'lightblue', 'black');">
    <p>Lorem ipsum</p>
  </div>
  </div>

  <div class="balta" id="balta" onmouseover="showClass();" onmouseout="removeClass();">
  </div>

  <div class="juoda"></div>

  <div class="oranzine"></div>

  <div class="melyna">
    <p id="demo"></p>
  </div>

  <div class="zalia"></div>

  <div class="ruda"></div>




  <!-- JAVASCRIPT prasideda nuo čia -->

  <script type="text/javascript">
    /* Keičiama teksto ir fono spalva pagal nurodymus. */
    function changeBackground(id, color, textColor) {

      document.getElementById(id).style.background = color;
      document.getElementById(id).style.color = textColor;

    };




    /* Parodome bloko klasę ir ją ištriname, kad nesipildytų visas blokas*/

    function showClass() {

      var element = document.getElementById('balta');
      element.innerHTML = element.innerHTML + "<p> Šio bloko klasė: " + element.className + "</p>";


    };

    function removeClass() {

      document.getElementById('balta').innerHTML = "";

    };




    /* Rodoma lango, ekrano ir slankiklių informacija, tik tuomet, kai keičiame ekrano dydį. */

    window.onresize = displayWindowSize;

    function displayWindowSize() {

      document.getElementById("demo").innerHTML =
        "Ekrano plotis: " + screen.width + "<br>" +
        "Ekrano aukštis: " + screen.height + "<br>" +
        "Lango plotis: " + window.innerWidth + "<br>" +
        "Lango aukštis: " + window.innerHeight + "<br>" +
        "Slankiklio horizontali padėtis: " + window.scrollX + "<br>" +
        "Slankiklio vertikali padėtis: " + window.scrollY;

    };
  </script>

</body>

</html>

相关问题
最新问题