Tag Archives: HTML/CSS

CSS to achieve dynamic display of picture text by mouse touch

CSS to achieve dynamic display of picture text by mouse touch

These days, I want to prepare a small gift for my girlfriend, so I want to develop a website to express my love to her. Let’s have a try!

In fact, this is to add another page to your original page. As long as you define the scrolling speed with transition, let’s take a look.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			* {
			  box-sizing: border-box;
			}
			
			body{
				margin: 0;
				font-family: Arial;
				padding: 10px;
				background: #f1f1f1;
			}
			
			.clearfix {
			  overflow: auto;
			}
			.shadow_box{
				box-shadow: 0px 3px 10px 1px #888888;
			}
			.up-leader {
			  background-color: #333; 
			  list-style-type: none;
			  text-align: center;
			  position:sticky;
			  margin: 0;
			  padding: 0;
			  border-radius: 10px;
			  z-index: 10;
			}
			
			.up-leader li:not(.dropdown) {
			  display: inline-block;
			  font-size: 20px;
			  padding: 20px;
			  z-index: 10;
			}
			.up-leader li a, .dropbtn{
				display: inline-block;
				  color: white;
				  text-align: center;
				  padding: 14px 16px;
				  text-decoration: none;
			}
			.up-leader li.dropdown{
				display: inline-block;
				font-size: 20px;
			    padding: 20px;
			}
			
			.dropdown-content {
			  display: none;
			  position: absolute;
			  background-color: #f9f9f9;
			  min-width: 160px;
			  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			  z-index: 1;
			}
			
			div.dropdown-content a {
			  color:#000000;
			  padding: 12px 16px;
			  text-decoration: none;
			  display: block;
			  text-align: left;
			}
			.dropdown-content a:hover {background-color: #f1f1f1;}
			.dropdown:hover .dropdown-content {
			  display:block;
			}
			div.sticky{
				
				position: sticky;
				top: 0;
				
				background:azure;
				text-align: center;
				
				
			}
			.img1{
				float:left;
				clear:both;
				position:static;
				
				display: flex;
				justify-content: center;
				opacity: 0.8;
				overflow: auto;
				
			}
			
			.side-leader ul{
				
				list-style-type: 0;
				margin-top: 10px;
				padding: 0;
				width: 7%;
				height: 170%;
				background-color:#333 ;
				box-shadow: 0px 0px 1px 0px #888888;
				position:absolute;
				overflow: auto;
				border-radius: 25px;
				float: left;
				z-index: 4;
				
				
				
			}
			
			.side-leader ul li a{
				display: block;
				color:white;
				padding: 8px 16px;
				text-decoration: none;
				font-family:"黑体";
				
			}
			li:hover{
				background-color: #555;
				color: white;
				
			}
			
			.leftcolumn{
				
			    float: left;
			    width: 8%;
				
			}
			.midcolumn {   
			  float: left;
			  width: 50%;
			}
			
			/* 右列 */
			.rightcolumn {
			  float: left;
			  width: 42%;
			  background-color: #f1f1f1;
			  padding-left: 20px;
			}
			.avercolumn{
			  float: left;
			  width: 50%;
			  background-color: #f1f1f1;
			  
			  
				
			}
			.aver_column{
			  float: left;
			  width: 49%;
			  background-color: #f1f1f1;
			  margin-left: 1%;
			  
				
			}
			.aver2column{
			  float: left;
			  width: 68%;
			  background-color: #f1f1f1;
			  
				
			}
			.aver3column{
			  margin-left: 2%;
			  width: 27%;
			  
			  background-color: #f1f1f1;
			  padding-left: 20px;
			  box-shadow:2px 2px 10px 0px #888888 ;
			  
			  
			  display: inline-block;
			}
			
			/* 伪图像 */
			.fakeimg1 {
			  /*background-color: #aaa;*/
			  width: 852px;
			  background: url(img/6.jpg);
			  box-shadow:1px 3px 15px 1px #888888 ;
			  
			
			  padding: 20px;
			}
			.fakeimg2{
				background: url(img/5.jpg);
				box-shadow:1px 3px 15px 1px #888888 ;
				
			}
			.imgall{
				box-shadow:1px 3px 15px 1px #888888;
			}
			/* 为文章添加卡片效果 */
			.card {
			  background-color: white;
			  padding: 20px;
			  margin-top: 20px;
			  /*box-shadow: 0px 0px 1px 0px #888888;*/
			}
			/* 清除列之后的浮动 */
			.row:after {
			  content: "";
			  display: table;
			  clear: both;
			}
			
			/* 页脚 */
			.footer {
				margin: 20%;
			  
			  text-align: center;
			  background: white;
			  
			}
			#myImg {
			  border-radius: 5px;
			  cursor: pointer;
			  transition: 0.3s;
			}
			
			#myImg:hover {opacity: 0.7;}
			
			/* The Modal (background) */
			.modal {
			  display: none; /* Hidden by default */
			  position: fixed; /* Stay in place */
			  z-index: 1; /* Sit on top */
			  padding-top: 100px; /* Location of the box */
			  left: 0;
			  top: 0;
			  width: 100%; /* Full width */
			  height: 100%; /* Full height */
			  overflow: auto; /* Enable scroll if needed */
			  background-color: rgb(0,0,0); /* Fallback color */
			  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
			}
			
			/* Modal Content (image) */
			.modal-content {
			  margin: auto;
			  display: block;
			  width: 80%;
			  max-width: 1500px;
			}
			
			/* Caption of Modal Image */
			#caption {
			  margin: auto;
			  display: block;
			  width: 80%;
			  max-width: 700px;
			  text-align: center;
			  color: #ccc;
			  padding: 10px 0;
			  height: 150px;
			}
			
			/* Add Animation */
			.modal-content, #caption {  
			  animation-name: zoom;
			  animation-duration: 0.6s;
			}
			
			@keyframes zoom {
			  from {transform: scale(0.1)} 
			  to {transform: scale(1)}
			}
			
			/* The Close Button */
			.close {
			  position: absolute;
			  top: 15px;
			  right: 35px;
			  color: #f1f1f1;
			  font-size: 40px;
			  font-weight: bold;
			  transition: 0.3s;
			}
			
			.close:hover,
			.close:focus {
			  color: #bbb;
			  text-decoration: none;
			  cursor: pointer;
			}
			
			/* 100% Image Width on Smaller Screens */
			@media only screen and (max-width: 700px){
			  .modal-content {
			    width: 100%;
			  }
			}
			
			.container {
			  position: relative;
			  left: 60px;
			  float: inherit;
			  text-align: center;
			  width:71%;
			  z-index:0;
			}
			
			.image {
			  display: block;
			  
			  
			  height: auto;
			}
			
			.overlay {
			  text-align: center;
			  position: absolute;
			  bottom: 0;
			  left: 0;
			  right: 0;
			  background-color:#888888;
			  opacity: 0.7;
			  overflow: hidden;
			  width: 0;
			  height: 100%;
			  transition: 0.5s ease;
			}
			
			.container:hover .overlay {
				
			  width: 100%;
			}
			
			.text{
				text-align: center;
				top: 50%;
				font-family: "微软雅黑";
			}
		</style>
		<title>XR官网</title>
	</head>
	
	
	<body>
		
		<div class=" clearfix shadow_box">
			<a  href="#1">
			<img class="img1"  src="img/下载.jpg"   width=1920px height=900px>
			
			</a>
		</div>
		<div class="sticky" style="z-index: 10;">
			<a name="1" >
			<ul class="up-leader"  >
			  <li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343" >Home</a></li>
			  <li><a href="#news">News</a></li>
			  <li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Contact</a></li>
			  <li class="dropdown">
			  	<a class="dropbtn" href="index.html">Our World</a>
			  	 <div class="dropdown-content">
			        <a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Link 1</a>
			      	<a href="#">Link 2</a>
			      	<a href="#">Link 3</a>
			    </div>
			  </li>
			</ul>
			</a>
			</div>
			<div class=" side-leader ">
			<ul >
				<li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">核心科技</a></li>
				<li><a href="index.html">党政板块</a></li>
				<li><a href="index.html">经营情况</a></li>
				<li><a href="index.html">未来发展</a></li>
				<li><a href="index.html">联系我们</a></li>
			</ul>
			
		  </div>
		<div style="">
			<div class="leftcolumn">
				<p></p>
			</div>
			<div class="midcolumn">
				<div class="card">
					<h2>title1</h2>
					<h5>hello world1</h5>
					<div class="fakeimg1" style="height:300px;"></div>
				</div>
				<div class="avercolumn card">
					<h2>title2</h2>
					<h5>hello world2</h5>
					<div class="fakeimg2" style="height:300px;"></div>
				</div>
				<div class="aver_column card">
					<h2>title3</h2>
					<h5>hello world3</h5>
					<div class="container" style="height:300px;text-align: center;">
						<img  class="imgall image" src="img/u=140318467,4274089430&fm=26&gp=0%20(1).jpg" style="height: 300px;text-align: center;"/>
						<div class="overlay">
						    <div class="" style="">
						    <h3 style="padding-top: 50%;font-family: '微软雅黑';">就不给你吃,休想哈哈哈,呐~不哭哭哦~我们一起恰恰哈~</h3>
						    </div>
						  </div>
					</div>
				</div>
				<div class="card" style="float: left;width: 100%; margin-top: 1%;height: 100%;margin-right: 1%;">
					<video width=100% height=100% controls="controls" <!--autoplay="autoplay"-->>
					  <source src="/i/movie.ogg" type="video/ogg" />
					  <source src="img/Europa%20Universalis%20IV%202021-03-02%2010-03-59_Trim.mp4" type="video/mp4" />
					  <source src="/i/movie.webm" type="video/webm" />
					  <object data="/i/movie.mp4" width="320" height="240">
					    <embed width=100% height=100% src="img/Europa%20Universalis%20IV%202021-03-02%2010-03-59_Trim.mp4" />
					  </object>
					</video>
				</div>
				
					
				</div>
				
				
			</div>
			<div class="rightcolumn">
				<div class="card">
					<h2>title1</h2>
					<h5>hello world1</h5>
					<div class="fakeimg2" style="height:300px;"></div>
				</div>
				<div class="aver2column card">
					<h2>title2</h2>
					<h5>hello world2</h5>
					<div class="fakeimg2" style="height:300px;"></div>
				</div>
				<div class="aver2column card" style="">
					<img src="img/u=1814211770,2732480941&fm=26&gp=0.jpg%20" id="myImg" style="height:100%;widows: 100%;"/>
				</div>
				<div id="myModal" class="modal">
				  <span class="close">×</span>
				  <img class="modal-content" id="img01">
				  <div id="caption"></div>
				</div>
				
				<script>
				// Get the modal
				var modal = document.getElementById('myModal');
				
				// Get the image and insert it inside the modal - use its "alt" text as a caption
				var img = document.getElementById('myImg');
				var modalImg = document.getElementById("img01");
				var captionText = document.getElementById("caption");
				img.onclick = function(){
				  modal.style.display = "block";
				  modalImg.src = this.src;
				  captionText.innerHTML = this.alt;
				}
				
				// Get the <span> element that closes the modal
				var span = document.getElementsByClassName("close")[0];
				
				// When the user clicks on <span> (x), close the modal
				span.onclick = function() { 
				  modal.style.display = "none";
				}
				</script>
				
				
				<div class="aver3column card" style="height: 1000px; ">
					<h2>title</h2>
					<h5>hello world11</h5>
					<div class="fakeimg2" style="height:300px; src: ;"></div>
				</div>
				
				
			</div>
			</div>
			<div style="padding-bottom: 1000px;">
				<p>
					
				</p>
			</div>
			
			
			
			
		</div>
		
		

		
	</body>
</html>

Compatibility of mobile display frame

Border1 pixel problem
For example:
HTML:

<div class="content  border-1px"></div>

css:

.border-1px{
  position: relative;
}
.border-1px:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-1px:before {
    right: -100%;
    bottom: -100%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .border-1px:before {
    right: -200%;
    bottom: -200%;
    -webkit-transform: scale(0.333333);
    transform: scale(0.333333);
  }
}
.content:before{
  border: 1px solid red;
}

Effect: