<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停效果</title>
<style type="text/css">
{
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
a{
width: 200px;
height: 50px;
display: block;
text-align: center;
line-height: 50px;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 24px;
font-weight: bold;
color: white;
border: 1px solid white;
overflow: hidden;
}
a::before{
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-image: linear-gradient(60deg,transparent,rgba(146,148,248,4),transparent);
transition: all 05s;
}
a:hover::before{
left: 100%;
}
a:hover{
box-shadow: 0 2px 10px 8px rgba(146,148,248,4);
}
</style>
</head>
<body>
<a href="#">鼠标悬停效果</a>
</body>
</html>
CSS+HTML<悬停下划线效果>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>CSS3旋转</title>
<style>
demo {
width: 100px;
height: 75px;
background-color: yellow;
border: 1px solid black;
margin:20px;
}
#div2 {
transform: rotate(30deg);
-ms-transform: rotate(30deg); / IE 9 /
-moz-transform: rotate(30deg); / Firefox /
-webkit-transform: rotate(30deg); / Safari and Chrome /
-o-transform: rotate(30deg); / Opera /
}
#div3 {
transform: rotate(90deg);
ms-transform: rotate(90deg); / IE 9 /
moz-transform: rotate(90deg); / Firefox /
webkit-transform: rotate(90deg); / Safari and Chrome /
o-transform: rotate(90deg); / Opera /
}
</style>
</head>
<body>
<div class="demo" id="div1">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div2">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div3">你好。这是一个 div 元素。</div>
原图<img src=">
90°旋转后的
<img src=">
</body>
</html>
代码呈现的结果如下图：
扩展资料：
旋转WORD中的 *** 作步骤如下：
1、打开电脑，找到Word软件，点击word图标，打开Word，如下图。
2、进入之后，打开新建word文档，在插入选择，插入你需要旋转的，如下图。
3、在文件中选取一张，点击插入即可，如下图。
4、将鼠标指针放在图中标记位置，然后按住左键，即可旋转，如下图。
<!DOCTYPE html><head>
<script>
windowonload = function(){
var img = documentgetElementById("imgTest");
if (documentaddEventListener){
imgaddEventListener("mouseover",doMouseover,false);
imgaddEventListener("mouseout",doMouseout,false);
}
else if(documentattachEvent){
imgattachEvent("mouseover",doMouseover);
imgattachEvent("mouseout",doMouseout);
}
else{
imgonmouseover = doMouseover;
imgonmouseout = doMouseout;
}
}
function doMouseover(){
thiswidth = thiswidth 15;
thisheight = thisheight 15;
}
function doMouseout(){
thiswidth = thiswidth / 15;
thisheight = thisheight / 15;
}
</script>
</head>
<body>
<img id = "imgTest" src = "img/barcodejpg"/>
</body>
</html><style>
demo{ width:1000px; height:100px; position:relative;}
demo div{ position:absolute;}
demo imgA{ z-index:11}
demo imgB{ z-index:10}
demo imgA:hover+imgB{z-index:12}
demo imgB:hover{z-index:12}
imgB:hover{
-webkit-transition: 06s;
-moz-transition:06s;
-o-transition:06s;
-ms-transition:06s;
transition:06s;
webkit-transform:scale(15,15);
-moz-transform:scale(15,15);
-o-transform: scale(15,15);
-ms-transform:scale(15,15);
transform:scale(15,15);}
</style>
<div class="demo">
<div class="imgA"><img src="Ajpg"/></div>
<div class="imgB"><img src="Bjpg"/></div>
</div>html鼠标悬停左侧缩小放大到右边
首先这是一张在悬停时放大也就是改变大小(宽，高)实现的。
2，一张在放大的时候会根据其定位(如在div里面的会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为添加相对定位并且不去调节扩大后的位置，他的放大会是向一边的，因此我们必须考虑其放大后的位置。
3，放大的效果是要用动画实现的。
代码：html>
尝试
a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}
pic{position:absolute;}
$(function(){
$w = $('pic')width();
$h = $('pic')height();
$w2 = $w + 20;
$h2 = $h + 20;
$('pic')hover(function(){
$(this)stop()animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);
},function(){
$(this)stop()animate({height:$h,width:$w,left:"0px",top:"0px"},500);
});
});
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）