网站这个位置的呼吸灯渐变效果是不是很好看?分享一下此处应用的CSS代码,来源忘了是从哪个博客上面仿写下来的了😂
.top_logo { background: linear-gradient(90deg, #000000, #2F4F4F, #36648B, #009ACD,#7D26CD,#CD661D,#8B5A00,#5E5E5E); background-size: 1000% 100%; animation: mymove 20s ease infinite; -webkit-animation: mymove 20s ease infinite; -moz-animation: mymove 20s ease infinite; }
@keyframes mymove { 0% { background-position: 0% 0%; } 10% { background-position: 0% 30%; } 20% { background-position: 30% 50%; } 40% { background-position: 50% 100%; } 50% { background-position: 100% 100%; } 60% { background-position: 100% 50%; } 80% { background-position: 50% 30%; } 90% { background-position: 30% 0%; } 100% { background-position: 0% 0%; }
}
实际应用时,把".top_logo"根据自己网站的情况修改一下即可,非常简单。
......查看全文