body { font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } /* 容器样式 */ .container { position: relative; border-radius: 5px; background-color: #f2f2f2; padding: 20px 0 30px 0; } /* 输入框,链接按钮样式 */ input, .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; margin: 5px 0; opacity: 0.85; display: inline-block; font-size: 17px; line-height: 20px; text-decoration: none; /* 移除锚文本链接下划线 */ } input:hover, .btn:hover { opacity: 1; } /* 按钮背景颜色 */ .fb { background-color: #3B5998; color: white; } .twitter { background-color: #55ACEE; color: white; } .google { background-color: #dd4b39; color: white; } /* 提交按钮样式 */ input[type=submit] { background-color: #4CAF50; color: white; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* 两列布局 */ .col { float: left; width: 50%; margin: auto; padding: 0 50px; margin-top: 6px; } /* 清除浮动 */ .row:after { content: ""; display: table; clear: both; } /* vertical line */ .vl { position: absolute; left: 50%; transform: translate(-50%); border: 2px solid #ddd; height: 175px; } /* 水平方向的文本 */ .vl-innertext { position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 50%; padding: 8px 10px; } /* 大屏幕隐藏文本 */ .hide-md-lg { display: none; } /* 底部容器 */ .bottom-container { text-align: center; background-color: #666; border-radius: 0px 0px 4px 4px; } /* 响应式设计,在设备屏幕尺寸小于 650px ,上下丢跌显示 */ @media screen and (max-width: 650px) { .col { width: 100%; margin-top: 0; } /* hide the vertical line */ .vl { display: none; } /* show the hidden text on small screens */ .hide-md-lg { display: block; text-align: center; } } /* Rounded sliders */ /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } .checkboxThree { width: 120px; height: 40px; background: #333; margin: 20px 60px; border-radius: 50px; position: relative; } /** * Create the text for the On position */ .checkboxThree:before { content: 'Run'; position: absolute; top: 12px; left: 13px; height: 2px; color: #26ca28; font-size: 16px; } /** * Create the label for the off position */ .checkboxThree:after { content: 'Stop'; position: absolute; top: 12px; left: 75px; height: 2px; color: #ddd; font-size: 16px; } /** * Create the pill to click */ .checkboxThree label { display: block; width: 52px; height: 22px; border-radius: 50px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 9px; z-index: 1; left: 12px; background: #ddd; } /** * Create the checkbox event for the label */ .checkboxThree input[type=checkbox]:checked+label { left: 60px; background: #26ca28; } .graphic-design { width: 0%; /* -moz-animation: graphic-design 2s ease-out; -webkit-animation: graphic-design 2s ease-out; */ background-color: #f674a4; background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995)); background-image: -webkit-linear-gradient(top, #f674a4, #e06995); background-image: -moz-linear-gradient(top, #f674a4, #e06995); background-image: -ms-linear-gradient(top, #f674a4, #e06995); background-image: -o-linear-gradient(top, #f674a4, #e06995); background-image: linear-gradient(top, #f674a4, #e06995); } #skill { list-style: none; font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; width: 240px; margin: 50px auto 0; position: relative; line-height: 2em; padding: 30px 0; } #skill li { margin-bottom: 50px; background: #e9e5e2; background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2)); background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2); background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2); background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2); background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2); background-image: linear-gradient(top, #e1ddd9, #e9e5e2); height: 20px; border-radius: 10px; -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc; -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc; box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc; } #skill li h3 { position: relative; top: -25px; } .bar { height: 18px; margin: 1px 2px; position: absolute; border-radius: 10px; -moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9; -webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9; box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9; } /* @-moz-keyframes graphic-design { 0% { width: 0px; } 100% { width: 10%; } } @-webkit-keyframes graphic-design { 0% { width: 0px; } 100% { width: 10%; } } */