/*定义渐变*/ background: linear-gradient(to left, #ffffff 0%, #000000 50%, #ffffff 100%); /*渐变方向为从右到左,开始颜色为白色,中部为黑色,结束颜色为白色。*/ /*定义宽高*/ width: 200px; height: 200px; /*定义背景*/ background-size: 200% 100%; background-position: right; transition: all 0.8s ease; /*渐变方向为水平,方向从右向左。渐变宽度是元素宽度的两倍,即200*2 = 400像素。背景图片的位置初始化为最右边,过渡效果为0.8秒,ease为渐变函数。*/ /*鼠标悬停*/ :hover { background-position: left; } /*鼠标悬停时,将背景图片位置设置为最左边,即可满足中间向两边渐变的效果。*/
以上CSS3代码可以用来实现中间向两边渐变的效果。通过设置背景渐变的颜色和位置,以及鼠标悬停时背景位置的改变,可以让页面呈现出非常炫酷的效果,使得页面更加具有视觉冲击力。