## 使用方法 1.删除`/usr/themes/handsome/assets/css/handsome.min.css`下原超链接CSS： ``` .comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover { color: #222; border-bottom-color: #222 } .comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) { color: #3f88bf; border-bottom-color: #222; border-bottom: 1px solid #3f88bf; word-wrap: break-word; word-break: break-all } ``` 2.添加如下CSS： ``` /*超链接特效*/ .comment-content-true a:not(.light-link):not(.nav-link), .wrapper-lg .entry-content a:not(.light-link):not(.nav-link) { position: relative; margin: auto 4px; color: #23b7e5; -webkit-transition: color 0.3s; transition: color 0.3s; -webkit-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 100%; perspective-origin: 50% 100%; word-wrap: break-word; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: inherit; width: inherit; } .comment-content-true a:not(.light-link):not(.nav-link):hover, .comment-content-true a:not(.light-link):not(.nav-link):focus, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus { color: #fff; } .comment-content-true a:not(.light-link):not(.nav-link)::before, .comment-content-true a:not(.light-link):not(.nav-link)::after, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after { position: absolute; top: 0; left: -4px; z-index: -1; box-sizing: content-box; padding: 0 4px; width: 100%; height: 100%; content: ''; } .comment-content-true a:not(.light-link):not(.nav-link)::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before { background-color: #23b7e5; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .comment-content-true a:not(.light-link):not(.nav-link):hover::before, .comment-content-true a:not(.light-link):not(.nav-link):focus::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus::before { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .comment-content-true a:not(.light-link):not(.nav-link)::after, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after { border-bottom: 1px solid #23b7e5; } .content-copyright { overflow: hidden; } ```