css HTML和CSS相关

Posted 2021-05-13

<div class="lightbox-target" id="popup">
	<div class="popup-container">
   $PopupImage
   <a class="lightbox-close" href="#"></a>
	</div>
</div>

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
	position: fixed;
	top: -100%;
	width: 100%;
	background: rgba(0,0,0,.7);
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
	overflow: hidden;
	z-index: 999;

	.popup-container {
		position: relative;
		text-align: center;
		margin-top: 10em;
		
	}

	/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
	img {
		max-height: 0%;
		max-width: 0%;
		box-shadow: 0px 0px 8px rgba(0,0,0,.3);
		box-sizing: border-box;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
	}

	/* Styles the close link, adds the slide down transition */
	.lightbox-close {
		display: inline-block;
		background: url('/site/images/fancybox_sprite.png') no-repeat;
		width:36px;
		height:36px;
		box-sizing: border-box;
		margin-left: -1.4em;
		margin-top: -1em;
		vertical-align: top;		
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
	}

	/* Provides part of the "X" to eliminate an image from the close link */
	&:before {
		content: "";
		display: block;
		height: 30px;
		width: 1px;
		background: black;
		position: absolute;
		left: 26px;
		top:10px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg);
	}

	/* Provides part of the "X" to eliminate an image from the close link */
	&:after {
		content: "";
		display: block;
		height: 30px;
		width: 1px;
		background: black;
		position: absolute;
		left: 26px;
		top:10px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}

	/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

	&:target {
		opacity: 1;
		top: 0;
		bottom: 0;
	}

	&:target {
		img {
			max-height: 100%;
			max-width: 100%;
		}
	} 

	&:target {
		.lightbox-close {
			top: 0px;
		}
	} 
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

/**
* This will center a bullet list in IE8+
*/
.container ul {
    display: table;
    margin-right: auto;
    margin-left: auto;
}

/**
* This will center a bullet list in new generation browsers IE11+
*/
.container {
    display: flex;
    justify-content: center;
}

/** 
* set a footer tag to bottom of page 
* if you have a container above the footer, you may need some padding-bottom applied
*
**/

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;
}

footer
{
  position: absolute;
  bottom: 0
}

/** 
* css image orientation styles 
* support in firefox only
*
**/
.style
{
  image-orientation: 0deg;
  image-orientation: 6.4deg;     /* Rounded to 0deg */
  image-orientation: -90deg;     /* Equivalent to 270deg, its normalizedcomputed value */
  image-orientation: from-image; /* Use EXIF data from the image */
  image-orientation: 90deg flip; /* Rotate 90deg, and flip it horizontally */
  image-orientation: flip;       /* No rotation, only applies a horizontal flip */
  
  /* Global values */
  image-orientation: inherit;
  image-orientation: initial;
  image-orientation: unset;
}

/** clickable area not clicking in IE9 hack*/
.style
{
  background-image:url(#);
}