jquery实现圆形转动图文轮换效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery实现圆形转动图文轮换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /*@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);*/ body { background: #FFB533; font-size: 100%; font-family: 'Source Sans Pro', sans-serif; } .wrapper { text-align: center; padding: 2em; } .steps { margin: 0 auto; height: 20em; list-style: none; width: 20em; z-index: 0; position: relative; color: #fff; border: 2px solid white; border-radius: 50%; } .steps__icon { padding-top: 2.5em; width: 50%; } .steps__description { padding: 0em 4em; position: absolute; bottom: 2.5em; font-size: 0.9em; } .steps__description span { font-weight: bold; padding-right: 0.3em; } .steps__description a { -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 1px solid #373232; border-radius: 0.2em; color: #373232; text-decoration: none; display: inline-block; padding: 0.2em 0.5em; margin-top: 0.6em; font-size: 0.9em; } .steps__description a:hover { border: 1px solid #fff; color: #fff; background: #373232; } .is-active a { font-size: 2em !important; background: #373232 !important; } #steps-menu ul li { -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; -ms-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out; border-left: 140px solid transparent; border-top: 1px solid transparent; font-size: 0.65em; left: 50%; list-style: none; position: absolute; top: 50%; transform-origin: 0 0; } #steps-menu ul li:after { content: " "; background: url("http://krystalcampioni.com/testes/arrow.png") red; width: 0.7em; height: 0.4em; margin-left: -0.14em; margin-top: -2.1em; position: absolute; font-size: 3.5em; background-size: 100%; background-color: transparent; transform: rotate(-29deg); background-repeat: no-repeat; } #steps-menu ul li a { -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: #FFB533; color: #fff; text-decoration: none; position: absolute; border: 2px solid #fff; border-radius: 50%; text-align: center; height: 2em; width: 2em; font-size: 1.6em; line-height: 2; box-shadow: 0 0 0 0 transparent; } #steps-menu ul li a:hover { background: #373232; box-shadow: 0 0 0px 3px #373232; } .step-1 ul li:nth-of-type(1) { transform: rotate(-97deg); } .step-1 ul li:nth-of-type(1) a { transform: rotate(97deg); } .step-2 ul li:nth-of-type(1) { transform: rotate(-157deg); } .step-2 ul li:nth-of-type(1) a { transform: rotate(157deg); } .step-3 ul li:nth-of-type(1) { transform: rotate(-217deg); } .step-3 ul li:nth-of-type(1) a { transform: rotate(217deg); } .step-4 ul li:nth-of-type(1) { transform: rotate(-277deg); } .step-4 ul li:nth-of-type(1) a { transform: rotate(277deg); } .step-5 ul li:nth-of-type(1) { transform: rotate(-337deg); } .step-5 ul li:nth-of-type(1) a { transform: rotate(337deg); } .step-6 ul li:nth-of-type(1) { transform: rotate(-397deg); } .step-6 ul li:nth-of-type(1) a { transform: rotate(397deg); } .step-1 ul li:nth-of-type(2) { transform: rotate(-37deg); } .step-1 ul li:nth-of-type(2) a { transform: rotate(37deg); } .step-2 ul li:nth-of-type(2) { transform: rotate(-97deg); } .step-2 ul li:nth-of-type(2) a { transform: rotate(97deg); } .step-3 ul li:nth-of-type(2) { transform: rotate(-157deg); } .step-3 ul li:nth-of-type(2) a { transform: rotate(157deg); } .step-4 ul li:nth-of-type(2) { transform: rotate(-217deg); } .step-4 ul li:nth-of-type(2) a { transform: rotate(217deg); } .step-5 ul li:nth-of-type(2) { transform: rotate(-277deg); } .step-5 ul li:nth-of-type(2) a { transform: rotate(277deg); } .step-6 ul li:nth-of-type(2) { transform: rotate(-337deg); } .step-6 ul li:nth-of-type(2) a { transform: rotate(337deg); } .step-1 ul li:nth-of-type(3) { transform: rotate(23deg); } .step-1 ul li:nth-of-type(3) a { transform: rotate(-23deg); } .step-2 ul li:nth-of-type(3) { transform: rotate(-37deg); } .step-2 ul li:nth-of-type(3) a { transform: rotate(37deg); } .step-3 ul li:nth-of-type(3) { transform: rotate(-97deg); } .step-3 ul li:nth-of-type(3) a { transform: rotate(97deg); } .step-4 ul li:nth-of-type(3) { transform: rotate(-157deg); } .step-4 ul li:nth-of-type(3) a { transform: rotate(157deg); } .step-5 ul li:nth-of-type(3) { transform: rotate(-217deg); } .step-5 ul li:nth-of-type(3) a { transform: rotate(217deg); } .step-6 ul li:nth-of-type(3) { transform: rotate(-277deg); } .step-6 ul li:nth-of-type(3) a { transform: rotate(277deg); } .step-1 ul li:nth-of-type(4) { transform: rotate(83deg); } .step-1 ul li:nt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0