消息 css 代码,CSS3 通知类消息动画

最新推荐文章于 2025-04-18 16:24:53 发布

weixin_39746282

最新推荐文章于 2025-04-18 16:24:53 发布

阅读量328

点赞数

文章标签：消息 css 代码

本文介绍了一种使用CSS来创建动画效果的方法，通过设置不同的动画关键帧实现元素从圆形到矩形的变化，并展示如何使文本逐渐显现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 100%;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.rectangle {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start;

positon: relative;

width: 50px;

height: 50px;

background: #380848;

-webkit-transform: scale(0);

transform: scale(0);

border-radius: 50%;

color: white;

opacity: 0;

overflow: hidden;

-webkit-animation: scale-in .3s ease-out forwards, expand .35s .25s ease-out forwards;

animation: scale-in .3s ease-out forwards, expand .35s .25s ease-out forwards;

}

.notification-text {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

padding: 0 16px;

font-family: 'Roboto', sans-serif;

font-size: 14px;

-webkit-animation: fade-in .65s ease-in forwards;

animation: fade-in .65s ease-in forwards;

}

@-webkit-keyframes scale-in {

100% {

-webkit-transform: scale(1);

transform: scale(1);

opacity: 1;

}

@keyframes scale-in {

100% {

-webkit-transform: scale(1);

transform: scale(1);

opacity: 1;

}

@-webkit-keyframes expand {

50% {

width: 350px;

border-radius: 6px;

}

100% {

width: 300px;

border-radius: 4px;

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -1px rgba(0, 0, 0, 0.12);

}

@keyframes expand {

50% {

width: 350px;

border-radius: 6px;

}

100% {

width: 300px;

border-radius: 4px;

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -1px rgba(0, 0, 0, 0.12);

}

@-webkit-keyframes fade-in {

0% {

opacity: 0;

}

100% {

opacity: .80;

}

@keyframes fade-in {

0% {

opacity: 0;

}

100% {

opacity: .80;

}