CSS
语言：
CSSSCSS
确定
@import url("https://fonts.googleapis.com/css?family=Raleway:500,600");
* {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
body {
background: url("/uploads/160101/stars-bg.jpg") no-repeat center;
}
.rela-block {
display: block;
position: relative;
}
.content-container {
position: relative;
min-height: 950px;
width: 85%;
max-width: 1800px;
padding-top: 50px;
margin: 80px auto;
background-color: #0e1e2c;
box-shadow: 20px 20px 40px 8px rgba(0, 0, 0, 0.5);
font-family: "Raleway";
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 3px;
color: #424852;
overflow-x: hidden;
}
.diamond-container {
margin: auto;
height: 750px;
width: 1050px;
overflow: hidden;
}
.top-bar {
position: absolute;
height: 30px;
width: 95%;
top: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: rgba(155, 155, 155, 0.35);
box-shadow: 0 0 15px 3px rgba(155, 155, 155, 0.5);
overflow: hidden;
}
.diamond-outer {
position: absolute;
background-color: rgba(0, 0, 0, 0.78);
-webkit-transform: translate(21%, 21%) rotate(45deg);
transform: translate(21%, 21%) rotate(45deg);
box-shadow: inset 0px 0px 6px 1px #aaa;
border: 1px solid #999;
overflow: hidden;
box-sizing: border-box;
z-index: 5;
}
.diamond-outer.large {
height: 400px;
width: 400px;
}
.diamond-outer.middy {
height: 250px;
width: 250px;
}
.diamond-outer.medium {
height: 200px;
width: 200px;
}
.diamond-outer.special {
height: 150px;
width: 150px;
}
.diamond-outer.small {
height: 100px;
width: 100px;
}
.diamond-outer:hover {
box-shadow: inset 0px 0px 14px 1px #adf;
}
.diamond-outer:nth-child(1) {
top: 30px;
left: 20px;
}
.diamond-outer:nth-child(2) {
top: 25px;
left: 450px;
}
.diamond-outer:nth-child(3) {
top: 460px;
left: 310px;
}
.diamond-outer:nth-child(4) {
top: 170px;
left: 456px;
}
.diamond-outer:nth-child(5) {
top: 25px;
left: 745px;
}
.diamond-outer:nth-child(6) {
top: 531px;
left: 157px;
}
.diamond-outer:nth-child(7) {
top: 455px;
left: 81px;
}
.diamond-outer:nth-child(8) {
top: 530px;
left: 6px;
}
.diamond-outer:nth-child(9) {
top: 606px;
left: 81px;
}
.diamond-outer:nth-child(10) {
top: 25px;
left: 745px;
}
.diamond-outer:nth-child(11) {
top: 455px;
left: 455px;
}
.diamond-outer:nth-child(12) {
top: 241px;
left: 126px;
background-color: rgba(0, 0, 0, 0.65);
}
.diamond-outer:nth-child(13) {
top: 50px;
left: 40px;
}
.diamond-background {
position: absolute;
top: -22.5%;
left: -22.5%;
height: 145%;
width: 145%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.stars {
background: transparent;
box-shadow: none;
}
.power-diamond {
background: transparent;
box-shadow: none;
}
.power-diamond .diamond-background {
background: url("http://3.bp.blogspot.com/-9W5Ac1ucaGw/T4vdZjQvO8I/AAAAAAAABV0/pJ-vAacyShc/s1600/Minimal_Power_Off_Logo_Simple_HD_Wallpaper-Vvallpaper.Net.png") no-repeat center;
background-size: 220%;
}
.spotify {
background: transparent;
box-shadow: none;
}
.spotify .diamond-background {
background: url("https://upload.wikimedia.org/wikipedia/en/0/05/EndlessFantasy.jpg") no-repeat center;
background-size: 100%;
}
.spotify .diamond-inner p {
color: #fff;
}
.spotify::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0);
box-shadow: inset 0px 0px 6px 1px #aaa;
z-index: 10;
right: 0;
bottom: 0;
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.spotify:hover .diamond-background {
background-size: 125%;
}
.spotify:hover::before {
box-shadow: inset 0px 0px 14px 1px #adf;
background-color: rgba(0, 0, 0, 0.3);
}
.has-before::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 6px 1px #aaa;
z-index: 10;
right: 0;
bottom: 0;
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.has-before:hover::before {
box-shadow: inset 0px 0px 14px 1px #adf;
background-color: rgba(0, 0, 0, 0);
}
.diamond-inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
overflow: hidden;
box-sizing: border-box;
text-align: center;
padding: 2%;
}
.diamond-inner.wide {
height: 58%;
width: 88%;
}
.diamond-inner.square {
height: 68%;
width: 68%;
}
.fb-social-link .diamond-inner {
background: url("https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_284-256.png") no-repeat center;
}
.twitter-social-link .diamond-inner {
background: url("https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_266-256.png") no-repeat center;
}
.pin-social-link .diamond-inner {
background: url("https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_296-256.png") no-repeat center;
}
.linked-social-link .diamond-inner {
background: url("https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_277-256.png") no-repeat center;
}
.social {
height: 100px;
width: 100px;
cursor: pointer;
}
.social .diamond-inner {
height: 64%;
width: 64%;
background-size: 68%;
border: 3px solid #424852;
border-radius: 100%;
}
.social:hover .diamond-inner {
border: 3px solid #727882;
}
.time-output {
font-size: 22px;
line-height: 38px;
color: #ccc;
}
.next-section {
min-height: 640px;
}
.next-section .diamond-outer {
top: 110px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.next-section .div-half {
position: absolute;
width: 50%;
top: 0;
bottom: 0;
}
.next-section .div-half.left-side {
left: 0;
}
.next-section .div-half.left-side .next-box {
left: 35px;
right: 110px;
}
.next-section .div-half.right-side {
right: 0;
}
.next-section .div-half.right-side .next-box {
left: 110px;
right: 35px;
}
.next-box {
position: absolute;
background-color: rgba(155, 155, 155, 0.15);
box-shadow: 0 0 15px 3px rgba(155, 155, 155, 0.2);
overflow: hidden;
}
.next-box.top-box {
top: 20px;
height: 120px;
}
.next-box.bottom-box {
bottom: 50px;
height: 260px;
}
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
