css3炫丽特效 |css 设置alert

/* 翻转效果 */
.box {
transform:rotateY(180deg);
transition:transform 0.5s;
}
.box:hover {
transform:rotateY(0deg);
}
/* 背景渐变动画 */
.box {
background: linear-gradient(to right, #ff8a00, #da1b60);
background-size: 150% auto;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 文字动画 */
h1 {
font-size: 7em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
text-shadow: 1px 1px #ff8a00, -1px -1px #da1b60;
animation: neon 3s ease-in-out infinite alternate;
}
@keyframes neon {
from {
text-shadow: 0 0 #fff;
}
to {
text-shadow: 0 0 10px #ff8a00, 0 0 20px #ff8a00,
0 0 30px #ff8a00, 0 0 40px #da1b60,
0 0 70px #da1b60, 0 0 80px #da1b60;
}
}

以上是一些常用的CSS3炫丽特效，通过简单的CSS代码就可以实现页面的美化和增加互动性，可以有效提升用户体验，为网站增色不少。