div布局实现书桌闹钟书本仙人掌效果
代码语言:html
所属分类:布局界面
代码描述:div布局实现书桌闹钟书本仙人掌效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { background: #ECD590; background-size: cover; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: -webkit-box; display: flex; -webkit-box-flex: 1; flex: 1; width: 100vw; min-height: 100vh; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .shelf { position: relative; width: 520px; height: 20px; border-radius: 1px; background-color: #5a3f21; margin-top: 70px; box-shadow: 0px 0px #e5c564, -1px 1px #e5c564, -2px 2px #e5c564, -3px 3px #e5c564, -4px 4px #e5c564, -5px 5px #e5c564, -6px 6px #e5c564, -7px 7px #e5c564, -8px 8px #e5c564, -9px 9px #e5c564, -10px 10px #e5c564, -11px 11px #e5c564, -12px 12px #e5c564, -13px 13px #e5c564, -14px 14px #e5c564, -15px 15px #e5c564, -16px 16px #e5c564, -17px 17px #e5c564, -18px 18px #e5c564, -19px 19px #e5c564, -20px 20px #e5c564; } .clock { width: 110px; height: 110px; border: 10px solid #5AA668; background-color: #E9E6C9; border-radius: 50%; position: absolute; box-shadow: inset 0 0 3px #6a5757; left: 30px; top: -135px; } .clock-face { position: relative; width: 100%; height: 100%; } .knot { position: absolute; background-color: #9d374f; width: 10px; height: 10px; border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; } .hand { width: 4px; background: #47321A; position: absolute; left: 50%; top: 50%; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .hour-hand { height: 30px; } .min-hand { height: 40px; } .second-hand { height: 47px; width: 2px; } .clock-ear-right, .clock-ear-left { background-color: #5AA668; position: absolute; border-top-left-radius: 90px; border-top-right-radius: 90px; left: -38px; top: -12px; height: 30px; width: 60px; -webkit-transform: rotate(-50deg); transform: rotate(-50deg); } .clock-ear-right:after, .clock-ear-left:after { content: ''; position: absolute; background-color: #9d374f; width: 15px; height: 8px; border-top-left-radius: 90px; border-top-right-radius: 90px; top: -9px; left: 23px; } .clock-ear-right { left: auto; right: -38px; -webkit-transform: rotate(50deg); transform: rotate(50deg); } .clock-foot-right, .clock-foot-left { background-color: #47321A; position: absolute; border-radius: 50px; left: 20px; bottom: -25px; height: 50px; width: 12px; -webkit-transform: rotate(30deg); transform: rotate(30deg); z-index: -1; } .clock-foot-right { left: auto; right: 20px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .book { position: absolute; background-color: #9d374f; width: 40px; height: 170px; left: 210px; top: -170px; border-radius: 1px; } .book:before { content: ''; background-color: #E9E6C9; position: absolute; width: 100%; height: 20px; top: 20px; left: 0; } .book:after { content: ''; position: absolute; background-color: rgba(127, 44, 64, 0.3); height: 100%; width: 50%; right: 0; border-radius: 0 2px 2px 0; } .book:nth-of-type(2) { background-color: #e86830; left: 250px; height: 195px; top: -195px; } .book:nth-of-type(2):after { background-color: rgba(215, 82, 24, 0.3); } .book:nth-of-type(3) { background-color: #5AA668; left: 290px; height: 180px; top: -180px; } .book:nth-of-type(3):after { background-color: rgba(75, 140, 87, 0.3); } .cactus { left: 380px; position: absolute; width: 120px; height: 200px; top: -120px; } .pot { position: absolute; -webkit-perspective: 200px; perspective: 200px; width: 100px; height: 105px; top: 28px; z-index: 3; } .pot-bottom { -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); background-color: #ce4f17; width: 100%; height: 100%; top: 0px; } .pot-top { position: absolute; background-color: #a03d12; width: 130%; height: 30px; left: -15%; top: 0px; border-radius: 2px; } .plant-left, .plant-right { background-color: #5AA668; position: absolute; width: 50px; height: 100px; border-radius: 50px; top: -20px; left: 0; } .plant-right { right: 20px; left: auto; height: 130px; top: -40px; } .spike { position: absolute; width: 5px; height: 1px; background-color: #ECD590; } .spike:nth-of-type(1) { top: 2px; left: 25px; -webkit-transform: rotate(170deg); transform: rotate(170deg); } .spike:nth-of-type(2) { top: 48px; left: 10px; -webkit-transform: rotate(47deg); transform: rotate(47deg); } .spike:nth-of-type(3) { top: 31px; left: 10px; -webkit-transform: rotate(3deg); transform: rotate(3deg); } .spike:nth-of-type(4) { top: 50px; left: 40px; -webkit-transform: rotate(80deg); transform: rotate(80deg); } .spike:nth-of-type(5) { top: 10px; left: 36px; -webkit-transform: rotate(179deg); transform: rotate(179deg); } .spike:nth-of-type(6) { top: 30px; left: 12px; -webkit-transform: rotate(86deg); transform: rotate(86deg); } .spike:nth-of-type(7) { top: 47px; left: 15px; -webkit-transform: rotate(154deg); transform: rotate(154deg); } .spike:nth-of-type(8) { top: 44px; left: 32px; -webkit-transform: rotate(264deg); transform: rotate(264deg); } .spike:nth-of-type(9) { top: 69px; left: 37px; -webkit-transform: rotate(311deg); transform: rotate(311deg); } .spike:nth-of-type(10) { top: 72px; left: 4px; -webkit-transform: rotate(6deg); transform: rotate(6deg); } .spike:nth-of-type(11) { top: 66px; left: 30px; -webkit-transform: rotate(273deg); transform: rotate(273deg); } .spike:nth-of-type(12) { top: 57px; left: 7px; -webkit-transform: rotate(342deg); transform: rotate(342deg); } .spike:nth-of-type(13) { top: 50px; left: 43px; -webkit-transform: rotate(123deg); transform: rotate(123deg); } .spike:nth-of-type(14) { top: 14px; left: 19px; -webkit-transform: rotate(186deg); transform: rotate(186deg); } .spike:nth-of-type(15) { top: 72px; left: 14px; -webkit-transform: rotate(200deg); transform: rotate(200deg); } .spike:nth-of-type(16) { top: 40px; left: 12px; -webkit-transform: rotate(44deg); transform: rotate(44deg); } .spike:nth-of-type(17) { top: 12px; left: 37px; -webkit-transform: rotate(345deg); transform: rotate(345deg); } .spike:nth-of-type(18) { top: 33px; left: 14px; -webkit-transform: rotate(193deg); transform: rotate(193deg); } .spike:nth-of-type(19) { top: 21px; left: 14px; -webkit-transform: rotate(295deg); transform: rotate(295deg); } .spike:nth-of-type(20) { top: 5px; left: 30px; -webkit-transform: rotate(320deg); transform: rotate(320deg); } .spike:nth-of-type(21) { top: 34px; left: 23px; -webkit-transform: rotate(325deg); transform: rotate(325deg); } .spike:nth-of-type(22) { top: 32px; left: 35px; -webkit-transform: rotate(15deg); transform: rotate(15deg); } .spike:nth-of-type(23) { top: 54px; left: 6px; -webkit-transform: rotate(88deg); transform: rotate(88deg); } .spike:nth-of-type(24) { top: 22px; left: 43px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .spike:nth-of-type(25) { top: 70px; left: 10px; -webkit-transform: rotate(56deg); transform: rotate(56deg); } .spike:nth-of-type(26) { top: 14px; left: 8px; -webkit-transform: rotate(40deg); transform: rotate(40deg); } .spike:nth-of-type(27) { top: 11px; left: 33px; -webkit-transform: rotate(162deg); transform: rotate(162deg); } .spike:nth-of-type(28) { top: 72px; left: 49px; -webkit-transform: rotate(294deg); transform: rotate(294deg); } .spike:nth-of-type(29) { top: 15px; left: 44px; -webkit-transform: rotate(199deg); transform: rotate(199deg); } .spike:nth-of-type(30) { top: 79px; left: 13px; -webkit-transform: rotate(213deg); transform: rotate(213deg); } .spike:nth-of-type(31) { top: 48px; left: 26px; -webkit-transform: rotate(182deg); transform: rotate(182deg); } .spike:nth-of-type(32) { top: 69px; left: 31px; -webkit-transform: rotate(334deg); transform: rotate(334deg); } .spike:nth-of-type(33) { top: 26px; left: 15px; -webkit-transform: rotate(64deg); transform: rotate(64deg); } .spike:nth-of-type(34) { top: 54px; left: 38px; -webkit-transform: rotate(16deg); transform: rotate(16deg); } .spike:nth-of-type(35) { top: 58px; left: 7px; -webkit-transform: rotate(27deg); transform: rotate(27deg); } .spike:nth-of-type(36) { top: 14px; left: 23px; -webkit-transform: rotate(148deg); transform: rotate(148deg); } .spike:nth-of-type(37) { top: 27px; left: 35px; -webkit-transform: rotate(159deg); transform: rotate(159deg); } .spike:nth-of-type(38) { top: 47px; left: 22px; -webkit-transform: rotate(63deg); transform: rotate(63deg); } .spike:nth-of-type(39) { top: 18px; left: 44px; -webkit-transform: rotate(39deg); transform: rotate(39deg); } .spike:nth-of-type(40) { top: 41px; left: 21px; -webkit-transform: rotate(201deg); transform: rotate(201deg); } .spike:nth-of-type(41) { top: 7px; left: 3px; -webkit-transform: rotate(120deg); transform: rotate(120deg); } .spike:nth-of-type(42) { top: 16px; left: 48px; -webkit-transform: rotate(341deg); transform: rotate(341deg); } .spike:nth-of-type(43) { top: 10px; left: 21px; -webkit-transform: rotate(248deg); transform: rotate(248deg); } .spike:nth-of-type(44) { top: 32px; left: 13px; -webkit-transform: rotate(211deg); transform: rotate(211deg); } .spike:nth-of-type(45) { top: 51px; left: 42px; -webkit-transform: rotate(18deg); transform: rotate(18deg); } .spike:nth-of-type(46) { top: 17px; left: 47px; -webkit-transform: rotate(320deg); transform: rotate(320deg); } .spike:nth-of-type(47) { top: 46px; left: 30px; -webkit-transform: rotate(295deg); transform: rotate(295deg); } .spike:nth-of-type(48) { top: 40px; left: 7px; -webkit-transform: rotate(286deg); transform: rotate(286deg); } .spike:nth-of-type(49) { top: 74px; left: 33px; -webkit-transform: rotate(341deg); transform: rotate(341deg); } .spike:nth-of-type(50) { top: 80px; left: 22px; -webkit-transform: rotate(231deg); transform: rotate(231deg); } .spike:nth-of-type(51) { top: 60px; left: 9px; -webkit-transform: rotate(208deg); transform: rotate(208deg); } .spike:nth-of-type(52) { top: 15px; left: 8px; -webkit-transform: rotate(138deg); transform: rotate(138deg); } .spike:nth-of-type(53) { top: 8px; left: 19px; -webkit-transform: rotate(152deg); transform: rotate(152deg); } .spike:nth-of-type(54) { top: 20px; left: 44px; -webkit-transform: rotate(265deg); transform: rotate(265deg); } .spike:nth-of-type(55) { top: 45px; left: 47px; -webkit-transform: rotate(303deg); transform: rotate(303deg); } .spike:nth-of-type(56) { top: 58px; left: 20px; -webkit-transform: rotate(53deg); transform: rotate(53deg); } .spike:nth-of-type(57) { top: 43px; left: 26px; -webkit-transform: rotate(1deg); transform: rotate(1deg); } .spike:nth-of-type(58) { top: 73px; left: 28px; -webkit-transform: rotate(321deg); transform: rotate(321deg); } .spike:nth-of-type(59) { top: 66px; left: 3px; -webkit-transform: rotate(120deg); transform: rotate(120deg); } .spike:nth-of-type(60) { top: 5px; left: 47px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .spike:nth-of-type(61) { top: 13px; left: 38px; -webkit-transform: rotate(126deg); transform: rotate(126deg); } .spike:nth-of-type(62) { top: 65px; left: 21px; -webkit-transform: rotate(280deg); transform: rotate(280deg); } .spike:nth-of-type(63) { top: 72px; left: 15px; -webkit-transform: rotate(21deg); transform: rotate(21deg); } .spike:nth-of-type(64) { top: 21px; left: 29px; -webkit-transform: rotate(247deg); transform: rotate(247deg); } .spike:nth-of-type(65) { top: 27px; left: 31px; -webkit-transform: rotate(15deg); transform: rotate(15deg); } .spike:nth-of-type(66) { top: 78px; left: 48px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .spike:nth-of-type(67) { top: 39px; left: 11px; -webkit-transform: rotate(210deg); transform: rotate(210deg); } .spike:nth-of-type(68) { top: 38px; left: 33px; -webkit-transform: rotate(75deg); transform: rotate(75deg); } .spike:nth-of-type(69) { top: 73px; left: 10px; -webkit-transform: rotate(24deg); transform: rotate(24deg); } .spike:nth-of-type(70) { top: 26px; left: 3px; -webkit-transform: rotate(269deg); transform: rotate(269deg); } .spike:nth-of-type(71) { top: 18px; left: 1px; -webkit-transform: rotate(82deg); transform: rotate(82deg); } .spike:nth-of-type(72) { top: 21px; left: 8px; -webkit-transform: rotate(137deg); transform: rotate(137deg); } .spike:nth-of-type(73) { top: 57px; left: 31px; -webkit-transform: rotate(133deg); transform: rotate(133deg); } .spike:nth-of-type(74) { top: 34px; left: 1px; -webkit-transform: rotate(17deg); transform: rotate(17deg); } .spike:nth-of-type(75) { top: 29px; left: 16px; -webkit-transform: rotate(345deg); transform: rotate(345deg); } .spike:nth-of-type(76) { top: 79px; left: 24px; -webkit-transform: rotate(296deg); tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0