@charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } html { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; } body { width: 100%; height: 100%; font-size: 2.4em; line-height: 160%; font-weight: 400; color: #fff; font-smoothing: antialiased; font-family: 微软雅黑; overflow: hidden; background-image: -webkit-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); background-image: -moz-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); background-image: -ms-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); background-image: -o-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); } ul, li { list-style: none } a { text-decoration: none; color: #fff; } .clear { width: 0px; height: 0px; line-height: 0px; overflow: hidden; clear: both; } em, i { font-style: normal } .rusume, .rusume_body { width: 100%; height: 100%; } .section_re_body { padding: 40px 35px 0px 55px; } /*content*/ .section { background-image: -webkit-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); background-image: -moz-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); background-image: -ms-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); background-image: -o-linear-gradient(-55deg, #ac6084, #605077, #244a79, #254777); overflow: hidden; width:100%; height:100%; position:relative; } .myDiv { width: 1000px; height: 65%; margin: 0 auto; overflow: auto; } /*底部箭头*/ .section_nav { width: 100%; position: absolute; left: 0px; bottom: 15%; } .section_nav_line { width: 33%; height: 2px; background: #fff; position: absolute; left: 0px; top: 0px; -webkit-transform: translate(-500px, 0px); -moz-transform: translate(-500px, 0px); -ms-transform: translate(-500px, 0px); -o-transform: translate(-500px, 0px); transform: translate(-500px, 0px); -webkit-transition: all 1.5s ease-in; -moz-transition: all 1.5s ease-in; -ms-transition: all 1.5s ease-in; -o-transition: all 1.5s ease-in; transition: all 1.5s ease-in; } .active .section_nav_line { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .section_nav_line:after { width: 22px; height: 22px; background: #fff; border-radius: 50%; content: ""; position: absolute; right: -34px; top: -8px; } .section_nav_line:before { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%; padding: 10px; content: ""; position: absolute; right: -45px; top: -18px; } .section_nav_line_r { width: 33%; height: 2px; background: #fff; position: absolute; right: 0px; top: 0px; -webkit-transform: translate(500px, 0px); -moz-transform: translate(500px, 0px); -ms-transform: translate(500px, 0px); -o-transform: translate(500px, 0px); transform: translate(500px, 0px); -webkit-transition: all 1.5s ease-in; -moz-transition: all 1.5s ease-in; -ms-transition: all 1.5s ease-in; -o-transition: all 1.5s ease-in; transition: all 1.5s ease-in; } .active .section_nav_line_r { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .section_nav_line_r:after { width: 22px; height: 22px; background: #fff; border-radius: 50%; content: ""; position: absolute; left: -34px; top: -8px; } .section_nav_line_r:before { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%; padding: 10px; content: ""; position: absolute; left: -45px; top: -18px; } .section_nav_p { width: 100%; position: absolute; left: 0px; top: -20px; text-align: center; font-size: 1.2em; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 1.5s ease-in; -moz-transition: all 1.5s ease-in; -ms-transition: all 1.5s ease-in; -o-transition: all 1.5s ease-in; } .active .section_nav_p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .section_nav_icon { width: 100%; text-align: center; position: absolute; left: 0px; padding-top: 50px; font-size: 100px; -webkit-animation: section_nav_icon 3s ease-in infinite; -moz-animation: section_nav_icon 3s ease-in infinite; -ms-animation: section_nav_icon 3s ease-in infinite; -o-animation: section_nav_icon 3s ease-in infinite; animation: section_nav_icon 3s ease-in infinite } @-webkit-keyframes section_nav_icon { 0% { -webkit-transform:translate(0, 50px); -moz-transform:translate(0, 50px); -ms-transform:translate(0, 50px); -o-transform:translate(0, 50px); transform:translate(0, 50px); opacity:0 } 100% { -webkit-transform:translate(0, 0px); -moz-transform:translate(0, 0px); -ms-transform:translate(0, 0px); -o-transform:translate(0, 0px); transform:translate(0, 0px); opacity:1 } } /*开场*/ .active .rusume_info_Start { width: 350px; height: 350px; background: #a17488; position: absolute; left: 30%; top: 20%; -webkit-transform: rotate(45deg) translate(0, 0); -moz-transform: rotate(45deg) translate(0, 0); -ms-transform: rotate(45deg) translate(0, 0); -o-transform: rotate(45deg) translate(0, 0); transform: rotate(45deg) translate(0, 0); -webkit-animation: rusume_info_Start 1s ease; -moz-animation: rusume_info_Start 1s ease; -ms-animation: rusume_info_Start 1s ease; -o-animation: rusume_info_Start 1s ease; animation: rusume_info_Start 1s ease; } .rusume_info_h1 { width: 350px; height: 350px; text-align: center; font-size: 1.5em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; left: 0; top: 0; z-index: 100000 } .active .rusume_info_Start_span { display: block; padding-top: 130px; padding-bottom: 20px; } .active .rusume_info_Start_k1 { width: 100%; height: 100%; border: 4px solid #a17488; padding: 20px; position: absolute; left: -24px; top: -24px; -webkit-animation: flip 1.5s ease; -moz-animation: flip 1.5s ease; -ms-animation: flip 1.5s ease; -o-animation: flip 1.5s ease; animation: flip 1.5s ease; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .active .rusume_info_Start_k { width: 200px; height: 200px; background: #a17488; position: absolute; left: 38%; top: 45%; opacity: 0.5; -webkit-transform: rotate(45deg) translate(0px, 0px); -moz-transform: rotate(45deg) translate(0px, 0px); -ms-transform: rotate(45deg) translate(0px, 0px); -o-transform: rotate(45deg) translate(0px, 0px); transform: rotate(45deg) translate(0px, 0px); -webkit-animation: rusume_info_Start_k 1s ease; -moz-animation: rusume_info_Start_k 1s ease; -ms-animation: rusume_info_Start_k 1s ease; -o-animation: rusume_info_Start_k 1s ease; animation: rusume_info_Start_k 1s ease; } @-webkit-keyframes rusume_info_Start { 0% { -webkit-transform:rotate(95deg) translate(100px, 0); -moz-transform:rotate(95deg) translate(100px, 0); -ms-transform:rotate(95deg) translate(100px, 0); -o-transform:rotate(95deg) translate(100px, 0); transform:rotate(95deg) translate(100px, 0); } 100% { -webkit-transform:rotate(45deg) translate(0, 0); -moz-transform:rotate(45deg) translate(0, 0); -ms-transform:rotate(45deg) translate(0, 0); -o-transform:rotate(45deg) translate(0, 0); transform:rotate(45deg) translate(0, 0); } } @-webkit-keyframes flip { 0% { -webkit-transform:rotate(-145deg) scale(1.8); -moz-transform:rotate(-145deg) scale(1.8); -ms-transform:rotate(-145deg) scale(1.8); -o-transform:rotate(-145deg) scale(1.8); transform:rotate(-145deg) scale(1.8); } 50% { -webkit-transform:rotate(245deg) scale(1.5); -moz-transform:rotate(245deg) scale(1.5); -ms-transform:rotate(245deg) scale(1.5); -o-transform:rotate(245deg) scale(1.5); transform:rotate(245deg) scale(1.5); } 100% { -webkit-transform:rotate(0deg) scale(1); -moz-transform:rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -o-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); } } @-webkit-keyframes rusume_info_Start_k { 0% { -webkit-transform:rotate(125deg) translate(0px, -100px); -moz-transform:rotate(125deg) translate(0px, -100px); -ms-transform:rotate(125deg) translate(0px, -100px); -o-transform:rotate(125deg) translate(0px, -100px); transform:rotate(125deg) translate(0px, -100px); } 50% { -webkit-transform:rotate(-95deg) translate(0px, 200px); -moz-transform:rotate(-95deg) translate(0px, 200px); -ms-transform:rotate(-95deg) translate(0px, 200px); -o-transform:rotate(-95deg) translate(0px, 200px); transform:rotate(-95deg) translate(0px, 200px); } 100% { -webkit-transform:rotate(45deg) translate(0px, 0px); -moz-transform:rotate(45deg) translate(0px, 0px); -ms-transform:rotate(45deg) translate(0px, 0px); -o-transform:rotate(45deg) translate(0px, 0px); transform:rotate(45deg) translate(0px, 0px); } } /*基本信息*/ .rusume_info_Frame_one { width: 90%; height: 100%; background: rgba(72,84,126,0.2); border: 2px solid #ccc; -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); position: absolute; left: -60%; top: -20%; } .rusume_info_Frame_line { width: 2%; height: 80%; background: rgba(255,255,255,0.3); position: absolute; right: -50px; top: 60px; } .rusume_info_name_top_line { width: 40%; height: 2px; background: #fff; position: absolute; right: 0px; top: 20%; opacity: 0.5; -webkit-transform: translate(1000px, 0); -moz-transform: translate(1000px, 0); -ms-transform: translate(1000px, 0); -o-transform: translate(1000px, 0); transform: translate(1000px, 0); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .rusume_info_name_top_line:after { width: 22px; height: 22px; background: #fff; border-radius: 50%; content: ""; position: absolute; left: -34px; top: -8px; opacity: 0.5 } .rusume_info_name_top_line:before { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%; padding: 10px; content: ""; position: absolute; left: -45px; top: -18px; opacity: 0.5 } .rusume_info_name_bottom_line { width: 40%; height: 2px; background: #fff; position: absolute; left: 40%; top: 33%; opacity: 0.5; -webkit-transform: translate(-1000px, 0); -moz-transform: translate(-1000px, 0); -ms-transform: translate(-1000px, 0); -o-transform: translate(-1000px, 0); transform: translate(-1000px, 0); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .rusume_info_name_bottom_line:after { width: 22px; height: 22px; background: #fff; border-radius: 50%; content: ""; position: absolute; right: -34px; top: -8px; opacity: 0.5 } .rusume_info_name_bottom_line:before { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%; padding: 10px; content: ""; position: absolute; right: -45px; top: -18px; opacity: 0.5 } .rusume_info_name { width: 50%; position: absolute; right: 0px; top: 25%; font-size: 60px; color: #ffc8cd; -webkit-transform: translate(1000px, 0); -moz-transform: translate(1000px, 0); -ms-transform: translate(1000px, 0); -o-transform: translate(1000px, 0); transform: translate(1000px, 0); -webkit-transition: all 1s ease-in 2s; -moz-transition: all 1s ease-in 2s; -ms-transition: all 1s ease-in 2s; -o-transition: all 1s ease-in 2s; transition: all 1s ease-in 2s; opacity: 0 } .rusume_info_p ,.rusume_info_p2{ width: 60%; position: absolute; right: 0px; top: 40%; -webkit-transform: translate(0px, -100px); -moz-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -webkit-transition: all 1s ease-in 2s; -moz-transition: all 1s ease-in 2s; -ms-transition: all 1s ease-in 2s; -o-transition: all 1s ease-in 2s; transition: all 1s ease-in 2s; opacity: 0 } .rusume_info_qz { width: 70%; position: absolute; right: 0px; top: 55%; -webkit-transform: translate(0px, 200px); -moz-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); -o-transform: translate(0px, 200px); transform: translate(0px, 200px); -webkit-transition: all 1s ease-in 1.5s; -moz-transition: all 1s ease-in 1.5s; -ms-transition: all 1s ease-in 1.5s; -o-transition: all 1s ease-in 1.5s; transition: all 1s ease-in 1.5s; opacity: 0 } .rusume_info_Frame_img { width: 90%; height: 100%; position: absolute; left: -60%; top: -20%; overflow: hidden; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); } .rusume_info_Frame_img img { position: absolute; right: -15px; top: 25%; border: 2px solid #ccc; opacity: 0; border-radius:100%; -webkit-transform: translateX(-500px) rotate(-230deg); -moz-transform: translateX(-500px) rotate(-230deg); -ms-transform: translateX(-500px) rotate(-230deg); -o-transform: translateX(-500px) rotate(-230deg); transform: translateX(-500px) rotate(-230deg); -webkit-transition: all 1.5s ease-in 1s; -moz-transition: all 1.5s ease-in 1s; -ms-transition: all 1.5s ease-in 1s; -o-transition: all 1.5s ease-in 1s; transition: all 1.5s ease-in 1s; } .active .rusume_info_name_top_line { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .active .rusume_info_name_bottom_line { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .active .rusume_info_name { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1 } .active .rusume_info_p ,.active .rusume_info_p2{ -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1 } .active .rusume_info_qz { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1 } .active .rusume_info_Frame_img img { -webkit-transform: translateX(0px) rotate(-25deg); -moz-transform: translateX(0px) rotate(-25deg); -ms-transform: translateX(0px) rotate(-25deg); -o-transform: translateX(0px) rotate(-25deg); transform: translateX(0px) rotate(-25deg); opacity: 1 } /*求职意向*/ .section_Work_title { width: 100%; height: 250px; font-size: 1.3em; position: relative; z-index: 1000 } .section_Work_title .section_Work_span { width: 40%; background: rgba(255,255,255,0.3); padding: 10px 40px; position: absolute; left: 50%; margin-left: -25%; top: 28%; text-align: center; -webkit-transform: translate(0px, -200px); -moz-transform: translate(0px, -200px); -ms-transform: translate(0px, -200px); -o-transform: translate(0px, -200px); transform: translate(0px, -200px); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .section_Work_title .section_Work_span:after { width: 100%; height: 100%; border: 2px solid #fff; opacity: 0.3; position: absolute; left: -6px; top: -6px; padding: 4px; content: ""; display: block } .section_Work_title .section_Work_em { width: 100%; text-align: center; ; position: absolute; bottom: 10%; text-align: center; opacity: 0; font-size: 0.9em; -webkit-transform: translate(0px, 20px); -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; } .job_Intention_line_l { width: 100%; height: 1px; background: rgb(255,255,255); position: absolute; left: -60%; top: 40%; border-radius: 20%; opacity: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; } .job_Intention_line_l:after { width: 200px; height: 15px; background: rgb(255,255,255); content: ""; position: absolute; right: -16px; top: -40px; } .job_Intention_line_r { width: 100%; height: 1px; background: rgb(255,255,255); position: absolute; right: -20%; top: 35%; border-radius: 20%; opacity: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; } .job_Intention_line_r:after { width: 1000px; height: 15px; background: rgba(255,255,255,1); content: ""; position: absolute; left: -20px; top: -40px; } .job_Intention_cont { position: absolute; left: 0px; top: 38%; line-height: 70px; padding-left: 180px; } .section_yx_by_p { margin-top: 10px; color: #fff; opacity: 0; -webkit-transform: translate(0px, 300px); -moz-transform: translate(0px, 300px); -ms-transform: translate(0px, 300px); -o-transform: translate(0px, 300px); transform: translate(0px, 300px); -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; } .section_yx_by_span { color: #f1c577 } .active .section_Work_span { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .active .section_Work_em { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 0.5 } .active .job_Intention_line_l { -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); opacity: 0.5 } .active .job_Intention_line_r { opacity: 1; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); opacity: 0.5 } .active .section_yx_by_p { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1 } .active .section_yx_by_p:nth-of-type(1) { -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; } .active .section_yx_by_p:nth-of-type(2) { -webkit-transition: all 1s ease-in 1.5s; -moz-transition: all 1s ease-in 1.5s; -ms-transition: all 1s ease-in 1.5s; -o-transition: all 1s ease-in 1.5s; transition: all 1s ease-in 1.5s; } .active .section_yx_by_p:nth-of-type(3) { -webkit-transition: all 1s ease-in 2s; -moz-transition: all 1s ease-in 2s; -ms-transition: all 1s ease-in 2s; -o-transition: all 1s ease-in 2s; transition: all 1s ease-in 2s; } .active .section_yx_by_p:nth-of-type(4) { -webkit-transition: all 1s ease-in 2.5s; -moz-transition: all 1s ease-in 2.5s; -ms-transition: all 1s ease-in 2.5s; -o-transition: all 1s ease-in 2.5s; transition: all 1s ease-in 2.5s; } .active .section_yx_by_p:nth-of-type(5) { -webkit-transition: all 1s ease-in 3s; -moz-transition: all 1s ease-in 3s; -ms-transition: all 1s ease-in 3s; -o-transition: all 1s ease-in 3s; } .active .section_yx_by_p:nth-of-type(6) { -webkit-transition: all 1s ease-in 3.5s; -moz-transition: all 1s ease-in 3.5s; -ms-transition: all 1s ease-in 3.5s; -o-transition: all 1s ease-in 3.5s; transition: all 1s ease-in 3.5s; } /*工作经历*/ .section_h2 { width: 100%; height: 250px; font-size: 1.3em; position: relative; z-index: 1000 } .section_h2 .section_h2_span { width: 40%; background: rgba(255,255,255,0.3); padding: 10px 40px; position: absolute; left: 50%; margin-left: -25%; top: 28%; text-align: center; -webkit-transform: translate(0px, -200px); -moz-transform: translate(0px, -200px); -ms-transform: translate(0px, -200px); -o-transform: translate(0px, -200px); transform: translate(0px, -200px); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .section_h2 .section_h2_span:after { width: 100%; height: 100%; border: 2px solid #fff; opacity: 0.3; position: absolute; left: -6px; top: -6px; padding: 4px; content: ""; display: block } .section_h2 .section_h2_em { width: 100%; text-align: center; ; position: absolute; bottom: 10%; text-align: center; opacity: 0; font-size: 0.9em; -webkit-transform: translate(0px, 20px); -moz-transform: translate(0px, 20px); -ms-transform: translate(0px, 20px); -o-transform: translate(0px, 20px); transform: translate(0px, 20px); -webkit-transition: all 1.5s ease-in 1s; -moz-transition: all 1.5s ease-in 1s; -ms-transition: all 1.5s ease-in 1s; -o-transition: all 1.5s ease-in 1s; transition: all 1.5s ease-in 1s; } .section_Experience_list { margin-top: 40px; } .active .section_Experience_date { width:90%; padding: 10px 40px; position: relative; background: rgba(112,78,127,0.33); -webkit-animation:section_Experience_date 1.5s ease-in ; -moz-animation:section_Experience_date 1.5s ease-in ; -ms-animation:section_Experience_date 1.5s ease-in ; -o-animation:section_Experience_date 1.5s ease-in ; animation:section_Experience_date 1.5s ease-in ; } @-webkit-keyframes section_Experience_date { 0% { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; opacity: 0 } 100% { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); opacity: 1 } } .section_Experience_text{max-height:580px; overflow:auto} .section_Experience_t { position: relative; z-index: 2; color: #ffb2b2 } .active .section_Experience_box { padding: 20px 40px; background: rgba(112,78,127,0.3); line-height: 160%; margin-top: 20px; -webkit-animation: section_Experience_box 1.5s ease-in ; -moz-animation: all 1.5s ease-in ; -ms-animation: all 1.5s ease-in ; -o-animation: all 1.5s ease-in ; animation: all 1.5s ease-in ; } @-webkit-keyframes section_Experience_box { 0% { -webkit-transform: translate(-500px,500px) rotate(90deg); -moz-transform:translate(-500px,500px) rotate(90deg); -ms-transform:translate(-500px,500px) rotate(90deg); -o-transform:translate(-500px,500px) rotate(90deg); -webkit-transform-origin:center center; opacity: 0 } 100% { -webkit-transform:translate(0px,0px) rotate(0deg); -ms-transform:translate(0px,0px) rotate(0deg); -moz-transform:translate(0px,0px) rotate(0deg); -o-transform:translate(0px,0px) rotate(0deg); opacity: 1 } } .section_Experience_name { font-weight: bold; margin-bottom: 10px; } .active .section_h2_span { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .active .section_h2_em { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 0.5 } /*教育经历*/ .section_Education_list { margin-top: 30px; margin-left: 80px; margin-bottom: 80px; } .section_Education_date { width: 90%; display: block; background: rgba(87,90,127,1); font-size: 0.9em; color: #9ef5f7; padding: 10px 30px; border-radius: 60px; text-align: center; position: relative; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .section_Education_date:after { width: 100%; height: 100%; padding:8px; content: ""; border: 3px solid #6a527a; position: absolute; left: -10px; top: -12px; border-radius: 80px; } .section_Education_box { width: 95%; border-left: 3px solid #6a527a; border-bottom: 3px solid #6a527a; margin-top: 100px; padding: 30px 0px 30px 60px; position: relative } .section_Education_box:after { width: 30%; height: 3px; content: ""; background: #6a527a; position: absolute; left: 0px; top: 0px; } .section_Education_box:before { width: 3px; height: 92px; content: ""; background: #6a527a; position: absolute; left: 30%; top: -90px; } .section_Education_box aside { width: 100%; position: relative; opacity: 0; -webkit-transform: translate(1000px, 0) } .section_Education_box .section_Education_t:after { width: 12px; height: 12px; background: #fff; border-radius: 50%; content: ""; position: absolute; left: -68px; top: 22px; } .section_Education_box .section_Education_t:before { width: 12px; height: 12px; border: 1px solid #fff; border-radius: 50%; padding: 10px; content: ""; position: absolute; left: -79px; top: 12px; } .active .section_Education_date { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1 } .active .section_Education_box aside { -webkit-animation: section_aside 0.8s linear 1s both; -moz-animation: section_aside 0.8s linear 1s both; -ms-animation: section_aside 0.8s linear 1s both; -o-animation: section_aside 0.8s linear 1s both; animation: section_aside 0.8s linear 1s both; -webkit-transform: translate(0px, 0) } .section_Education_box_text{width:100%;height:380px; overflow:hidden; } .active .section_Education_box .section_Education_t:before { -webkit-animation: section_Education_t 3s infinite 2s; -moz-animation: section_Education_t 3s infinite 2s; -ms-animation: section_Education_t 3s infinite 2s; -o-animation: section_Education_t 3s infinite 2s; animation: section_Education_t 3s infinite 2s; } @-webkit-keyframes section_aside { 0% { -webkit-transform: translate(1000px, 0px); -moz-transform: translate(1000px, 0px); -ms-transform: translate(1000px, 0px); -o-transform: translate(1000px, 0px); transform: translate(1000px, 0px); } 25% { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } 55% { -webkit-transform: translate(50px, 0px); -moz-transform: translate(50px, 0px); -ms-transform: translate(50px, 0px); -o-transform: translate(50px, 0px); transform: translate(50px, 0px); } 100% { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity:1 } } @-webkit-keyframes section_Education_t { 0% { -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); opacity:0 } 100% { -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -ms-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); } } /*专业技能*/ .section_Skill_cont { width: 98%; padding-left: 80px; } .section_Skill_list { width: 80%; margin-top: 40px; padding: 40px 40px; line-height: 180%; position: relative; } .section_Skill_list:after { width: 90%; height: 2px; background: #fff; content: ""; position: absolute; left: 40px; top: 0px; z-index: 2 } .section_Skill_list:before { width: 2px; height: 90%; background: #fff; content: ""; position: absolute; left: 0px; top: 40px; z-index: 2 } .section_Skill_p{ margin-top:40px;} .section_Skill_con_t{ background:rgba(255,255,255,0.2); padding:20px 40px; opacity: 0; -webkit-transform: translate(0px, 100px); -moz-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); transform: translate(0px, 100px); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in ; -o-transition: all 1s ease-in ; transition: all 1s ease-in; } .section_Skill_con_em{ background:rgba(255,255,255,0.2); padding:20px 60px; margin-left:10px; -webkit-transform: translate(500px, 300px); -moz-transform: translate(500px, 300px); -ms-transform: translate(500px, 300px); -o-transform: translate(500px, 300px); transform: translate(500px, 300px); -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; opacity: 0} .active .section_Skill_con_t{ opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; white-space:nowrap } .active .section_Skill_con_em{ -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; white-space:nowrap } .section_Skill_time_icon { width: 60px; height: 60px; text-align: center; font-size: 45px; border: 2px dashed #fff; border-radius: 50%; position: absolute; left: -30px; top: -30px; opacity: 0.8 } .section_Skill_time_icon_fa { position: absolute; left: 12px; top: 5px; opacity: 0.8 } .active .section_Skill_time_icon { -webkit-animation: section_Skill_time_icon 2s linear infinite 3s; -moz-animation: section_Skill_time_icon 2s linear infinite 3s; -ms-animation: section_Skill_time_icon 2s linear infinite 3s; -o-animation: section_Skill_time_icon 2s linear infinite 3s; animation: section_Skill_time_icon 2s linear infinite 3s; } @-webkit-keyframes section_Skill_time_icon { 0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; border:2px dashed #fff; } 100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); opacity:1; border:2px dashed #fff; } } /*项目经历*/ .section_Project_cont { height: 100%; margin: 0px 0px 0px 90px; } .section_Project_list { padding-left: 100px; padding-right: 50px; position: relative; line-height: 70px; padding-bottom: 40px; } .section_Project_line { width: 10px; height: 100%; background: #99577f; display: block } .section_Project_em_n { font-size: 45px; } .section_Project_list aside { position: relative; } .section_Project_list .section_Project_a1 { position: relative; background: rgba(255,255,255,0.1); border-radius: 30px; padding-left: 20px; margin-bottom: 10px; -webkit-transform: translate(1000px, 0); -moz-transform: translate(1000px, 0); -ms-transform: translate(1000px, 0); -o-transform: translate(1000px, 0); transform: translate(1000px, 0); -webkit-transition: all 1.5s ease-in; -moz-transition: all 1.5s ease-in; -ms-transition: all 1.5s ease-in; -o-transition: all 1.5s ease-in; transition: all 1.5s ease-in; opacity: 0 } .section_Project_list .section_Project_a2 { position: relative; margin-top:10px } .section_Project_a2_text{height:550px; overflow:hidden} .section_Project_box { width: 100%; -webkit-transform: translate(1000px, 0); -moz-transform: translate(1000px, 0); -ms-transform: translate(1000px, 0); -o-transform: translate(1000px, 0); transform: translate(1000px, 0); -webkit-transition: all 1.5s ease-in 1s; -moz-transition: all 1.5s ease-in 1s; -ms-transition: all 1.5s ease-in 1s; -o-transition: all 1.5s ease-in 1s; } .section_Project_list:after { width: 5px; height: 100%; content: ""; background: rgba(255,255,255,0.2); position: absolute; left: 20px; top: 10px; z-index: 1000; } .active .section_Project_yuan { width: 40px; height: 40px; background: #99577f; position: absolute; left: 0px; top: 0px; border-radius: 50%; z-index: 1500; } .active .section_Project_yuan3 { width: 30px; height: 30px; background: #99577f; position: absolute; left: 6px; top: 0px; border-radius: 50%; -webkit-animation: section_xim_yuan 4s ease-in 3s infinite; -moz-animation: section_xim_yuan 4s ease-in 3s infinite; -ms-animation: section_xim_yuan 4s ease-in 3s infinite; -o-animation: section_xim_yuan 4s ease-in 3s infinite; animation: section_xim_yuan 4s ease-in 3s infinite; } .active .section_Project_list .section_Project_a1 { -webkit-transform: translate(0px, 0); -moz-transform: translate(0px, 0); -ms-transform: translate(0px, 0); -o-transform: translate(0px, 0); transform: translate(0px, 0); opacity: 1 } .active .section_Project_box { -webkit-transform: translate(0px, 0); -moz-transform: translate(0px, 0); -ms-transform: translate(0px, 0); -o-transform: translate(0px, 0); transform: translate(0px, 0); } @-webkit-keyframes section_xim_yuan { 0% { -webkit-transform:translate(0px, 0); -moz-transform:translate(0px, 0); -ms-transform:translate(0px, 0); -o-transform:translate(0px, 0); transform:translate(0px, 0); opacity:1; } 100% { -webkit-transform:translate(0, 800px); -moz-transform:translate(0, 800px); -ms-transform:translate(0, 800px); -o-transform:translate(0, 800px); transform:translate(0, 800px); opacity:0; } } /*荣誉证书*/ .section_Certificate_cont { height: 100%; margin: 0px 0px 0px 90px; } .section_Certificate_list { margin-bottom: 30px; margin-top: 20px; position: relative; padding-left: 50px; position: relative } .section_Certificate_list:after { width: 4px; height: 100%; background: rgba(255,255,255,0.2); content: ""; position: absolute; left: 0px; top: 0px; z-index: 10 } .section_Certificate_r { width: 80%; background: rgba(255,255,255,0.1); color: #fff; padding: 10px 20px; border-top: 10px solid #99577f; margin-top: 30px; line-height: 60px; position: relative; -webkit-transform: translate(0px, 80px); -moz-transform: translate(0px, 80px); -ms-transform: translate(0px, 80px); -o-transform: translate(0px, 80px); transform: translate(0px, 80px); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; opacity: 0 } .section_Certificate_r_fa { position: absolute; left: 5%; top: -48px; font-size: 60px; color: #99577f } .section_Certificate_date { width: 100%; position: relative; } .section_Certificate_date_fa { width: 40px; height: 40px; background: #99577f; border-radius: 50%; position: absolute; left: -70px; top: -1px; z-index: 20 } .section_Certificate_name { font-size: 45px; } .active .section_Certificate_r { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1 } /* 附加信息*/ .section_Additional_con { padding: 20px 80px 0px 110px; font-size: 45px; line-height: 80px; } .rusume_Additional_p { position: relative } .rusume_Additional_span { } .rusume_Additional_text{max-height:720px; overflow:hidden} /*自我评价*/ .section_re_pj { line-height: 70px; border: 4px dashed #ebe7e7; border-radius: 10px; padding: 5%; top: 30%; margin-top: 150px; position: relative; -webkit-transform: translate(0, -150px); -moz-transform: translate(0, -150px); -ms-transform: translate(0, -150px); -o-transform: translate(0, -150px); transform: translate(0, -150px); -webkit-transition: all 3s ease-in; -moz-transition: all 3s ease-in; -ms-transition: all 3s ease-in; -o-transition: all 3s ease-in; transition: all 3s ease-in; } .active .section_re_pj { -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -o-transform: translate(0, 0px); transform: translate(0, 0px); } .section_re_pj_fa { font-size: 70px; position: absolute; left: 10px; top: -40px; color: #fff; } .section_re_pj_line1 { width: 4px; height: 260px; background: rgba(255,255,255,0.5); position: absolute; top: 0px; right: 40px; -webkit-transform: translate(150px, 0px); -moz-transform: translate(150px, 0px); -ms-transform: translate(150px, 0px); -o-transform: translate(150px, 0px); transform: translate(150px, 0px); -webkit-transition: all 3s ease-in; -moz-transition: all 3s ease-in; -ms-transition: all 3s ease-in; -o-transition: all 3s ease-in; transition: all 3s ease-in; } .active .section_re_pj_line1 { -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -o-transform: translate(0, 0px); transform: translate(0, 0px); } .section_re_pj_line1:after { width: 30px; height: 30px; content: ""; background: rgba(255,255,255,0.5); position: absolute; left: -15px; bottom: -40px; border-radius: 50%; } .section_re_pj_line2 { width: 4px; height: 180px; background: rgba(255,255,255,0.5); position: absolute; top: 0px; right: 100px; -webkit-transform: translate(250px, 0px); -moz-transform: translate(250px, 0px); -ms-transform: translate(250px, 0px); -o-transform: translate(250px, 0px); transform: translate(250px, 0px); -webkit-transition: all 3s ease-in; -moz-transition: all 3s ease-in; -ms-transition: all 3s ease-in; -o-transition: all 3s ease-in; transition: all 3s ease-in; } .active .section_re_pj_line2 { -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -o-transform: translate(0, 0px); transform: translate(0, 0px); } .section_re_pj_line2:after { width: 30px; height: 30px; content: ""; background: rgba(255,255,255,0.5); position: absolute; left: -15px; bottom: -40px; border-radius: 50%; } .section_re_pj_line3 { width: 4px; height: 100px; background: rgba(255,255,255,0.5); position: absolute; top: 0px; right: 160px; -webkit-transform: translate(350px, 0px); -moz-transform: translate(350px, 0px); -ms-transform: translate(350px, 0px); -o-transform: translate(350px, 0px); transform: translate(350px, 0px); -webkit-transition: all 3s ease-in; -moz-transition: all 3s ease-in; -ms-transition: all 3s ease-in; -o-transition: all 3s ease-in; transition: all 3s ease-in; } .active .section_re_pj_line3:after { width: 30px; height: 30px; content: ""; background: rgba(255,255,255,0.5); position: absolute; left: -15px; bottom: -40px; border-radius: 50%; } .active .section_re_pj_line3 { -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -o-transform: translate(0, 0px); transform: translate(0, 0px); } /*联系方式*/ .section_touch_box { padding: 50px 80px; background: rgba(255,255,255,0.1); border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 200px; text-align: center; font-size: 50px; line-height: 120px; position: relative; -webkit-transform:rotateY(180deg) skewX(30deg); -moz-transform:rotateY(180deg) skewX(30deg); -ms-transform:rotateY(180deg) skewX(30deg); -o-transform:rotateY(180deg) skewX(30deg); transform:rotateY(180deg) skewX(30deg); -webkit-transition:all 2s ease-in ; -moz-transition:all 2s ease-in ; -ms-transition:all 2s ease-in ; -o-transition:all 2s ease-in ; transition:all 2s ease-in ; } .active .section_touch_box{ -webkit-transform:rotateY(0deg) skewX(0deg); -moz-transform:rotateY(0deg) skewX(0deg); -ms-transform:rotateY(0deg) skewX(0deg); -o-transform:rotateY(0deg) skewX(0deg); } .section_touch_box_a { color: #F90 } .section_touch_box_a_r { color: #1ce8b5 } .section_touch_ul{ padding:20px; margin-top:140px;} .section_touch_ul li{background: rgba(255,255,255,0.1); text-align:center; padding:20px 0; margin-top:50px;} .section_touch_ul li a{ display:block} /*音乐*/ .disc{ position:fixed;right:5%;top:3%; z-index:100000} .audio_div{ width:88px; height:88px; position: absolute; top: 5%; right: 5%; z-index: 9999999; -webkit-animation:audioPlay 3s linear infinite; } @-webkit-keyframes audioPlay { 0% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } 100% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } } /*320px布局*/ /* iphone 4 */ @media (min-device-width : 175px) and (max-device-width : 320px) and (-webkit-min-device-pixel-ratio : 2) { .rusume_info_Frame_one { top: -28%; left: -65% } .rusume_info_Frame_img { top: -28%; left: -65% } .rusume_info_name_bottom_line { left: 30% } .myDiv { height: 58% } .rusume_one_fa { font-size: 110px; } .section_nav_icon { padding-top: 50px; } .section_Experience_text{max-height:580px; overflow:auto} .section_Project_a2_text{height:500px; overflow:auto} } /* iphone 6 */ @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) { } /* iphone6 plus */ @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) { } /*修改补充*/ .seek_contact ,.enter_station{transition:all 1.5s 0 ease-in; -webkit-transition:all 1.5s ease-in; transform:scale(0); -webkit-transform:scale(0);} .enter_station{transition:all 1.5s 1s ease-in;} .active .seek_contact ,.active .enter_station{transform:scale(1); -webkit-transform:scale(1);} .rusume_info_line { width: 22%; height: 2px; background: #fff; position: absolute; left:0; top:13%; opacity: 0.5; -webkit-transform: translate(-1000px, 0); -moz-transform: translate(-1000px, 0); -ms-transform: translate(-1000px, 0); -o-transform: translate(-1000px, 0); transform: translate(-1000px, 0); -webkit-transition: all 1.5s 1s ease-in; -moz-transition: all 1.5s 1s ease-in; -ms-transition: all 1.5s 1s ease-in; -o-transition: all 1.5s 1s ease-in; transition: all 1.5s 1s ease-in; } .rusume_info_line:after { width: 22px; height: 22px; background: #fff; border-radius: 50%; content: ""; position: absolute; right: -34px; top: -8px; opacity: 0.5 } .rusume_info_line:before { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%; padding: 10px; content: ""; position: absolute; right: -45px; top: -18px; opacity: 0.5 } .active .rusume_info_line { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .rusume_info_p2{ top:47%; width:65%; -webkit-transform: translate(0px, -100px); -moz-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); -o-transform: translate(0px, -100px); -webkit-transition: all 1s ease-in 1s; -moz-transition: all 1s ease-in 1s; -ms-transition: all 1s ease-in 1s; -o-transition: all 1s ease-in 1s; transition: all 1s ease-in 1s; } .section_Certificate_r div{ width:100%;} .active .active .section_Education_date { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1 } .active .active .section_Education_box aside { -webkit-animation: section_aside 0.8s linear 1s both; -moz-animation: section_aside 0.8s linear 1s both; -ms-animation: section_aside 0.8s linear 1s both; -o-animation: section_aside 0.8s linear 1s both; animation: section_aside 0.8s linear 1s both; -webkit-transform: translate(0px, 0) }