From e002d09d2b6b2317fec6caa8836b20e6709c5da3 Mon Sep 17 00:00:00 2001 From: Jinwei Zhao Date: Mon, 4 Apr 2016 14:00:39 +0800 Subject: jinwei.me --- deprecated/Blocks/css/main.css | 176 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 deprecated/Blocks/css/main.css (limited to 'deprecated/Blocks/css/main.css') diff --git a/deprecated/Blocks/css/main.css b/deprecated/Blocks/css/main.css new file mode 100644 index 0000000..4733137 --- /dev/null +++ b/deprecated/Blocks/css/main.css @@ -0,0 +1,176 @@ +@-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; +} + +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; + 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; +} -- cgit v1.2.3