css通知页面,CSS3页面右下角弹出式消息通知界面设计

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

font-family: Helvetica Neue;

}

.wrapper {

width: 75vw;

height: 50vw;

max-width: 100vw;

min-width: 400px;

max-height: 90vh;

min-height: 400px;

border-radius: 10px;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 70px 0 -20px #DDD;

margin: auto;

position: relative;

background: #EEE;

overflow: hidden;

}

.toast-list {

position: fixed;

position: absolute;

bottom: 1em;

right: 0;

}

.toast {

min-width: 20em;

max-width: 30em;

margin-bottom: 1em;

display: flex;

animation: appear .5s 1s backwards;

}

.toast__image,

.toast-info {

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25), 0 15px 30px rgba(0, 0, 0, 0.15);

}

.toast__image {

align-self: center;

width: 50px;

height: 50px;

flex-shrink: 0;

border-radius: 50%;

margin: .3em;

}

.toast-info {

display: flex;

flex-direction: column;

flex-grow: 1;

padding: .5em 1em;

position: relative;

overflow: hidden;

background: #1b5faa;

background: linear-gradient(#1b5faa, #18579a);

border-radius: 3px;

color: #FFF;

}

.toast-info.toast-info--error {

background: #D31;

}

.toast-info__title {

margin-bottom: .1em;

}

.toast-info__message {

font-size: .8em;

margin: .1em;

opacity: .75;

flex-grow: 1;

}

.toast-action {

text-align: center;

display: flex;

margin-top: 1em;

}

.toast-action__button {

flex-grow: 1;

padding: .5em 2em;

border-radius: 2px;

color: inherit;

cursor: pointer;

border: none;

background: rgba(255, 255, 255, 0.15);

margin: .2em;

}

.toast-action__button:hover {

background: rgba(255, 255, 255, 0.2);

}

.toast-action__button:active {

background: rgba(0, 0, 0, 0.15);

}

.toast-action__button--primary {

font-weight: bolder;

}

.toast-info__data {

font-size: .5em;

text-align: right;

opacity: .5;

}

.toast__dismiss {

align-self: center;

font-size: 1.5em;

margin: .25em;

}

.cancel-button {

cursor: default;

user-select: none;

opacity: .25;

}

.cancel-button:after {

content: '×';

}

.cancel-button:hover {

opacity: .75;

}

.toast-info__timer {

position: absolute;

bottom: 0;

left: 0;

right: 0;

height: 3px;

background: rgba(0, 0, 0, 0.4);

animation: timer 5s linear;

}

@keyframes timer {

from {

transform: scaleX(0);

}

to {

transform: scaleX(1);

}

}

@keyframes appear {

from {

opacity: 0;

transform: translateY(100%);

}

to {

opacity: 1;

transform: translateY(0);

}

}

@media screen and (max-width: 700px) {

.wrapper {

position: static;

background: none;

box-shadow: none;

}

}