css3解决鼠标指向背景放大问题

BeelArt

已于 2023-03-26 19:55:57 修改

阅读量523

点赞数 1

分类专栏：网页相关文章标签： css3 css html Powered by 金山文档

于 2023-03-26 19:49:27 首次发布

本文链接：https://blog.csdn.net/jin868/article/details/129783254

版权

网页相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一开始本想用transition来实现，后来发现transition无法实现，因此想到了现在的方法animation，废话不多说，直接上代码！

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" href="demo.css">
</head>
    
<body>
    <div>文字1</div>
    <div>文字2</div>
    <div>文字3</div>
    <div>文字4</div>
    <div>文字5</div>
</body>
</html>

demo.css

div{
    float:left; 
    width:200px; 
    height:300px; 
    margin:20px; 
    text-align:center;
    line-height:300px;
    color:#fff;
    animation:zoomsmall 0.5s; /* 调用缩小动画（这是里当鼠标丢失hover时，背景回到原大小），播放时长为0.5秒 */
    background: url("1.jpg")no-repeat; 
    background-position: center; 
    background-size: auto 100%; /* 背景的初始化大小 */
}
div:hover{
    animation:zoombig 0.5s; /* 调用缩小动画，播放时长为0.5秒 */
    background-size:auto 150%; /* 鼠标停留时背景大小，如果不加这行，动画会一直来回的放大缩小 */
}

/* 建立背景放大动画 */
@keyframes zoombig
{
    0% {background-size:auto 100%;}
    100% {background-size:auto 150%;}
}

/* 建立背景缩小动画 */
@keyframes zoomsmall
{
    0% {background-size:auto 150%;}
    100% {background-size:auto 100%;}
}