/* 选择器 */ h1 { color: red; font-weight: bold; text-align: center; } /* 盒模型 */ div { width: 300px; height: 200px; padding: 20px; margin: 10px; border: 2px solid black; border-radius: 10px; box-shadow: 2px 2px 5px grey; } /* 文本样式 */ p { font-size: 16px; line-height: 1.5; text-indent: 2em; } /* 动画效果 */ .box { width: 100px; height: 100px; background-color: blue; animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } }
上述代码分别涉及到选择器、盒模型、文本样式、动画效果等方面。其中选择器用于指定样式应用的对象,盒模型用于控制网页布局,文本样式用于调整文字效果,动画效果用于创建有趣的动画。
值得一提的是,CSS3的效果非常丰富,以上代码只是基础部分,有更加复杂的效果需要前端开发者结合实际需要进行开发和实现。