css3实例效果 |css中ul li

/*按钮动画*/
button{
border:none;
outline:none;
cursor:pointer;
font-size:1rem;
padding:0.5rem 1rem;
border-radius:2px;
background-color:#888;
color:#fff;
transition:background-color 0.3s ease;
}
button:hover{
background-color:#333;
}
/*图片圆角*/
img{
border-radius: 50%;
}
/*背景渐变*/
div{
background: linear-gradient(to bottom, #ff4e50, #f9d423);
}
/*阴影*/
div{
box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}
/*旋转动画*/
div{
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

CSS3的实例效果有时候并不是必需的，但是它可以让网站更加引人注目，给用户带来更好的体验。当然，过度使用这些效果也会使网页负担过重，影响用户访问体验，需要在使用时慎重考虑。希望以上内容对大家有所帮助。