css的明星 |css3 重力漂浮效果

/* Jonathan Snook */
/* Jonathan Snook在CSS领域被公认为技术大牛，他在书籍、文章和演讲中传授了他的技巧和奇技淫巧。他创造了SUIT CSS框架，它提供了一种快速而有效的方式来构建模块化、可复用和可扩展的CSS。 */
.container {
display: flex;
flex-wrap: wrap;
}
/* Lea Verou */
/* Lea Verou是一位CSS专家和开源开发者，她是一个人才横溢的UI设计师，她的创作以她对美学的深刻见解为特点。她使用CSS3实现了许多惊人的实验和演示。 */
.box {
color: white;
background: linear-gradient(to bottom, #ff9966, #ff5e62);
border-radius: 50%;
display: inline-block;
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
animation: rotate 2s linear infinite;
}
/* Harry Roberts */
/* Harry Roberts是一位备受尊敬的CSS架构师和顾问。他的专长包括规模化、可持续和强大的前端管理，他努力使前端的工作更加高效、可维护和可重复。*/
.btn {
margin: 1rem;
padding: 1rem 3rem;
font-size: 2rem;
text-align: center;
background: #333;
border: none;
color: white;
cursor: pointer;
}
.btn:hover {
background: #000;
}
/* Rachel Andrew */
/* Rachel Andrew是CSS Grid Layout的权威，她写了两本关于CSS布局的书籍，并在CSS Tricks和Smashing Magazine等社区中发表了很多文章。 */
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2rem;
}
article {
background: white;
padding: 2rem;
box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}
h2 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 2rem;
}
p {
line-height: 1.5;
margin-bottom: 2rem;
}

这些CSS明星通过他们的专业技能和贡献，为前端开发的未来奠定了坚实的基础，大家欣赏并研究他们的工作，可以帮助大家更好地理解CSS的编写规则、语法和最佳实践。