jquery天气预报卡片点击切换效果代码
代码语言:html
所属分类:其他
代码描述:jquery天气预报卡片点击切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> @charset "utf-8"; * { margin: 0; padding: 0 } ul { list-style: none } .box { width: 294px; height: 524px; margin: 20px auto; position: relative; text-align: center; } .box ul { width: 294px; height: 524px; } .box_rotate { animation: rock 0.5s 1; -moz-animation: rock 0.5s 1; -ms-animation: rock 0.5s 1; -o-animation: rock 0.5s 1; -webkit-animation: rock 0.5s 1; } @-moz-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-ms-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-o-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .box_rotate2 { animation: rock 0.5s 1; -moz-animation: rock 0.5s 1; -ms-animation: rock 0.5s 1; -o-animation: rock 0.5s 1; -webkit-animation: rock 0.5s 1; } @-moz-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-ms-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-o-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes rock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .box ul li { width: 180px; height: 320px; float: left; position: absolute; top: 0; left: 0; cursor: pointer; } .box ul li div { height: 320px; width: 180px; border-radius: 0 100px 0 100px; } .box ul li:nth-child(2) { width: 110px; height: 200px; background: #036cd5; border: 1px solid #036cd5; box-shadow: 0 0 10px #036cd5; border-radius: 60px 0 60px 0; left: 182px; top: 120px; } .box ul li:nth-child(3) { width: 110px; height: 200px; background: #036cd5; border: 1px solid #036cd5; box-shadow: 0 0 10px #036cd5; border-radius: 60px 0 60px 0; top: 321px; left: 71px; } .box ul li:nth-child(4) { width: 80px; height: 162px; background: #ff824f; border: 1px solid #ff824f; box-shadow: 0 0 10px #ff824f; border-radius: 0 50px 0 50px; top: 321px; left: 181px; } .box_time p { font-size: 12px; color: #FFF; position: absolute; left: 10px; } .box_ti i { font-size: 16px; display: block; color: #FFF; font-style: normal; position: absolute; top: 20px; left: 10px; } .box_ti i::before { content: ""; display: inline-block; height: 22px; width: 22px; background: url(//repo.bfw.wiki/bfwrepo/image/60665e1d6d05f.png) no-repeat; vertical-align: middle; } .box_time p:nth-child(2) { font-size: 90px; font-weight: bold; top: 35px; } .box_time p:nth-child(3) { font-size: 24px; left: 120px; top: 55px; } .box_time p:nth-child(4) { left: 120px; top: 85px; } .box_time p:nth-child(5) { left: 120px; top: 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0