css鼠标悬停动画

2020-03-24 18:24:06

字体：大中小

来源：转载

供稿：网友

css实现鼠标悬停动画，免费提供源码，可以研究参考或者拿去使用~~

JB58}STY)K7257O2A78$TBG.png

代码：

 !DOCTYPE html  html  head  meta charset= UTF-8  title PHP --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 /*去掉超链接底下的横线*/ 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 >免费拿去研究吧！更多好的源码尽在PHP ，关注我们给你好看哦~
相关推荐：
用css实现圆形进度条
css 、jquery实现3d立体旋转
css实现会动的猫脸
以上就是css鼠标悬停动画的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。