p { transition: 1s; /* 过渡效果 */ box-shadow: 5px 5px 10px #888888; /* 阴影效果 */ background: linear-gradient(to bottom right, #ff9a9e, #fecfef); /* 渐变效果 */ } /* 动画效果 */ .box { animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes move { 0% { margin-left: 0px; } 50% { margin-left: 100px; } 100% { margin-left: 0px; } }
使用CSS3,可以使网页的效果更加丰富多样,提高用户体验。同时,也可以使用CSS3降低网页的加载速度,提高网站性能。
需要注意的是,不同浏览器对CSS3的支持度不同,因此在使用CSS3时需要注意浏览器兼容性问题,避免出现兼容性错误。