css3 过度效果之物体向上冒出

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无标题文档</title>
<link type="text/css" href="animate.css"/>
</head>
<style>
    .container{ width:960px; height:600px; margin:30px auto; position:relative;}
    .bottom1{ position:absolute; bottom:246px; background:url(img/bottom2.png); height:107px; width:960px;}
    .bottom2{ position:absolute; bottom:200px; background:url(img/bottom1.png); height:46px; width:960px; z-index:4;}
    .rub{ position:absolute; bottom:246px;  left:357px; width:246px; height:200px; background:url(img/rub.png); z-index:2;
        
        animation:myfirst 1500ms;
    }
    .cover{position:absolute; bottom:0px; background:#fff; height:230px; width:960px; z-index:3}
    
    @keyframes myfirst
    {
    0%   {bottom:0px;}
    100% {bottom:246px;}
    }
    
    
    
    
</style>

<body>

    <div class="container">
        <div class="rub"></div>
        <div class="bottom1"></div>
        
        <div class="bottom2"></div>
        <div class="cover"></div>
    </div>
</body>
</html>

复制代码

小兔子会从椭圆中间向上显示出来。可模仿建筑物突起等功能

posted @   kaisela  阅读(398)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae