Rumah > Artikel > hujung hadapan web > CSS 实现背景动态渐变效果
效果图
CSS 代码:
*{ margin: 0; padding: 0; } body{ height: 100vh; width: 100%; overflow: hidden; background-image: linear-gradient(125deg,#F44336,#E91E63,#9C27B0,#3F51B5,#2196F3); background-size: 400%; font-family: "montserrat"; animation: bganimation 15s infinite; } .text{ color: #fff; font-size: 22px; text-align: center; margin: 350px 0; /* text-transform: uppercase; */ } @keyframes bganimation{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
推荐教程:《CSS教程》
Atas ialah kandungan terperinci CSS 实现背景动态渐变效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!