製作遮罩層(滑鼠移入遮罩層出現，移除隱藏)
阿新 • • 發佈：2019-02-06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition由小變大</title>
<style>
*{padding:0;margin:0;}
ul{list-style: none}
.list{width:500px;height:500px;margin:20px auto;border:1px solid #000;}
.list li{float:left;margin:0 10px;}
.list li>a{display:block;width:100px;height:100px;background:red;}
.list li span{display:block;background:rgba(0,255,215,.3);
width:10px;
height:10px;
margin:-55px 0 0 45px;
opacity:0;
font-size:2px;
}
.list li:hover span{
opacity:1;
transform:scale(10);
transform-origin:center center;
transition:transform 0.2s linear;
-webkit-transition:transform 0.2s linear;
color:#fff;
}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#">文字1</a>
<span class="font">12px</span>
</li>
<li>
<a href="#">文字2</a>
<span>12px</span>
</li>
<li>
<a href="#">文字3</a>
<span>12px</span>
</li>
<li>
<a href="#">文字4</a>
<span>12px</span>
</li>
</ul>
</body>
<script>
// window.onload=function(){
// var font=document.getElementsByClassName("font");
// var list=document.getElementsByTagName("li");
// list[0].onmouseover=function(){
// font[0].innerHTML="12px"
// font[0].style.transition="none"
// }
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition由小變大</title>
<style>
*{padding:0;margin:0;}
ul{list-style: none}
.list{width:500px;height:500px;margin:20px auto;border:1px solid #000;}
.list li{float:left;margin:0 10px;}
.list li>a{display:block;width:100px;height:100px;background:red;}
.list li span{display:block;background:rgba(0,255,215,.3);
width:10px;
height:10px;
margin:-55px 0 0 45px;
opacity:0;
font-size:2px;
}
.list li:hover span{
opacity:1;
transform:scale(10);
transform-origin:center center;
transition:transform 0.2s linear;
-webkit-transition:transform 0.2s linear;
color:#fff;
}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#">文字1</a>
<span class="font">12px</span>
</li>
<li>
<a href="#">文字2</a>
<span>12px</span>
</li>
<li>
<a href="#">文字3</a>
<span>12px</span>
</li>
<li>
<a href="#">文字4</a>
<span>12px</span>
</li>
</ul>
</body>
<script>
// window.onload=function(){
// var font=document.getElementsByClassName("font");
// var list=document.getElementsByTagName("li");
// list[0].onmouseover=function(){
// font[0].innerHTML="12px"
// font[0].style.transition="none"
// }