【CSS3特效】鼠标悬停动画

2024-04-27 15:14:54

字体：大中小

来源：转载

供稿：网友

这里写图片描述

演示地址：点我

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3鼠标悬停动画</title> <style type="text/css"> body { margin: 200px; text-align: center; font: 1em "微软雅黑"; } /*去掉li的点或者顺序*/ ul,ol,li { list-style-type: none; vertical-align: 0 } /*去掉超链接底下的横线*/ a { color: #535353; text-decoration: none } /*添加滑过a标签改变其文字颜色*/ a:hover { color: #D40000; text-decoration: none } /* 效果CSS开始 */ /*先让里浮动到一起*/ .nav li { position: relative; display: inline-block; margin-left: -50px; transition: all 0.4s linear; } /*把a标签画成圆圈*/ .nav li a { display: inline-block; width: 90px; height: 90px; padding: 30px; border-radius: 50%; border-width: 8px; border-style: solid; } /*滑过li进行放大并把它放到最前面*/ .nav li:hover { z-index: 11; transform: scale(1.1); } /*.nav li:hover a { text-decoration: none; }*/ .nav li:hover span { transition: all 0.4s linear; 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: 90px; font-size: 30px; font-style: normal; position: relative; /*width: 100px; height: 90px; */ } /*可以插入一些图片或者小图标，我就不插入了，你们可以自己试试*/ /*.nav span:before { display: block; position: relative; margin: auto; } .nav li:nth-child(1) span:before { content: ""; width: 0px; height: 0px; border-right: 30px solid transparent; border-top: 30px solid red; border-left: 30px solid red; border-bottom: 30px solid red; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }*/ @keyframes moveFromBottom { from { transform: translateY(120%) scale(0.5); opacity: 0; } to { transform: translateY(0%) scale(1); opacity: 1; } } </style> </head> <body> <div class="page"> <section class="demo"> <nav class="nav"> <ul> <li> <a href=""><span>Home</span></a> </li> <li> <a href=""><span>Phone</span></a> </li> <li> <a href=""><span>Wifi</span></a> </li> <li> <a href=""><span>Setting</span></a> </li> <li> <a href=""><span>Twitter</span></a> </li> </ul> </nav> </section> </div> </body></html>

上一篇：jQuery-级联表实现

下一篇：arrow function