CSS3 animation 让弹框从上弹出，然后有个抖动的效果

最新推荐文章于 2024-05-04 04:40:32 发布
最新推荐文章于 2024-05-04 04:40:32 发布
阅读量9.1k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clt1992/article/details/80380815
版权
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<style type="text/css">

/* 弹框样式 */

.bom_bg{width: 100%;height:100%; background:rgba(0, 0, 0,0.85); position: fixed; top:0; left:0;}
.bom_bg .bom_one{width:320px; padding:0 15px; height:218px; background:#fff; border-radius:10px; position: absolute; top:0%; left:50%; transform:translate(-50%,-50%); animation: bomaction 0.3s linear forwards;}
.bom_bg .bom_one .bom_top_bor{width: 100%; height: 48px;  font-size: 22px;  color: #ff4b49;  line-height: 48px;  border-bottom: 2px solid #c15a47; text-align: center;}
.bom_center{height: 113px; line-height: 123px; text-align: center; font-size: 18px;}
.bom_bottom{height: 55px; text-align: center; color: #202020; font-size: 16px;}
.bom_bottom span{height: 38px;  width: 125px;  background: #ff4b49; cursor: pointer;  display: inline-block;  border-radius: 20px; line-height: 40px;  color: #fff;}
/* 弹框动画效果 */
@keyframes  bomaction{
    0%{
        top:0%;
    }
    46%{
        top:52%;
    }
    48%{
        top:48%;
    }
    50%{
        top:52%;
    }
    52%{
        top:48%;
    }
    54%{
        top:52%;
    }
    56%{
        top:48%;
    }
    57%{
        top:50%;
    }
    100%{
        top:50%;
    }
}
</style>
<body>
   <div class="bom_bg">
        <div class="bom_one">
            <div class="bom_top_bor">温馨提示</div>
            <div class="bom_center">哈哈哈哈哈</div>
            <div class="bom_bottom"><span>知道了</span></div>
        </div>
   </div> 
</body>
</html>
粪球的生活
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css3动画 抖动效果
沫沫酱
02-27 2万+
html结构：
css3 鼠标经过div向上弹出效果源码下载
11-24
本资源“css3 鼠标经过div向上弹出效果源码下载”是一个示例，它展示了如何利用CSS3来创建一个鼠标悬停时，div元素向上弹出的动态效果。这种效果常常用于提示信息、菜单或图像悬停展示，为用户带来更加交互式的浏览...
Bootstrap使用alert弹出窗（含js）
TinpeaV的博客
07-21 5902
在系统开发的时候想搞一个登录成功或失败的弹出窗，原生js的alert又显得太俗了。刚好使用的前端框架是Bootstrap，可是Bootstrap里面的alert模块只提供了css样式，并没有js。所有终于让我找到了完整可以使用的bootstrap的alert。......
金九银十的魔都两年半前端面经
最新发布
2301_82243710的博客
05-04 934
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我的职业方向，对b站还是有特殊的情怀在的。虽然最近随着发展壮大，由ACG社区变为一个各种内容都有的社区，风评也是有各方面的声音吧，不过不进来看看我肯定是不会死心的。。然后除了情怀之外，工作内容，工作时间，环境，待遇都满符合我期望的，主站这套架构也有dalao在知乎写过分享文章，基于vue做的ssr，绝对属于赶潮流各种东西都能折腾的水平，所以我就接这个offer了。
css动画从下往上弹框
weixin_42571979的博客
08-23 1790
需要实现一个以下一个消息盒子弹框信息，从下玩上弹框。 其实直接可以用css的定位和jquery的两个方法就行了。 上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
bootstrap-按钮下拉菜单
weixin_34290631的博客
05-24 124
1.运行效果如图所示2.实现代码如下<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>按钮下拉菜单&lt...
CSS 控制Html页面高度导致抖动问题的原因
weixin_30300523的博客
10-12 651
CSS 控制Html页面高度导致抖动，这类由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码： html,body{ overflow-y:scroll;}html,body{ overflow:scroll; min-height:101%;}html{ overflow:-moz-scrollbars-vertical;} 已经试验过了...
CSS hover改变原生时出现抖动解决方法
weixin_45966674的博客
04-23 3671
首先分析原因 : 其实这是谷歌浏览器的BUG 当你改变内容时 浏览器以为元素超出了，立刻展示出滚动条 过一会儿又发现 :哦 元素改变了，但并没有超出啊…这样就不会抖动了，但坏处是滚动条会一直展示 就是元素没用超出 依旧会展示出一条白线。你可以隐藏滚动条 但不建议这样做 因为如果客户鼠标滚轮不好用 那就尴尬了。如果知道自己的元素肯达不会超出就可以这样写 否则还是不建议这种写法。于是就又把滚动条收回去了 …但这样可能会引发页面抖动的奇葩事。那解决办法就很明显了。
jquery+css3实现的经典弹出层效果示例
10-15
本示例主要探讨如何利用jQuery和CSS3技术来实现灵活且具有动画效果的弹出层。下面将详细阐述实现这个功能的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。...
css3弹力球动画animation属性制作3D弹力球弹跳动画效果
09-14
在CSS3中，`animation`属性是一个强大的工具，它允许我们创建复杂的动态效果，比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力，还能提供更好的交互体验。接下来，我们将深入...
带动感抖动效果CSS3幻灯片
04-07
总的来说，"带动感抖动效果CSS3幻灯片"的实现涉及了CSS3的多个核心特性，包括关键帧动画、过渡效果、伪元素以及与JavaScript的交互。通过熟练掌握这些技术，我们可以创建出更丰富、更具交互性的网页元素，提升用户...
19种html5 CSS3绚丽的弹出窗口动画过渡效果.zip
07-11
19种html5 CSS3绚丽的弹出窗口动画过渡效果
CSS3实现抖动
08-11
shake shake-hard shake-slow shake-little shake-horizontal shake.vertical shake-rotate shake-opacity shake-crazy
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性是现代网页设计中不可或缺的一部分，它允许开发者创建复杂的动态效果，而无需依赖JavaScript或Flash。在本文中，我们将深入探讨如何利用CSS3的animation属性来实现轮播图效果，这是一种常见的...
纯CSS解决滚动条显示和消失时导致页面抖动的问题
weixin_59232910的博客
08-25 1263
我在使用 ElementPlus 时发现，弹出对话框界面后，界面右边的滚动条会消失，进而导致 body 变宽，使整个页面发生抖动。我先在网上搜索有没有合适的办法，但找到的方法都不太适合我的情况。我找到了如下所示的 css，但是对我的页面来说，会挡住顶部导航栏右边的头像。100vw - 100% 计算的是滚动条的宽度。100vw 是浏览器窗口宽度（包括滚动条），100% 是网页宽度（不包括滚动条）。所以这两个值相减，就可以得到滚动条的宽度。使用上面的css的效果是这样的。
vue css 实现类似qq窗口抖动效果
weixin_45727272的博客
06-01 485
css 动画效果
css实现一个弹框的动画（animation）
苏苏就是小苏苏的博客
10-18 5373
1.实现效果 2.实现代码 <div class="box" id="box">展示苏苏的二维码</div> <div class="codeBox" id="code_box"> <div id="hide"> <img src="./susu.png" /> </div> </div> body { padding: 0; margin: 0; display: flex; height: 100vh
【css】使用css实现提示框各种弹出效果。
qq_2511276124的博客
04-14 3281
最近工作编写页面时，需要有一个提示框从下到上弹出的效果。 冥想了一下，实现了出来。 记录下实现思路。
css实现文字从上到下弹出
04-20
你好！很高兴回答你的问题。要实现文字从上到下弹出的效果，可以使用CSS3中的animation属性和keyframes关键字。具体实现步骤如下： 1. 在HTML文件中，在需要弹出文字的元素上添加一个类名，比如 "animate-from-top"。 2. 在CSS文件中，使用@keyframes关键字定义一个动画效果，这里以"slide-from-top"为例： ``` @keyframes slide-from-top { 0% {transform: translateY(-100%);} 100% {transform: translateY(0);} } ``` 3. 给元素添加animation属性，使其应用动画效果。这里包括animation-duration、animation-timing-function、animation-fill-mode等属性，具体根据需要设置。 ``` .animate-from-top { animation-duration: 0.5s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-name: slide-from-top; } ``` 这样就可以实现文字从上到下弹出的效果了。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值