看到一个好看的效果 留日后备用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="google" value="notranslate"> <title>CodePen - Button Hover Effects</title> <style> html { padding-top: 50px; font-family: 'Open Sans', Helvetica, arial, sans-serif; text-align: center; background-color: #eeeeee; } html *, html *:before, html *:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; } html i, html em, html b, html strong, html span { -webkit-transition: none; transition: none; } *:before, *:after { z-index: -1; } h1, h4 { font-family: 'Raleway', 'Open Sans', sans-serif; margin: 0; line-height: 1; } a { text-decoration: none; line-height: 80px; color: black; } .centerer { width: 100%; max-width: 600px; margin: 0 auto; } .wrap { width: 50%; float: left; } [class^="btn-"] { position: relative; display: block; margin: 20px auto; width: 100%; height: 80px; max-width: 250px; text-transform: uppercase; overflow: hidden; border: 1px solid currentColor; } .btn-0 { color: #925073; } .btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #4c1d36; } .btn-0:hover { color: #dfccd6; } .btn-0:hover:before { width: 250px; } .btn-0:active { background: #7f315a; } .btn-1 { color: #af4e49; } .btn-1:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #611c19 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-1:hover { color: #e8cbca; } .btn-1:hover:after { border-width: 330px 330px 0 0; } .btn-1:active { background: #a12f29; } .btn-1-2 { color: #61cdbe; } .btn-1-2:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #29766b; position: absolute; bottom: 0; left: 0; } .btn-1-2:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #29766b transparent; position: absolute; right: 0; bottom: 0; } .btn-1-2:hover { color: #d1f0ec; } .btn-1-2:hover:before { border-width: 206.25px 0 0 206.25px; } .btn-1-2:hover:after { border-width: 0 0 206.25px 206.25px; } .btn-1-2:active { background: #45c4b3; } .btn-2 { color: #306570; } .btn-2:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #072c34; position: absolute; bottom: 0; left: 0; } .btn-2:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #072c34 transparent transparent; position: absolute; top: 0; right: 0; } .btn-2:hover { color: #c2d2d5; } .btn-2:hover:before { border-width: 165px 0 0 165px; } .btn-2:hover:after { border-width: 0 165px 165px 0; } .btn-2:active { background: #0c4a57; } .btn-3 { color: #c45561; } .btn-3:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #6f2129; position: absolute; bottom: 0; left: 0; } .btn-3:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #6f2129 transparent transparent; position: absolute; top: 0; right: 0; } .btn-3 span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #6f2129 transparent; position: absolute; right: 0; bottom: 0; } .btn-3 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #6f2129 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-3:hover { color: #eecdd1; } .btn-3:hover:before { border-width: 165px 0 0 165px; } .btn-3:hover:after { border-width: 0 165px 165px 0; } .btn-3:hover span:before { border-width: 0 0 165px 165px; } .btn-3:hover span:after { border-width: 165px 165px 0 0; } .btn-3:active { background: #b93745; } .btn-4 { color: #7d8d5c; } .btn-4:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #3d4926 transparent transparent; position: absolute; top: 0; right: 0; } .btn-4:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #3d4926; position: absolute; bottom: 0; left: 0; } .btn-4:before, .btn-4:after { border-color: #3d4926; } .btn-4 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #3d4926 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-4 span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #3d4926 transparent; position: absolute; right: 0; bottom: 0; } .btn-4 span:before, .btn-4 span:after { border-color: #3d4926; } .btn-4:hover { color: #d9decf; } .btn-4:hover:before { border-width: 20px 62.5px; } .btn-4:hover:after { border-width: 20px 62.5px; } .btn-4:hover span:before { border-width: 20px 62.5px; } .btn-4:hover span:after { border-width: 20px 62.5px; } .btn-4:active { background: #66793f; } .btn-5 { color: #2a4770; } .btn-5:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #021734 transparent transparent; position: absolute; top: 0; right: 0; } .btn-5:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #021734; position: absolute; bottom: 0; left: 0; } .btn-5:hover { color: #c0c9d5; } .btn-5:hover:before, .btn-5:hover:after { border-width: 80px 262.5px; } .btn-5:active { background: #042757; } .btn-6 { color: #a751d0; } .btn-6 span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background: #5b1e78; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.4s, height 0.4s; transition: width 0.4s, height 0.4s; z-index: -1; } .btn-6:hover { color: #e5ccf1; } .btn-6:hover span { width: 562.5px; height: 562.5px; } .btn-6:active { background: #9832c8; } .btn-7 { color: #41c46a; } .btn-7:before, .btn-7:after, .btn-7 span:before, .btn-7 span:after { content: ''; position: absolute; top: 0; width: 63.5px; height: 0; background: #136f30; } .btn-7:before { left: 0; } .btn-7:after { left: 125px; } .btn-7 span:before, .btn-7 span:after { top: auto; bottom: 0; } .btn-7 span:before { left: 62.5px; } .btn-7 span:after { left: 187.5px; } .btn-7:hover { color: #c7eed3; } .btn-7:hover:before, .btn-7:hover:after, .btn-7:hover span:before, .btn-7:hover span:after { height: 80px; } .btn-7:active { background: #1fb950; } .btn-8 { color: #377660; } .btn-8:before, .btn-8:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: #0c3829; } .btn-8:after { top: auto; bottom: 0; } .btn-8:hover { color: #c4d7d0; } .btn-8:hover:before, .btn-8:hover:after { height: 40px; } .btn-8:active { background: #145e44; } .btn-9 { color: #9b5097; } .btn-9:before, .btn-9:after, .btn-9 span:before, .btn-9 span:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: rgba(82, 29, 80, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .btn-9:after, .btn-9 span:before { top: auto; bottom: 0; } .btn-9 span:before, .btn-9 span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-9:hover { color: #e2cce1; } .btn-9:hover:before, .btn-9:hover:after, .btn-9:hover span:before, .btn-9:hover span:after { height: 80px; } .btn-9:active { background: #893185; } .btn-10 { color: #4ab36a; } .btn-10:before, .btn-10:after, .btn-10 span:before, .btn-10 span:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: rgba(25, 99, 48, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .btn-10:after, .btn-10 span:before { left: auto; right: 0; } .btn-10 span:before, .btn-10 span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-10:hover { color: #cae9d3; } .btn-10:hover:before, .btn-10:hover:after, .btn-10:hover span:before, .btn-10:hover span:after { width: 250px; } .btn-10:active { background: #2aa550; } @-webkit-keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @-webkit-keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } .btn-11 { position: relative; color: #9248bc; } .btn-11:before, .btn-11:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background: #7f28b0; border-radius: 50%; } .btn-11:before { left: -20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* animation: criss-cross-left 0.8s reverse; */ } .btn-11:after { right: -20px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); /* animation: criss-cross-right 0.8s reverse; */ } .btn-11:hover:before, .btn-11:hover:after { /* @include size($btn-width); */ } .btn-11:hover:before { -webkit-animation: criss-cross-left 0.8s both; animation: criss-cross-left 0.8s both; } .btn-11:hover:after { -webkit-animation: criss-cross-right 0.8s both; animation: criss-cross-right 0.8s both; } </style> </head> <body> <div class="centerer"> <h1>Just Some More</h1> <h1>Button Hover Effects</h1> <h4>By: <a href="http://kylebrumm.com">Kyle Brumm</a></h4> <div class="wrap"> <a class="btn-0" href="#">Swipe</a> <a class="btn-1" href="#">Diagonal Swipe</a> <a class="btn-1-2" href="#">Double Swipe</a> <a class="btn-2" href="#">Diagonal Close</a> <a class="btn-3" href="#"><span>Zoning In</span></a> <a class="btn-4" href="#"><span>4 Corners</span></a> <a class="btn-5" href="#">Slice</a> </div> <div class="wrap"> <a class="btn-6" href="#">Position Aware<span></span></a> <a class="btn-7" href="#"><span>Alternate</span></a> <a class="btn-8" href="#">Smoosh</a> <a class="btn-9" href="#"><span>Vertical Overlap</span></a> <a class="btn-10" href="#"><span>Horizontal Overlap</span></a> <a class="btn-11" href="#">Collision</a> </div> </div> <script src='http://zaole.net/sliding.js'></script> <script> $(function() { $('.btn-6').on('mouseenter', function(e) { var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; $(this).find('span').css({ top: relY, left: relX }); }).on('mouseout', function(e) { var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; $(this).find('span').css({ top: relY, left: relX }); }); $('[href=#]').click(function() { return false; }); }); //@ sourceURL=pen.js </script> <script> if(document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </body> </html>
用心努力学习才会有收获
既然选择远方,便只顾风雨兼程