css3背景晃动实现

最新推荐文章于 2024-06-11 22:32:41 发布
最新推荐文章于 2024-06-11 22:32:41 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： css html 文章标签： css3 css3背景晃动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33323469/article/details/81206138
版权
html 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
css
16 篇文章 0 订阅
订阅专栏 
<html>

    <head>
        <title>aaa</title>
    </head>
    <style>
        .banner {
            background-image: url(img/d-bg.png);
            width: 562px;
            height: 224px;
            margin: 14px auto;
            padding-top: 14px;
            -webkit-animation: lzr 2s linear infinite alternate;
            -moz-animation: lzr 2s linear infinite alternate;
            animation: lzr 2s linear infinite alternate;
        }

        @-webkit-keyframes lzr {
            0% {
                -webkit-transform: scale(1, 1);
            }
            100% {
                -webkit-transform: scale(1.04, 1.04);
            }
        }

        @keyframes lzr {
            0% {
                transform: scale(1, 1);
            }
            100% {
                transform: scale(1.04, 1.04);
            }
        }
    </style>

    <body>
        <div class="banner"></div>
    </body>

</html>
1登峰造极
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用CSS3做一个飘动的照片效果
寻码启示
05-27 1698
用css3制作类似婚纱电子相册中的照片飘动效果
纯CSS3实现汽车行驶动画特效代码
03-20
此外，为了使汽车行驶看起来更真实，我们可以利用CSS3的过渡（transition）属性来添加平滑的运动效果，如汽车在驶过路面时的微小晃动。同时，可以使用transform属性中的rotate()函数为车轮添加旋转效果，模拟行驶中...
CSS3实现抖动
08-11
shake shake-hard shake-slow shake-little shake-horizontal shake.vertical shake-rotate shake-opacity shake-crazy
CSS实现背景图片的左右晃动
qq_15124555的博客
10-06 8617
利用CSS的animation实现背景图片的左右晃动
CSS 实现图标左右晃动动画。模仿Steam端通知铃铛摆动动画
最新发布
20000_ZuuuuYao的博客
06-11 1197
实现鼠标移动到图标时图标左右晃动效果
CSS3实现卡片晃动效果
weixin_43939755的博客
10-24 296
当鼠标移入时，通过querySelector方法获取卡片内部的元素，然后将它的transform属性设置为”rotateY(180deg)”，这样就可以让卡片翻转并显示背面内容了。今天带来的这段代码实现了在一个图片上增加一个时间倒计时的功能，并且当鼠标移动时，倒计时板块会产生晃动效果。使用JavaScript监听卡片容器的鼠标移入和移出事件，并根据事件触发的情况修改卡片内部的transform属性来实现翻转效果。使用CSS样式设置卡片容器的透视度（perspective）和卡片内部的两个面的布局。
css3实现元素抖动效果
热门推荐
TaoYuan
10-31 1万+
代码不多，不截图了，可自行尝试 说明 css部分比较冗余，是因为考虑到了适配情况。可酌情删减 -webkit-animation-name: shaky-slow; // webkit内核 -ms-animation-name: shaky-slow; // ie内核 animation-name: shaky-slow; // 原生 animation-duration: 4s; ...
CSS3相框摇晃背景动画特效特效代码
03-20
【CSS3相框摇晃背景动画特效特效代码】是一个利用CSS3技术实现的创新性视觉效果，它将传统的静态相框转化为动态的摇晃背景，为网页增添了一份生动与趣味。这种特效通常用于吸引用户的注意力，提升用户体验，尤其是在...
纯css3实现的动画按钮的实例教程
12-30
今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图： 　实现的代码。 　...
CSS3盘子拉面鸡蛋图形特效
07-24
5. **动画（Animations）**：CSS3动画通过`@keyframes`规则定义，可以实现动态效果，比如拉面滑动到盘子里的过程，或者鸡蛋轻轻晃动的样子。 6. **阴影（Shadows）**：box-shadow属性可以添加阴影效果，使元素看...
css3个性化下拉菜单
01-25
CSS3的`linear-gradient`允许我们创建渐变背景，使下拉菜单看起来更现代： ```css .menu li { background-image: linear-gradient(to bottom, #f8f8f8, #eaeaea); } ``` 六、文字效果 CSS3还支持文字阴影、文字...
满天繁星闪烁CSS3特效
07-24
满天繁星闪烁CSS3特效是一款基于css3 animation属性绘制的夜空中的北斗七星闪烁背景动画特效。
html5背景会动网站模板
10-21
html5背景会动网站模板,蓝色色调，外观大气。
纯css动感背景滑动的导航菜单特效代码
05-29
css制作的背景滑动变换的导航菜单特效，主要通过css控制背景图片的定位，在html5的浏览器下效果会展示的很有动感。
html 网页图片晃动代码
05-28
html 网页图片晃动代码
CSS3动态背景登录框代码.zip
07-04
CSS3动态背景登录框代码是一款基于jQuery CSS3实现的带有动画效果的动态背景登陆框特效。
css3动画特效：上下晃动的div
cxu123321的博客
03-27 1705
css3动画特效：上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fi...
css背景滑动门
Cziker的博客
11-07 228
滑动门含义：自适应输入内容 &lt;style&gt; a { margin: 100px; height: 33px; display: inline-block; background: url(images/to.png) no-repeat; color: #fff; text-decoration: none; line-height: 33px; ...
css 会动的背景图
qq_34870529的博客
05-15 1588
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 实用技巧</title> <style> div { .
css实现背景图片实现倒影
03-25
可以使用 CSS3 中的伸缩盒子（flexbox）来实现背景图片的倒影效果。具体实现方法是利用伸缩盒子的反转（`transform: scaleX(-1)`）和透明度（`opacity`）属性来实现。以下是一个示例代码： ``` <div class="container"> <div class="background"></div> <div class="reflection"></div> </div> /* CSS 代码 */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; position: relative; } .background { width: 300px; height: 300px; background-image: url("background-image.jpg"); background-size: cover; margin-bottom: -150px; position: relative; z-index: 1; } .reflection { width: 300px; height: 150px; background-image: url("background-image.jpg"); background-size: cover; margin-top: -150px; position: relative; z-index: 0; opacity: 0.5; transform: scaleX(-1); } ``` 在这个示例中，我们使用了一个容器 `div`（`.container`）来包含背景图片和倒影。容器使用了伸缩盒子布局，并且设定了垂直居中的样式。在容器内，我们分别使用了两个 `div` 元素分别表示背景图片（`.background`）和倒影（`.reflection`）。这两个元素都使用了相同的背景图片，并且设定了合适的尺寸和位置。倒影使用了反转和透明度属性来实现倒影效果。最终的效果是一个非常简单但是很有效的背景图片倒影效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1登峰造极

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值