您的位置：360文档中心› 实用的CSS鼠标滑过按钮特效(10种代码篇)

实用的CSS鼠标滑过按钮特效(10种代码篇)

合集下载

使用HTML+CSS实现鼠标划过的二级菜单栏的示例

使用HTML+CSS实现鼠标划过的二级菜单栏的示例

使⽤HTML+CSS实现⿏标划过的⼆级菜单栏的⽰例本⽂介绍了使⽤HTML+CSS实现⿏标划过的⼆级菜单栏的⽰例，分享给⼤家，具体如下：先上效果图：1、⿏标没在上⾯2、⿏标放在⼀级菜单上，展开⼆级菜单3、⿏标放在⼆级菜单上代码：<html><head><title>⼆级菜单测试</title><meta charset="utf-8"><style type="text/css">/*为了使菜单居中*/body {padding-top:100px;text-align:center;}/* -------------菜单css代码----------begin---------- */.menuDiv {border: 2px solid #aac;overflow: hidden;display:inline-block;}/* 去掉a标签的下划线 */.menuDiv a {text-decoration: none;}/* 设置ul和li的样式 */.menuDiv ul , .menuDiv li {list-style: none;margin: 0;padding: 0;float: left;}/* 设置⼆级菜单绝对定位，并隐藏 */.menuDiv > ul > li > ul {position: absolute;display: none;}/* 设置⼆级菜单的li的样式 */.menuDiv > ul > li > ul > li {float: none;}/* ⿏标放在⼀级菜单上，显⽰⼆级菜单 */ .menuDiv > ul > li:hover ul {display: block;}/* ⼀级菜单 */.menuDiv > ul > li > a {width: 120px;line-height: 40px;color: black;background-color: #cfe;text-align: center;border-left: 1px solid #bbf;display: block;}/* 在⼀级菜单中，第⼀个不设置左边框 */ .menuDiv > ul > li:first-child > a {border-left: none;}/* 在⼀级菜单中，⿏标放上去的样式 */.menuDiv > ul > li > a:hover {color: #f0f;background-color: #bcf;}/* ⼆级菜单 */.menuDiv > ul > li > ul > li > a {width: 120px;line-height: 36px;color: #456;background-color: #eff;text-align: center;border: 1px solid #ccc;border-top: none;display: block;}/* 在⼆级菜单中，第⼀个设置顶边框 */.menuDiv > ul > li > ul > li:first-child > a { border-top: 1px solid #ccc;}/* 在⼆级菜单中，⿏标放上去的样式 */.menuDiv > ul > li > ul > li > a:hover {color: #a4f;background-color: #cdf;}/* -------------菜单css代码----------end---------- */</style></head><body><!-- -------菜单html代码---------begin------- --><div class="menuDiv"><ul><li><a href="#">菜单⼀</a><ul><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li></ul></li><li><a href="#">菜单⼆</a><ul><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li></ul></li><li><a href="#">菜单三</a><ul><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li></ul></li><li><a href="#">菜单四</a></li><li><a href="#">菜单五</a><ul><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li></ul></li></ul></div><!-- -------菜单html代码---------end------- --></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

创建漂亮的 CSS 按钮的 10 个代码片段

创建漂亮的 CSS 按钮的 10 个代码片段

创建漂亮的 CSS 按钮的 10 个代码片段如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。

在本文中，我们从 CodePen 上收集了10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。

网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。

通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。

1. Plastic Buttons这组按钮相当的简洁、干净。

由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。

所以，你可以轻松地重新调整或更换它们。

而利用纯 CSS 的实现方式，或许它也是网上最简洁、干净的按钮样式之一。

代码地址：【传送门】2. Cool Buttons这是一组由 Felipe Marcos 制作的酷炫按钮。

与上面的塑料按钮略有不同，但它们也易于使用。

虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。

你可以从 6 款默认设计的颜色中随意挑选，或者你也可以定制自己喜欢的颜色、尺寸与样式。

由于根据 CSS 类名进行分类，所以你可以在一个类上设置默认的按钮样式以及颜色。

代码地址：【传送门】3. Google ButtonsGoogle 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按钮样式，而开发者 Tim Wagner 在此 Pen中克隆了这些风格。

受 Google 设计的启发，利用纯 CSS3 实现了这些看上去很酷的按钮。

这还有个与此相似的示例，它是由 Monkey Raptor 制作的扩展按钮，他为这些按钮进行了一些其他的混合。

代码地址：【传送门】4. Bunch-o-Buttons这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。

它拥有多种颜色以及不同的款式。

这个按钮集合设计的独特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的样式与扁平化样式间任意切换。

css7种漂亮的按钮hover效果

css7种漂亮的按钮hover效果

css7种漂亮的按钮hover效果没有上效果图，需要⾃⼰运⾏1、第⼀种<button>123</button><!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#loading-btn {display: flex;align-items: center;justify-content: center;height: 100vh;}button {background: transparent;border: 0;border-radius: 0;text-transform: uppercase;font-weight: bold;font-size: 20px;padding: 15px 50px;position: relative;}button:before {transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);content: '';width: 1%;height: 100%;background: #ff5964;position: absolute;top: 0;left: 0;}button span {mix-blend-mode: darken;}button:hover:before {background: #ff5964;width: 100%;}</style></head><body><div id="loading-btn"><button><span>Hover me</span></button></div></body></html>2、第⼆种<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#neon-btn {display: flex;align-items: center;justify-content: space-around;height: 100vh;background: #031628;}.btn {border: 1px solid;background-color: transparent;text-transform: uppercase;font-size: 14px;padding: 10px 20px;font-weight: 300;}.one {color: #4cc9f0;}.two {color: #f038ff;}.three {color: #b9e769;}.btn:hover {color: white;border: 0;}.one:hover {background-color: #4cc9f0;-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);-moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);}.two:hover {background-color: #f038ff;-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1); -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);}.three:hover {background-color: #b9e769;-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1); -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1); box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);}</style></head><body><div id="neon-btn"><button class="btn one">Hover me</button><button class="btn two">Hover me</button><button class="btn three">Hover me</button></div></body></html>3、第三种<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#draw-border {display: flex;align-items: center;justify-content: center;height: 100vh;}button {border: 0;background: none;text-transform: uppercase;color: #4361ee;font-weight: bold;position: relative;outline: none;padding: 10px 20px;box-sizing: border-box;}button::before, button::after {box-sizing: inherit;position: absolute;content: '';border: 2px solid transparent;width: 0;height: 0;}button::after {bottom: 0;right: 0;}button::before {top: 0;left: 0;}button:hover::before, button:hover::after {width: 100%;height: 100%;}button:hover::before {border-top-color: #4361ee;border-right-color: #4361ee;transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;}button:hover::after {border-bottom-color: #4361ee;border-left-color: #4361ee;transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s; }</style></head><body><div id="draw-border"><button>Hover me</button></div></body></html>4、第四种<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#circle-btn {display: flex;align-items: center;justify-content: center;height: 100vh;}.btn-container {position: relative;}button {border: 0;border-radius: 50px;color: white;background: #5f55af;padding: 15px 20px 16px 60px;text-transform: uppercase;background: linear-gradient(to right, #f72585 50%, #5f55af 50%);background-size: 200% 100%;background-position: right bottom;transition:all 2s ease;}svg {background: #f72585;padding: 8px;border-radius: 50%;position: absolute;left: 0;top: 0%;}button:hover {background-position: left bottom;}</style></head><body><div id="circle-btn"><div class="btn-container"><!-- // 这⾥有⼀个svg元素 --><button>Hover me</button></div></div></body></html>5、第五种<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#border-btn {display: flex;align-items: center;justify-content: center;height: 100vh;}button {border: 0;border-radius: 10px;background: #2ec4b6;text-transform: uppercase;color: white;font-size: 16px;font-weight: bold;padding: 15px 30px;outline: none;position: relative;transition: border-radius 1s;-webkit-transition: border-radius 1s; }button:hover {border-bottom-right-radius: 50px; border-top-left-radius: 50px;border-bottom-left-radius: 10px; border-top-right-radius: 10px;}</style></head><body><div id="border-btn"><button>Hover me</button></div></body></html>6、第六种<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#frozen-btn {display: flex;align-items: center;justify-content: center;height: 100vh;}button {border: 0;margin: 20px;text-transform: uppercase;font-size: 20px;font-weight: bold;padding: 15px 50px;border-radius: 50px;color: white;position: relative;}button:before{content: '';display: block;background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%); background-size: 210% 100%;background-position: right bottom;height: 100%;width: 100%;position: absolute;top: 0;bottom:0;right:0;left: 0;border-radius: 50px;transition: all 1s;-webkit-transition: all 1s;}.green {background-image: linear-gradient(to right, #25aae1, #40e495);box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);}.purple {background-image: linear-gradient(to right, #6253e1, #852D91);box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);}.purple:hover:before {background-position: left bottom;}.green:hover:before {background-position: left bottom;}</style></head><body><div id="frozen-btn"><button class="green">Hover me</button><button class="purple">Hover me</button></div></body></html>7、第七种<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#shiny-shadow {display: flex;align-items: center;justify-content: center;height: 100vh;background: #1c2541;}button {border: 2px solid white;background: transparent;text-transform: uppercase;color: white;padding: 15px 50px;outline: none;overflow: hidden;position: relative;}span {z-index: 20;}button:after {content: '';display: block;position: absolute;left: -100px;background: white;width: 50px;height: 125px;opacity: 20%;transform: rotate(-45deg);}button:hover:after {left: 120%;transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1); }</style></head><body><div id="shiny-shadow"><button><span>Hover me</span></button></div></body></html>。

鼠标滑过小图显示大图预览效果(html代码,css样式,javascript)

鼠标滑过小图显示大图预览效果(html代码,css样式,javascript)
必须CSS样式
.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
*/
//--初始化变量--
var rT=true;//允许图像过渡
<div class="latestWeb">
<ul>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/01.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/01.jpg>')" onMouseOut="toolTip()"></a></div>
{
return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
return document.body.scrollLeft;
}
}
/*
渐变的弹出图片
使用方法：
将js包含在网页body的结束标签后
<!--把下面代码加到<head>与</head>之间-->

JS+CSS实现简单滑动门（滑动菜单）效果

JS+CSS实现简单滑动门（滑动菜单）效果

JS+CSS实现简单滑动门（滑动菜单）效果本⽂实例讲述了JS+CSS实现简单滑动门的⽅法。

分享给⼤家供⼤家参考。

具体如下：这是⼀款超简约设计的滑动门菜单，⿏标放到主菜单上，⾥⾯的内容会跟着变化，实际上本演⽰是⼀个范例，从代码中的注释你就能感觉到，每⼀步都有注释，对学习JavaScript和CSS都有帮助，也为你以后写出⽐这更漂亮、更实⽤的滑动门做铺垫。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>滑动门测试</title><style>#tab_container1{width:310px;text-align:left;border:1px solid #cccccc;background:url() repeat-x top;}.cls_tab_nav{height:24px;overflow:hidden;font-size:12px;background:url() repeat-x bottom; padding-left:10px;}.cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}.cls_tab_nav_li{background:url() no-repeat -70px 0;width:70px;height:24px;line-height:24px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;} .cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}.cls_tab_nav_li a{text-decoration:none;color:#000000;font-size:12px;}.cls_tab_body{border-top:none;min-height:175px;padding:10px;height:175px;}.cls_div{display:none;font-size:14px;}.cls_tab_nav_li_first a{color:#c80000;}</style></head><body><div id="tab_container1" ><div class="cls_tab_nav"><ul><li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">百货⼤楼</a></li><li class="cls_tab_nav_li"><a href="#">⼋⽅购物</a></li><li class="cls_tab_nav_li"><a href="#">商场三</a></li></ul></div><div class="cls_tab_body"><div class="cls_div" style="display:block;">百货⼤楼</div><div class="cls_div">⼋⽅购物</div><div class="cls_div">商场三</div></div></div></body></html><script type="text/javascript">try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}function $(element){if(arguments.length>1){for(var i=0,elements=[],length=arguments.length;i<length;i++)elements.push($(arguments[i]));return elements;}if(typeof element=="string")return document.getElementById(element);elsereturn element;}var Class={create:function(){return function(){this.initialize.apply(this,arguments);}}}Object.extend=function(destination,source){for(var property in source){destination[property]=source[property];}return destination;}var tabMenu=Class.create();tabMenu.prototype={initialize:function(container,selfOpt,otherOpt){this.container=$(container);var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});//⽤for循环得到objs数组,主要是为了兼容⾮IE浏览器把空⽩也当作⼦对象for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){if(this.container.childNodes[i].nodeType==1)objs.push(this.container.childNodes[i]);}var tabArray=objs[0].getElementsByTagName("li");//⽤for循环得到divArray数组,主要是为了兼容⾮IE浏览器把空⽩也当作⼦对象var divArray=new Array();for(i=0,length=objs[1].childNodes.length;i<length;i++){if(objs[1].childNodes[i].nodeType==1)divArray.push(objs[1].childNodes[i]);}for(i=0,length=tabArray.length;i<length;i++){tabArray[i].length=length;tabArray[i].index=i;tabArray[i].onmouseover=function(){//其它选项卡样式设置for(var j=0;j<this.length;j++){tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";for(var property in selfOptions){tabArray[j].firstChild.style[property]=otherOptions[property];}}//当前选项卡样式this.style.backgroundPosition="0 0";for(var property in selfOptions){this.firstChild.style[property]=selfOptions[property];}//隐藏其它选项卡for(j=0;j<this.length;j++){divArray[j].style.display="none";}//显⽰当前选项卡divArray[this.index].style["display"]="block";}}}}var tab1=new tabMenu("tab_container1",{fontSize:"12px",color:"#c80000",fontWeight:"bolder"},{fontWeight:"normal",color:"#000000"}); </script>希望本⽂所述对⼤家的JavaScript程序设计有所帮助。

【网页特效代码-鼠标特效】疯狂攻击鼠标

【网页特效代码-鼠标特效】疯狂攻击鼠标
}
}
function Split(){
Clrs=new Array('fff000','ffffff','ffa500')
var ntscp=yers,msie=document.all;
if (yers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left}
else
{ntscp['nsa'+i].top=divTop;ntscp['nsa'+i].left=divLeft}
function nsMouse(evnt){
xpos=evnt.pageX;ypos=evnt.pageY;
}
window.onMouseMove = nsMouse;
}
else if (document.all){
document.write('<div style="position:absolute;top:0px;left:0px">');
bomb();
else
{
if ((divLeft > xpos-speed/1.5) && (divLeft < xpos+speed/1.5) && (divTop >= ypos-speed/1.5) && (divTop <= ypos+speed/1.5))

鼠标特效代码及用法

鼠标特效代码及用法
7、流氓兔代码：
<STYLE>body{cursor:url(); }<流氓兔></STYLE>
8、小提琴代码:
<STYLE>body{CURSOR: url('/cursor/mouse001.cur');}</STYLE>
9、萨克斯代码:
<STYLE>body{CURSOR: url('/cursor/mouse051.cur');}</STYLE>
4、小白玫瑰花代码:
<STYLE> body{CURSOR:url('/cursor/mouse025.ani');}</STYLE>
5、小蜜蜂代码:
<STYLE>BODY{CURSOR:url('/cursor/mouse004.ani');}</STYLE>
6、小白兔代码:
<STYLE>body{CURSOR: url('/cursor/mouse031.ani ');}</STYLE>
鼠标特效代码及用法
全屏欣赏查看源文件代码
鼠标特效代码及用法
一、鼠标特效代码
1、小红旗代码：
<STYLE>body{CURSOR: url('/cursor/mouse038.ani');}</STYLE>
2、大红花代码：
<STYLE>body{cursor:url(/http%253A%252F%252Fplugin%252Esmileycentral%252Ecom%252Fassetserver%252Fcursor%252Ejhtml%253Fcur%253D1%2526i%253D9646a/image.gif); }</STYLE>

网页代码 鼠标特效

网页代码 鼠标特效

<div id="dot0" style="position: absolute; visibility: hidden; height: 13; width: 43; left: 47; top: 45"></div><div id="dot1" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#FF0000">有</font></dd></div><div id="dot2" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#FFCC00">弹</font></dd></div><div id="dot3" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#FFFF00">性</font></dd></div><div id="dot4" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#99FF00">的</font></dd></div><div id="dot5" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#0000FF">跟</font></dd></div><div id="dot6" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#6699FF">随</font></dd></div><div id="dot7" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#CC00FF">文</font></dd></div><div id="dot8" style="position: absolute; height: 11; width: 11;"><dd><font size="-1" color="#FF99FF">字</font></dd></div><script LANGUAGE="JavaScript"><!-- hide codevar nDots = 9;if (document.all&&window.print)document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"var Xpos = 0;var Ypos = 0;// fixed time step, no relation to real timevar DELTAT = .01;// size of one spring in pixelsvar SEGLEN = 10;// spring constant, stiffness of springsvar SPRINGK = 10;// all the physics is bogus, just picked stuff to// make it look okayvar MASS = 1;var GRAVITY = 50;var RESISTANCE = 10;// stopping criterea to prevent endless jittering // doesn't work when sitting on bottom since floor // doesn't push back so acceleration always as big // as gravityvar STOPVEL = 0.1;var STOPACC = 0.1;var DOTSIZE = 11;// BOUNCE is percent of velocity retained when// bouncing off a wallvar BOUNCE = 0.75;var isNetscape = navigator.appName=="Netscape";// always on for now, could be played with to// let dots fall to botton, get thrown, etc.var followmouse = true;var dots = new Array();init();function init(){var i = 0;for (i = 0; i < nDots; i++) {dots[i] = new dot(i);}if (!isNetscape) {// I only know how to read the locations of the// <LI> items in IE//skip this for now// setInitPositions(dots)}// set their positionsfor (i = 0; i < nDots; i++) {dots[i].obj.left = dots[i].X;dots[i].obj.top = dots[i].Y;}if (isNetscape) {// start right away since they are positioned// at 0, 0startanimate();} else {// let dots sit there for a few seconds// since they're hiding on the real bulletssetTimeout("startanimate()", 2000);}function dot(i){this.X = Xpos;this.Y = Ypos;this.dx = 0;this.dy = 0;if (isNetscape) {this.obj = eval("document.dot" + i);} else {this.obj = eval("dot" + i + ".style");}}function startanimate() {setInterval("animate()", 20);}// This is to line up the bullets with actual LI tags on the page// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why // Still doesn't work greatfunction setInitPositions(dots){// initialize dot positions to be on top// of the bullets in the <ul>var startloc = document.all.tags("LI");var i = 0;for (i = 0; i < startloc.length && i < (nDots - 1); i++) {dots[i+1].X = startloc[i].offsetLeftstartloc[i].offsetParent.offsetLeft - DOTSIZE;dots[i+1].Y = startloc[i].offsetTop +startloc[i].offsetParent.offsetTop + 2*DOTSIZE;}// put 0th dot above 1st (it is hidden)dots[0].X = dots[1].X;dots[0].Y = dots[1].Y - SEGLEN;}// just save mouse position for animate() to usefunction MoveHandler(e){Xpos = e.pageX;Ypos = e.pageY;return true;// just save mouse position for animate() to usefunction MoveHandlerIE() {Xpos = window.event.x + document.body.scrollLeft;Ypos = window.event.y + document.body.scrollTop;}if (isNetscape) {document.captureEvents(Event.MOUSEMOVE);document.onMouseMove = MoveHandler;} else {document.onmousemove = MoveHandlerIE;}function vec(X, Y){this.X = X;this.Y = Y;}// adds force in X and Y to spring for dot[i] on dot[j] function springForce(i, j, spring){var dx = (dots[i].X - dots[j].X);var dy = (dots[i].Y - dots[j].Y);var len = Math.sqrt(dx*dx + dy*dy);if (len > SEGLEN) {var springF = SPRINGK * (len - SEGLEN);spring.X += (dx / len) * springF;spring.Y += (dy / len) * springF;}}function animate() {// dots[0] follows the mouse,// though no dot is drawn therevar start = 0;if (followmouse) {dots[0].X = Xpos;dots[0].Y = Ypos;start = 1;}for (i = start ; i < nDots; i++ ) {var spring = new vec(0, 0);if (i > 0) {springForce(i-1, i, spring);if (i < (nDots - 1)) {springForce(i+1, i, spring);}// air resisitance/frictionvar resist = new vec(-dots[i].dx * RESISTANCE,-dots[i].dy * RESISTANCE);// compute new accel, including gravityvar accel = new vec((spring.X + resist.X)/ MASS,(spring.Y + resist.Y)/ MASS + GRAVITY);// compute new velocitydots[i].dx += (DELTAT * accel.X);dots[i].dy += (DELTAT * accel.Y);// stop dead so it doesn't jitter when nearly stillif (Math.abs(dots[i].dx) < STOPVEL &&Math.abs(dots[i].dy) < STOPVEL &&Math.abs(accel.X) < STOPACC &&Math.abs(accel.Y) < STOPACC) {dots[i].dx = 0;dots[i].dy = 0;}// move to new positiondots[i].X += dots[i].dx;dots[i].Y += dots[i].dy;// get size of windowvar height, width;if (isNetscape) {height = window.innerHeight + document.scrollTop;width = window.innerWidth + document.scrollLeft;} else {height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; }// bounce of 3 walls (leave ceiling open)if (dots[i].Y >= height - DOTSIZE - 1) {if (dots[i].dy > 0) {dots[i].dy = BOUNCE * -dots[i].dy;}dots[i].Y = height - DOTSIZE - 1;}if (dots[i].X >= width - DOTSIZE) {if (dots[i].dx > 0) {dots[i].dx = BOUNCE * -dots[i].dx;}dots[i].X = width - DOTSIZE - 1; }if (dots[i].X < 0) {if (dots[i].dx < 0) {dots[i].dx = BOUNCE * -dots[i].dx; }dots[i].X = 0;}// move img to new positiondots[i].obj.left = dots[i].X;dots[i].obj.top = dots[i].Y;}}// end code hiding --></script>。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
}
/*效果二*/
.button2{
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
overflow:hidden;
position: relative;
}
.button2:hover{
background-color: rgba(255,255,255,0.2);
}
.button5:hover::before{
opacity:0;
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
.button5::after{
content:'';
width:100%;
height:100%;
position: absolute;
height: 100%;
position: absolute;
left: -50px;
top: 0;
opacity:0;
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
}
.button2:hover::after{
left:0;
opacity:1;
opacity:0;
position: absolute;
left: 0;
top:0;
background-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
}
.button4:hover::after{
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity:0;
-webkit-transform: translate(-9%, -50%) rotate(-9deg);
transform: translate(-9%, -50%) rotate(-9deg);
opacity:1;
}
/*效果四*/
.button4{
position: relative;
overflow:hidden;
}
.button4 span{
z-index:2;
}
.button4::after{
content:"";
width: 100%;
height: 100%;
z-index:1;
left: 0;
top: 0;
opacity:0;
background-color: rgba(255,255,255,0.5);
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transition: all 0.5s ;
实用的CSS鼠标滑过按钮特效（10种代码篇）
/*效果一*/
.button1{
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
}
.button1:hover{
background-color: rgba(255,255,255,0.2);
border-radius:20px;
-webkit-transition: all 0.3s ;
transition: all 0.3s ;
}
.button3:hover::after{
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
.button2>span{
-webkit-transition: all 0.3s ;
transition: all 0.3s ;
}
.button2:hover>span{
opacity:0;
}
.button2::after{
content:attr(data-text);
width: 100%;
opacity:1;
-webkit-transform: skewX(-180deg) scale(0.5,1);
transform: skewX(-180deg) scale(0.5,1);
}
/*效果五*/
.button5{
border:none;
position: relative;
}
.button5::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid rgba(255,255,255,0.5);
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
transition: all 0.5s ;
}
.button5:hover::after{
opacity:1;
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
/*效果六*/
.button6{
border:none;
position: relative;
}
.button3>span{
-webkit-transition: all 0.3s ;
transition: all 0.3s ;
}
.button3:hover>span{
opacity:0;
}
.button3::after{
content:attr(data-text);
width: 100%;
}
.button6::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.5s ;
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
overflow:hidden;
position: relative;
}
.button3:hover{
background-color: rgba(255,255,255,0.2);
相关文档
最新文档