From 80255411ee7040e0cebbf6b05d2ce323f6f2596e Mon Sep 17 00:00:00 2001 From: JinweiClarkChao Date: Fri, 22 Aug 2014 17:23:02 +0800 Subject: backup --- Back/Blocks/main.css | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 Back/Blocks/main.css (limited to 'Back/Blocks/main.css') diff --git a/Back/Blocks/main.css b/Back/Blocks/main.css new file mode 100644 index 0000000..367da59 --- /dev/null +++ b/Back/Blocks/main.css @@ -0,0 +1,163 @@ +@font-face { + font-family: Penumbra; + src: url(./PenumbraSansStd-Semibold.otf); +} +@-webkit-keyframes fade { + 0% { + opacity: 0; + margin-top: 10px; + } + 100% { + opacity: 1; + margin-top: 0px; + } +} + +* { + margin: 0px; + padding: 0px; +} + +body { + font-family: Penumbra, HiraginoSansGB-W3, sans-serif; + background: url(./bg.jpg) top center; + background-size: cover; +} +h1 { + font-size: 22px; + line-height: 40px; + + -webkit-transition: padding 100ms ease; +} +p { + font-size: 20px; + line-height: 40px; +} +img { + width: 80px; + height: 80px; + padding: 10px; + + -webkit-transition: margin 1000ms ease; +} +span#loveu { + font-size: 17px; + line-height: 40px; + font:"Microsoft Ya Hei"; +} +div#card { + position: absolute; + width: 600px; + height: 400px; + top: 50%; + left: 50%; + margin-top: -200px; + margin-left: -300px; + box-shadow: 0px 5px 20px -5px black; + background: black; + font:"Microsoft Yi Baiti", Roboto, "华文行楷"; +} + +div.block { + position: relative; + width: 200px; + height: 200px; + float: left; + background: url(./texture.png); + box-shadow: inset 0px -2px 2px rgba(0,0,0,0.2); + text-align: center; + color: white; + overflow: hidden; + + -webkit-transition: opacity 145s ease; +} + div.block:hover > .divin img { + margin-top: -20px; + } + div.block:hover > .divin h1 { + padding-top: 20px; + } + div.block:hover > .divin { + margin-top: -100px; + } + div.block:hover > .time5 { + margin-top: -110px; + } + div.block:hover > .inbox { + -webkit-animation: fade 500ms ease 200ms both; + } +div.divin { + width: 100px; + height: 140px; + padding: 30px 50px; + -webkit-transition: margin 300ms ease; +} +div.inbox { + width: 150px; + padding: 0px 25px; +} +div.time { + width: 175px; + margin: 0px auto; + padding: 0px; + height: 100px; + padding: 10px 12.5px 0px; + background: rgba(0,0,0,0.1); + box-shadow: inset 0px 0px 20px rgba(0,0,0,0.1); +} + div.time li.list { + list-style: none; + position: relative; + float: left; + width: 25px; + height: 50px; + margin: 0px 0px 10px 0px; + font-size: 12px; + -webkit-transition: 200ms ease; + } + div.time li.list:hover { + color: yellow; + -webkit-transform: scale(1.1); + } + +div#b1 { + background-color: #2CC0E2; +} +div#b2 { + background-color: #59D999; +} +div#b3 { + background-color: #7658F9; +} +div#b4 { + background-color: #E9C24E; +} +div#b5 { + background-color: #E55679; +} +div#b6 { + background-color: grey; +} +span.last { + position: absolute; + font-size: 72px; + line-height: 200px; + width: 200px; + height: 200px; + left: 0px; + top: 0px; + + -webkit-transition: opacity 200ms ease; +} +span#u { +} +span#real { + position: absolute; + opacity: 0; +} +div#b6:hover #u { + opacity: 0; +} +div#b6:hover #real { + opacity: 1; +} \ No newline at end of file -- cgit v1.2.3