/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0padding:0-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12pxfont-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333text-align: centerfont: 12px "微软雅黑"}
ul, ol, li {list-style-type:nonevertical-align:0}
a {outline-style:nonecolor:#535353text-decoration:none}
a:hover { color: #D40000text-decoration: none}
.clear{height:0overflow:hiddenclear:both}
.button {display: inline-blockzoom: 1*display: inlinevertical-align: baselinemargin: 0 2pxoutline: nonecursor: pointertext-align: centertext-decoration: nonefont: 14px/100% Arial, Helvetica, sans-serifpadding:0.25em 0.6em 0.3emtext-shadow: 0 1px 1px rgba(0,0,0,.3)-webkit-border-radius: .5em-moz-border-radius: .5emborder-radius: .5em-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2)-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2)box-shadow: 0 1px 2px rgba(0,0,0,.2)
}
.red {color: #fadddeborder: solid 1px #980c10background: #d81b21background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715))background: -moz-linear-gradient(top, #ed1c24, #A51715)filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317')
}
.red:hover { background: #b61318background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115))background: -moz-linear-gradient(top, #c9151b, #a11115)filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115')color:#fff}
.red:active {color: #de898cbackground: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24))background: -moz-linear-gradient(top, #aa1317, #ed1c24)filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24')}
.cor_bs,.cor_bs:hover{color:#ffffff}
.keBody{background:url(../images/bodyBg.jpg) repeat #333}
.keTitle{height:100pxline-height:100pxfont-size:30pxfont-family:'微软雅黑'color:#FFFtext-align:centerbackground:url(../images/bodyBg3.jpg) repeat-x bottom leftfont-weight:normal}
.kePublic{background:#dfdfdfpadding:50px}
.keBottom{color:#FFFpadding-top:25pxline-height:28pxtext-align:centerfont-family:'微软雅黑'background:url(../images/bodyBg2.jpg) repeat-x top leftpadding-bottom:25px}
.keTxtP{font-size:16pxcolor:#ffffff}
.keUrl{color:#FFFfont-size:30px}
.keUrl:hover{ text-decoration: underlinecolor: #FFF}
.mKeBanner,.mKeBanner div{text-align:center}
/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
body {
-webkit-backface-visibility: hidden
}
.demo {
margin: 0px auto
text-align:center
}
.nav li{
position: relative
display: inline-block
margin-left: -50px
-webkit-transition: all 0.4s linear
-moz-transition: all 0.4s linear
-o-transition: all 0.4s linear
-ms-transition: all 0.4s linear
transition: all 0.4s linear
}
.nav li a {
display: inline-block
width: 120px
height: 120px
padding: 30px
border-radius: 50%
border-width: 8px
border-style: solid
}
.nav li:hover {
z-index: 11
-webkit-transform: scale(1.1)
-moz-transform: scale(1.1)
-o-transform: scale(1.1)
-ms-transform: scale(1.1)
transform: scale(1.1)
}
.nav li:hover a {
text-decoration: none
}
.nav li:hover span {
-webkit-transition: all 0.4s linear
-moz-transition: all 0.4s linear
-o-transition: all 0.4s linear
-ms-transition: all 0.4s linear
transition: all 0.4s linear
-webkit-animation: moveFromBottom 0.3s ease
-moz-animation: moveFromBottom 0.3s ease
-o-animation: moveFromBottom 0.3s ease
-ms-animation: moveFromBottom 0.3s ease
animation: moveFromBottom 0.3s ease
}
.nav li:nth-child(1) a {
color: #4d9683
text-shadow: 0 1px 0 #9de3cf
border-color: #549e89
background-color: #51c9a7
}
.nav li:nth-child(2) a {
color: #be607e
text-shadow: 0 1px 0 #de8ba5
border-color: #e499b0
background-color: #e67b9c
}
.nav li:nth-child(3) a {
color: #5e9eb4
text-shadow: 0 1px 0 #adddec
border-color: #a2cfde
background-color: #7ec9e3
}
.nav li:nth-child(4) a {
color: #ba9d5e
text-shadow: 0 1px 0 #f5e0ad
border-color: #dcc999
background-color: #f0cd78
}
.nav li:nth-child(5) a {
color: #b468a2
text-shadow: 0 1px 0 #e8acd8
border-color: #d8abcd
background-color: #dd91cb
}
.nav li:nth-child(1):hover a {
color: #0f775c
text-shadow: 0 1px 0 #81e6c9
border-color: #0a8462
background-color: #00c18c
}
.nav li:nth-child(2):hover a {
color: #b12a55
text-shadow: 0 1px 0 #ff95b7
border-color: #ba335c
background-color: #ea5180
}
.nav li:nth-child(3):hover a {
color: #2883a2
text-shadow: 0 1px 0 #9cdef2
border-color: #4397b3
background-color: #55c1e5
}
.nav li:nth-child(4):hover a {
color: #ab8228
text-shadow: 0 1px 0 #ffe199
border-color: #b08f3e
background-color: #f8c64d
}
.nav li:nth-child(5):hover a {
color: #a33689
text-shadow: 0 1px 0 #ec97d6
border-color: #b7569f
background-color: #dd70c3
}
.nav span {
display: block
line-height:70px
font-size: 30px
font-style: normal
}
.nav span:before {
display: block
}
.nav li:nth-child(1) span:before {
content: "home"
}
.nav li:nth-child(2) span:before {
content: "phone"
}
.nav li:nth-child(3) span:before {
content: "wifi"
}
.nav li:nth-child(4) span:before {
content: "setting"
}
.nav li:nth-child(5) span:before {
content: "twitter"
}
@-webkit-keyframes moveFromBottom {
from {
-webkit-transform: translateY(120%) scale(0.5)
opacity: 0
}
to {
-webkit-transform: translateY(0%) scale(1)
opacity: 1
}
}
@-moz-keyframes moveFromBottom {
from {
-moz-transform: translateY(120%) scale(0.5)
opacity: 0
}
to {
-moz-transform: translateY(0%) scale(1)
opacity: 1
}
}
@-ms-keyframes moveFromBottom {
from {
-ms-transform: translateY(120%) scale(0.5)
opacity: 0
}
to {
-ms-transform: translateY(0%) scale(1)
opacity: 1
}
}
@-o-keyframes moveFromBottom {
from {
-o-transform: translateY(120%) scale(0.5)
opacity: 0
}
to {
-o-transform: translateY(0%) scale(1)
opacity: 1
}
}
@keyframes moveFromBottom {
from {
transform: translateY(120%) scale(0.5)
opacity: 0
}
to {
transform: translateY(0%) scale(1)
opacity: 1
}
}
.nav span:before {
font-family: 'LigatureSymbols'
text-rendering: optimizeLegibility
-webkit-font-smoothing: antialiased
-moz-font-smoothing: antialiased
-ms-font-smoothing: antialiased
-o-font-smoothing: antialiased
font-smoothing: antialiased
-webkit-font-feature-settings: "liga" 1, "dlig" 1
-moz-font-feature-settings: "liga=1, dlig=1"
-ms-font-feature-settings: "liga" 1, "dlig" 1
font-feature-settings: "liga" 1, "dlig" 1
font-size: 80px
}
@font-face {
font-family: 'LigatureSymbols'
src: url('../font/LigatureSymbols-2.05.eot')
src: url('../font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('../font/LigatureSymbols-2.05.woff') format('woff'),
url('../font/LigatureSymbols-2.05.ttf') format('truetype'),
url('../font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg')
font-weight: normal
font-style: normal
}
/* 效果CSS结束 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停效果</title>
<style type="text/css">
*{
margin: 0
padding: 0
}
body{
background-color: #000
}
a{
width: 200px
height: 50px
display: block
text-align: center
line-height: 50px
text-decoration: none
position: absolute
top: 50%
left: 50%
transform: translate(-50%,-50%)
font-size: 24px
font-weight: bold
color: white
border: 1px solid white
overflow: hidden
}
a::before{
content: ""
position: absolute
top: 0
left: -100%
width: 100%
height: 100%
background-image: linear-gradient(60deg,transparent,rgba(146,148,248,.4),transparent)
transition: all 0.5s
}
a:hover::before{
left: 100%
}
a:hover{
box-shadow: 0 2px 10px 8px rgba(146,148,248,.4)
}
</style>
</head>
<body>
<a href="#">鼠标悬停效果</a>
</body>
</html>
CSS+HTML<悬停下划线效果>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
display: flex
height: 100vh
justify-content: center
align-items: center
}
ul {
padding: 0
margin: 0
list-style-type: none
}
ul li{
padding: 5px 0
}
ul li a {
position: relative
display: inline-block
text-decoration: none
color: #3a3a3a
/* 转大写 */
text-transform: uppercase
padding: 4px 0
transition: 0.5s
font-weight: bold
}
ul li a::after {
position: absolute
content: ""
width: 100%
height: 3px
top: 100%
left: 0
background: #347cdb
transition: transform 0.5s
transform: scaleX(0)
transform-origin: right
}
ul li a:hover {
color: #585858
text-shadow: 0 0 10px #ccc
}
ul li a:hover::after {
transform: scaleX(1)
transform-origin: left
}
</style>
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">archives</a></li>
<li><a href="#">tags</a></li>
<li><a href="#">categories</a></li>
<li><a href="#">about</a></li>
</ul>
</body>
</html>
