首页| 新闻| 娱乐| 游戏| 科普| 文学| 编程| 系统| 数据库| 建站| 学院| 产品| 网管| 维修| 办公| 热点
hover 鼠标放上去的效果
看到一个网站介绍了很多的例子http://tympanus.net/Development/CreativeLinkEffects/
然后学着把上面的例子全部写了一下
其实都比较简单 除了3d旋转的那2个可能麻烦点
嗯 记录下这些例子,方便以后遗忘了,回头来看看咯
例子集合
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>测试咯</title> </head> <body> <style> *{padding:0; margin:0; font: 18px tahoma,arial,'Hiragino Sans GB',/5b8b/4f53,sans-serif;} .wrap{width: 1000px; margin: 50px auto;} ul{list-style: none; overflow: hidden;} ul li{float: left; width: 200px; text-align: center; padding:10px; } a{color: #fff; text-decoration:none;} .mt50{ margin-top: 50px;} #demo1 {background: #435a6b; padding: 50px; } #demo1 a::before{content: "["; opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); display: inline-block; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } #demo1 a::after{content: "]";opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); display: inline-block; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } #demo1 a:hover::before{ opacity: 1; -webkit-transform: translateX(-5px); transform: translateX(-5px);-moz-transition:translateX(-5px); } #demo1 a:hover::after{ opacity: 1; -webkit-transform: translateX(5px); transform: translateX(5px);-moz-transition:translateX(5px); } #demo2 {background: #0e83cd; padding: 50px;font-size:18px;} #demo2 a {-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;line-height: 44px; display: inline-block;} #demo2 span{ position: relative; display: inline-block;padding: 0 10px;line-height:44px;background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-style: <a href="http://pr.vevb.com/">PR</a>eserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } #demo2 span:hover{ -webkit-transform: rotateX(90deg) translateY(-12px); -moz-transform: rotateX(90deg) translateY(-12px); transform: rotateX(90deg) translateY(-12px); } #demo2 span::before{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0965a0; content: attr(data-hover); line-height: 44px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } #demo2 span:hover::before{ background: #2195de; } #demo3 {background: #f19f0f; padding: 50px;} #demo3 a{ display: inline-block; position: relative; font-size:20px; } #demo3 a::after{ position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background:#F7F7F7; opacity : 0; content: ''; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } #demo3 a:hover::after{ height: 4px; opacity:0.4; -webkit-transform: translateY(2px); -moz-transform: translateY(2px); transform: translateY(2px); } #demo4 {background:#cd4436; padding: 50px;} #demo4 a{ overflow: hidden; display: inline-block; position: relative; } #demo4 a span{ position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } #demo4 a span::after{ position: absolute; top : 100%; left: 0; font-weight:bold; content: attr(data-hover); } #demo4 a span:hover{ -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } #demo5{background:#ecf0f1; padding: 50px;} #demo5 a{color: #566473; display: inline-block; font-weight: bold; position: relative; padding:10px 5px;} #demo5 a::after{ height: 4px; left: 0; width: 100%; position: absolute; top:100%; background: #566473; content: ""; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } #demo5 a::before{ height: 4px; left: 0; width: 100%; position: absolute; top:100%; background: #566473; content: ""; opacity:0; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); -webkit-transition:opacity 0.3s,top 0.3s, -webkit-transform 0.3s; -moz-transition:opacity 0.3s,top 0.3s,-moz-transform 0.3s; transition:opacity 0.3s,top 0.3s,transform 0.3s; } #demo5 a:hover::after{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #demo5 a:hover::before{ top:0%; opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #demo6{background:#16a085; padding: 50px; } #demo6 a{ overflow: hidden; display: inline-block; } #demo6 a span{ position: relative; display: inline-block; background: #0f7c67; color: #fff; padding: 10px 20px; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span::before{ padding: 10px 20px; position: absolute; width: 100%; left: -100%; top:0; background:#fff; color:#0f7c67; content:attr(data-hover); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span:hover{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } #demo7{ background:#0e83cd;padding: 50px; } #demo7 li{text-align: left;} #demo7 a{ overflow: hidden; display: inline-block; position: relative; color: #0972b4 } #demo7 a::before{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; height: 100%; color:#fff; content: attr(data-hover); -webkit-transition:width 0.4s -moz-transition:width 0.4s; transition:width 0.4s; } #demo7 a:hover::before{ width : 100%; } #demo8{ background:#2ac56c;padding: 50px; } #demo8 a{ position: relative; color: #CCCCCC; } #demo8 a::before{ position:absolute; left: 0; top:0; color: #fff; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } #demo8 a:hover::before{ -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); opacity: 0; } #demo9{ background:#0e83cd;padding: 50px; } #demo9 a {color:#10649b; position: relative;} #demo9 a::before{ overflow: hidden; position: absolute; height: 100%; top:0; left:0; content: attr(data-hover); color: #fff; -webkit-transition:height 0.3s,opacity 0.3s; -moz-transition: height 0.3s,opacity 0.3s; transition:height 0.3s,opacity 0.3s; } #demo9 a::after{ width: 100%; height: 2px; background: #fff; position: absolute; bottom: -15px; left: 0; opacity: 0; content: ''; -webkit-transition: bottom 0.3s, opacity 0.3s; -moz-transition: bottom 0.3s, opacity 0.3s; transition: bottom 0.3s, opacity 0.3s; } #demo9 a:hover::before{ height: 0%; opacity:0; } #demo9 a:hover::after{ bottom: -8px; opacity:1; } </style> <div class="wrap"> <div id="demo1"> <ul > <li><a href="<a href="http://www.vevb.com/article.asp?typeid=160">java</a>scr<a href="http://ip.vevb.com/">ip</a>t:;">蚂蚁蚂蚁蚂蚁</a></li> <li><a href="<a href="http://www.vevb.com/article.asp?typeid=36">Javascript</a>:;">蝮蛇蝮蛇蝮蛇</a></li> <li><a href="javascript:;">伐木机伐木机</a></li> &<br></SPAN> </div> </div> <div class=page1> <p align="center" class="pageLink"></p> </div> <div class="fenxiang"> <!--分享 --> <div style="text-align:left">上一篇：<a href='/wen/2024/04-30/998052.html'>为网页设置背景音乐</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/04-30/998054.html'>tips 前端 背景与元素的透明和模糊</a></div> <br> <script src=/d/js/acmsd/gao21.js></script> <!--分享 --> </div> <div class="pinglun"> <!-- 评论 --> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>发表评论</strong></td> <td align="right"><a href="/e/pl/?classid=279&id=998053">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=279&id=998053&down=2"></script></span>条评论</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用户名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密码: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名发表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">
Intel工程样品CPU的识别方法
图解CMOS路线和硬盘光驱跳线的
硬盘分区如何设置准确的分区空间
回眸一笑百魅生，六宫粉黛无颜色
岁月静美，剪一影烟雨江南
芜湖有个“松鼠小镇”
小满：小得盈满，一切刚刚好！
一串串晶莹剔透的葡萄，像一颗颗宝石挂在藤
正宗老北京脆皮烤鸭
人逢知己千杯少，喝酒搞笑图集
搞笑试卷，学生恶搞答题
新闻热点
疑难解答
图片精选
微信小程序各种坑？填坑tip
web前端如何让网页布局稳定性和标
CSS定位深入理解 完全掌握CSS定位
彻底理解浮动float CSS浮动详解 清
网友关注
