css3动画效果

最新推荐文章于 2023-09-19 13:53:39 发布
最新推荐文章于 2023-09-19 13:53:39 发布
阅读量195 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/namechenfl/article/details/109028172
版权 
<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .page{
            display: flex;
            width:100%;
            flex-wrap: wrap;
        }
        .box{
            width: 300px;
            height: 200px;
            margin: 50px;
            border: 1px solid #f1f1f1;
            transition:.5s;
            cursor: pointer;
            position: relative;
            border: 1px solid red;
        }
        .box img{
            width: 300px;
            height: 200px;
        }
        .wrap-box {
            position: absolute;
            width: 300px;
            height: 200px;
            background:rgba(61, 58, 58,.5);
            transition:.5s;
        }
        .box:hover{
            transform: scale(1.3);
            transition:transform .5;
        }
        .box:hover .wrap-box{
            height: 0px;
        }
    </style>
</head>
<body>
    <div class="page">
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602496088363&di=52365d6869de70bce3d0c65a0defcc12&imgtype=0&src=http%3A%2F%2Fwww.sc-sxsh.cn%2Fwp-content%2Fuploads%2F2015%2F06%2F%25E8%258A%25B1%25E5%258D%2583%25E9%25AA%25A8.png" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2396902522,1008162811&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=214015294,3757660240&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1134162791,1767643679&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2309956923,3908030497&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3887950726,3438929371&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=625451781,2930991148&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=663658865,3027072390&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2594483262,613979592&fm=26&gp=0.jpg" alt="">
    </div>
    <div class="box">
        <div class="wrap-box"></div>
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2717886912,630196087&fm=26&gp=0.jpg" alt="">
    </div>
</div>
</body>
</html>

 

岁月如歌_
关注
CSS3实现逼真的3D星空背景动画特效
06-12
CSS3实现3D星空背景动画特效是一款逼真的网页背景繁星点点星空动画特效代码。
css3动画特效
weixin_44211097的博客
08-23 423
css动画特效分为三个大类：动画 过渡 变形 其中过渡是属于轻型的动画，过渡常使用变形的基本操作。
css3各种动画效果合集（一）
最新发布
qq_53541336的博客
09-19 926
效果展示。
css3实现动画效果
qq_40641206的博客
02-03 303
Transition 动画，在两个帧之间切换 ► transition-property: 指定对 HTML 元素的哪个 CSS 属性进行平滑渐变处理。 该属性 可以指定 background-color、 width、 height 等各种标准的 CSS 属性。 all代表所有属性 ► transition-duration: 指定属性平滑渐变的持续时间。 ► transition-timing...
css3动画效果抖动解决方法
09-22
CSS3作为前端开发中的一种重要样式语言，其中的动画效果是提升用户体验和页面交互性的重要方式之一。然而，在使用CSS3进行动画设计时，常常会遇到动画抖动问题，这会严重影响动画的流畅性和用户的视觉体验。本文将...
发现两个有趣的CSS3动画效果
09-25
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。 首先，让...
18种炫酷CSS3动画效果库Mimic.css
12-13
### Mimic.css动画效果 Mimic.css提供的18种动画效果涵盖了各种场景，例如： 1. **FadeIn/Out**：淡入淡出效果，常用于元素的出现和消失。 2. **SlideIn/Out**：滑动进入和退出效果，适用于页面滚动或导航菜单项。 ...
深入CSS3 动画效果的总结详解
09-25
CSS3作为层叠样式表（CSS）的最新版本，它引入了多种强大的动画效果，无需依赖JavaScript即可实现元素的动态效果。CSS3动画主要可以分为三大类属性：transform、transition和animation。通过这些属性，设计师和前端...
css3实现15个动画特效
04-11
纯css3+html实现的15个动画特效，包括淡入淡出、放大、旋转,缩放及各种组合特效等,可分开使用
CSS3 animation实现逐帧动画效果
09-24
主要介绍了CSS3 animation实现逐帧动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
各种css3效果动画
06-05
集合各种css3的效果和动画，一共12个，都是常用的效果展示，和一些细节的动画
CSS3实现动画效果
热门推荐
AXDRXS的博客
12-17 1万+
CSS3实现动画效果
浅谈CSS3动画效果【Animation】
BigDaruizi的博客
07-20 4986
CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果。通过设置可以对某一元素改变任意多的样式任意多的次数。通常用百分比来规定变化发生的时间，或者用关键词 "from" 和 "to"，等同于 0% 和 100%（0% 是动画的开始，100% 是动画的完成）为了得到最佳的浏览器支持，我们在定义动画的时候应该始终定义 0% 和 100% 选择器，并且应该定义动画的名称和时长，若忽略时长（默认值是...
CSS3之动画
前端_大可爱的博客
07-07 276
在需要移动变化的div上设置一下属性 animation-name: ;指定keyfranes动画名称 animation-duration:2s; 指定动画执行时间 animation-timing-function:ease; 指定动画的速度曲线，默认“ease”缓动，linear平缓… animation-delay:-1s;指定动画的延迟时间，默认的话“0”无延迟,设置为负数可以解决停顿问...
炫酷CSS3按钮带动画效果js特效
ICode联盟
05-31 262
下载地址 炫酷的CSS3按钮，带动画效果的CSS3动画特效按钮。 dd:
用CSS3制作50个超棒动画效果教程
u011927449的博客
01-17 1978
CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特...
CSS3常用动画效果
laipengfei19的博客
06-27 1187
一些CSS3的动画效果 我把CSS3常用的动画共享出来，方便自己也方便大家 代码片. <!DOCTYPE html> <html lang="zh-cn"><head> <meta charset="utf-8"> <title>animation_CSS参考手册</title> <style> div{width...
CSS3 动画效果详解：transform、transition 和 animation
深入CSS3动画效果的总结详解 本篇文章对CSS3中的动画效果进行了详细的分析介绍，涵盖了transform、transition和animation三类动画效果的属性和用法。 1. transform属性 transform属性用于设置元素的变形效果，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值