CSS3动画菜单当前页面

作者: ࿏自ོ༾由ོ༽人͙⃡⌇
发布时间: 2024-01-14 03:02:40 (7月前)
转自：

3 条回复

0#
回复此人
Coolkid | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $('.ca-menu li').click(function() { $('.ca-menu li').removeClass("active"); $(this).addClass("active"); }); </code> </pre> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .active { background-color: red!important; } @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .ca-menu { padding: 0 0 0 48px; margin: 20px auto; width: 1020px; } .ca-menu li { width: 189px; height: 189px; border: 10px solid #f6f6f6; overflow: hidden; position: relative; float: left; background: #fff; margin-left: -48px; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-border-radius: 125px; -moz-border-radius: 125px; border-radius: 125px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:last-child { margin-right: 0px; } .ca-menu li a { text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; } .ca-icon { font-family: 'WebSymbolsRegular', cursive; font-size: 40px; color: #f6f6f6; ; line-height: 60px; position: absolute; width: 100%; height: 60px; left: 0px; top: 30px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-main { font-size: 24px; position: absolute; top: 110px; height: 80px; width: 170px; left: 50%; margin-left: -85px; opacity: 0.8; text-align: center; color: #555; } .ca-sub { display: none; } .ca-menu li:hover .ca-menu li. { border-color: #333; z-index: 999; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .ca-menu li:hover .ca-icon { color: #000; font-size: 60px; text-shadow: 0px 0px 1px #000; -webkit-animation: moveFromBottom 300ms ease; -moz-animation: moveFromBottom 300ms ease; -ms-animation: moveFromBottom 300ms ease; } .ca-menu li:hover .ca-main { color: #000; -webkit-animation: moveFromBottom 500ms ease; -moz-animation: moveFromBottom 500ms ease; -ms-animation: moveFromBottom 500ms ease; } @-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(200%) scale(0.5); opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1; } } @-moz-keyframes moveFromBottom { from { -moz-transform: translateY(200%) scale(0.5); opacity: 0; } to { -moz-transform: translateY(0%) scale(1); opacity: 1; } } @-ms-keyframes moveFromBottom { from { -ms-transform: translateY(200%) scale(0.5); opacity: 0; } to { -ms-transform: translateY(0%) scale(1); opacity: 1; } } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ca-menu" style="float:left;"> <li class="active"> <a href="#"> <span class="ca-icon">F</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon">H</span> <div class="ca-content"> <h2 class="ca-main">Creative Storytelling</h2> <h3 class="ca-sub">Advanced use of technology</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon" id="heart">N</span> <div class="ca-content"> <h2 class="ca-main">Infographical Education</h2> <h3 class="ca-sub">Understanding visually</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon">K</span> <div class="ca-content"> <h2 class="ca-main">Sophisticated Team</h2> <h3 class="ca-sub">Professionals in action</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon">L</span> <div class="ca-content"> <h2 class="ca-main">Unconditional Support</h2> <h3 class="ca-sub">24/7 for you needs</h3> </div> </a> </li> </ul> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
张三岁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以这样做一个先生： </p> <P> 请加上所有 <code> li </code> 喜欢这个方法代码： </p> <pre> <code> <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'"> </code> </pre> <P> 并添加此代码您的文件 </p> <pre> <code> <ul class="ca-menu"> <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'"> <a href="indexenactive.php?menu=home"> <span class="ca-icon">F</span> <div class="ca-content"> <h2 class="ca-main">Home</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#00FF00'" onmouseout="this.style.backgroundColor='Gray'"> <a href="indexenactive.php?menu=research"> <span class="ca-icon">L</span> <div class="ca-content"> <h2 class="ca-main">Research</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#FFFF00'" onmouseout="this.style.backgroundColor='orange'"> <a href="indexenactive.php?menu=teaching"> <span class="ca-icon" id="heart">U</span> <div class="ca-content"> <h2 class="ca-main">Teaching </h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#FF00FF'" onmouseout="this.style.backgroundColor='#00FF00'"> <a href="indexenactive.php?menu=publication"> <span class="ca-icon">a</span> <div class="ca-content"> <h2 class="ca-main">Publications</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#C0C0C0'" onmouseout="this.style.backgroundColor='#00FFFF'"> <a href="indexenactive.php?menu=projects"> <span class="ca-icon">`</span> <div class="ca-content"> <h2 class="ca-main">Projects</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'"> <a href="indexenactive.php?menu=contact"> <span class="ca-icon">@</span> <div class="ca-content"> <h2 class="ca-main">Contact</h2> <h3 class="ca-sub"></h3> </div> </a> </li> </ul> </code> </pre> <P> <a href="http://jsfiddle.net/ivinraj/Lzm5hgwL/" rel="nofollow"> DEMO FIDDLE </A> </p> </DIV>

编辑

登录后才能参与评论