CSS实现--鼠标划入

最新推荐文章于 2022-10-20 17:36:43 发布

就是217

最新推荐文章于 2022-10-20 17:36:43 发布

阅读量670

点赞数 1

分类专栏： CSS 文章标签： css css3 html animation

本文链接：https://blog.csdn.net/qq_42777804/article/details/108717541

版权

还是先上效果图，看看是不是大家所需要的这种效果

没什么过程直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .box{
            width: 440px;
            height: 320px;
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        /* 图片变化 */
        .box:hover img{
            transform:scale(2) rotate(45deg)
        }
        
        .box img{
            transition: all 0.5s;
        }
        .small{
            width: 400px;
            height: 280px;
            background-color:#00bcd438;
            position: absolute;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

就是217

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现--鼠标划入

还是先上效果图，看看是不是大家所需要的这种效果没什么过程直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
复制链接

扫一扫