悬浮贴样式

悬浮贴样式

悬浮贴样式效果图如下：

预览地址：https://www.cnblogs.com/leo130-blogs/p/18251987

---

html语句:

<div class="sticker" ><div class="sticker-title"></div><div class="sticker-detail"><div class="sd-sp-time"><span></span></div><div class="sd-sp-Tag"><span></span></div></div>
</div>

---

CSS样式部分：

<style>.sticker {display: block;max-width: 180px;max-height: 220px;background-color: white;margin: 10px 10px 60px 10px;box-shadow: 0px 12px 12px -1px rgba(0, 0, 0, 0.18);border-radius: 20px;   transition: 0.3s;
}.sticker-title {display: block;width: 180px;height: 160px;padding-top: 10px;border-radius: 20px;border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.2);background: linear-gradient(142.99deg, rgba(217, 217, 217, 0.63) 15.53%, rgba(243, 243, 243, 0.63) 88.19%);}.sticker-title span {user-select: none;display: block;margin-left: 15px;margin-right: 15px;font-size: 22px;font-weight: 346;text-indent: 10px;
}.sticker-detail {height: 15px;border-bottom: 1px solid silver;border-radius: 30px;border-bottom: 60px;visibility: hidden;}.sticker-detail span {display: block;padding-top: 4px;font-size: 14px;/* text-align: right; */}.sd-sp-time {text-align: right;margin-right: 10px;font-weight: 120;}.sd-sp-Tag {text-align: left;text-indent: 20px;
}/*悬浮事件定义*/
.sticker:hover {margin: 0px 20px 0px 20px;transform: translate(0, -10px);box-shadow: 0px 12px 24px -1px rgba(0, 0, 0, 0.18);.sticker-detail {height: 60px;border-bottom: 1px solid silver;border-radius: 20px;transition: 0.4s;}.sticker-detail span {visibility: visible;transition-delay: 0.2s;}}
</style>