鼠标悬浮,产生变化

最新推荐文章于 2024-02-04 15:13:50 发布

qq_4027

最新推荐文章于 2024-02-04 15:13:50 发布

阅读量243

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/qq_40143811/article/details/78121552

版权

网页专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.aa {
   width: 100px;
   height: 100px;
   background: #FF0;
   margin: 50px;
   transition: all 2s;
}
.aa:hover {
   text-align:center;line-height:200px;
   width: 500px;
   height: 200px
}
.bb {
   font-size: 24px;
   width: 100px;
   height: 100px;
   background: #F0F;
   margin: 50px;
   transform: rotate(50deg);
   transition: all 1s;
}
.bb:hover {
   text-shadow: 5px 5px 5px #F00;
   font-size: 36px
}
</style>
</head>

<body>

<div class="aa" > 132456 </div>
<div class="bb"> bbbbbb </div>
<div class="cc" style="width:100px; height:100px; background:#F0F; margin:50px; transform: translate(100px,50px)"> ccccccccc </div>
<div class="dd" style="width:100px; height:100px; background:#F0F; margin:100px; transform: scale(2,1.5)"> </div>
<div class="ee" style="width:100px; height:100px; background:#F0F; margin:50px; transform: skew(50deg,50deg)"> </div>
<div class="ff" style="width:100px; height:100px; background:#F0F; margin:50px; transform: matrix(10px,10px,10px,30px,30px,30px)"> </div>
<div> </div>
</body>
</html>

qq_4027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮,产生变化

无标题文档.aa { width: 100px; height: 100px; background: #FF0; margin: 50px; transition: all 2s;}.aa:hover { text-align:center;line-height:200px; width: 500px;
复制链接

扫一扫

专栏目录