Html 固定DIV的自定义CSS

我已经为一个通知栏编写了一个CSS，当鼠标悬停时它会向下滑动。新闻（文本）使用

标记滚动。长方体当前为矩形。我已经附加了鼠标悬停和没有它的截图。然而，我想有一个酒吧自定义形状

因此，在空闲状态下，它必须只显示通知按钮，但在悬停状态下，整个条必须向下滑动。我如何实现它

下面给出的是CSS代码

#feedback { 
        height: 20px; 
        width: 400px; 
        position: fixed; 
        z-index: 2500;
        right:0%;
        background:#F29300;
        border:#0F0; border:thick;
        transition:all 0.2s ease-out;
        -webkit-transition:all 0.2s ease-out;
        -moz-transition:all 0.2s ease-out;
        -o-transition:all 0.2s ease-out;
        transform: rotate(0deg) scale(1) skew(-180deg) translateY(-10px);
        -webkit-transform: rotate(0deg) scale(1) skew(-180deg) translateY(-10px);
        -moz-transform: rotate(0deg) scale(1) skew(-180deg) translateY(-10px);
        -o-transform: rotate(0deg) scale(1) skew(-180deg) translateY(-10px);
        -ms-transform: rotate(0deg) scale(1) skew(-180deg) translateY(-10px);

    }
    #feedback:hover { 
        transform: rotate(0deg) scale(1) skew(-180deg) translateY(2px);
        -webkit-transform: rotate(0deg) scale(1) skew(-180deg) translateY(2px);
        -moz-transform: rotate(0deg) scale(1) skew(-180deg) translateY(2px);
        -o-transform: rotate(0deg) scale(1) skew(-180deg) translateY(2px);
        -ms-transform: rotate(0deg) scale(1) skew(-180deg) translateY(2px);

    }

这是HTML代码

<div id="feedback" class="feedback">
            <marquee scrollamount="3" ><font size="+1">My CUstom text</font></marquee>
        </div>

我的自定义文本

当前

我需要一个像下面所示的。 无悬停

悬停时，div必须向下滑动

---

我想让这个自定义形状工作。我该怎么做你的具体问题不是很清楚。但是，这是一个如何制作简单通知栏的示例：

#通知{
位置：固定；
宽度：100%；
高度：20px；
顶部：-20px；
背景：橙色；
文本对齐：居中；
过渡：均为0.5s；
}
#盘旋{
位置：固定；
排名：0；
背景：橙色；
宽度：100px；
高度：20px；
文本对齐：居中；
边界半径：5px；
过渡：均为0.5s；
}
#悬停{
位置：固定；
背景：橙色；
宽度：100px；
身高：0；
文本对齐：居中；
边界半径：5px；
过渡：均为0.5s；
}
#通知：悬停{
位置：固定；
宽度：100%；
高度：20px；
排名：0；
背景：橙色；
文本对齐：居中；
}
#悬停：悬停+#通知{
位置：固定；
宽度：100%；
高度：20px；
排名：0；
背景：橙色；
文本对齐：居中；
}

---

让我停下来！已经通知你了嗨，你可以这样做

CSS:

和HTML

<div id="feedback" class="feedback">
  <marquee scrollamount="3" ><font size="+1">My CUstom text</font></marquee>
  <button>Notification</button>
</div>


我的自定义文本
通知
现在这一切都很完美。。比我想象的还要好。。谢谢，没问题。最好的部分是，这也适用于移动设备。尽量不要建议支持较差的代码，即使询问者正在使用它。几乎没有支持，永远不应该使用。
<div id="feedback" class="feedback">
  <marquee scrollamount="3" ><font size="+1">My CUstom text</font></marquee>
  <button>Notification</button>
</div>