html鼠标特效代码,请教网页设计高手鼠标特效代码代码 满意给100分

html鼠标特效代码,请教网页设计高手鼠标特效代码代码 满意给100分详细介绍

? ? ? ? *{

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0;

? ? ? ? }

? ? ? ? body{

? ? ? ? ? ? background-color: #000;

? ? ? ? }

? ? ? ? a{

? ? ? ? ? ? width: 200px;

? ? ? ? ? ? height: 50px;

? ? ? ? ? ? display: block;

? ? ? ? ? ? text-align: center;

? ? ? ? ? ? line-height: 50px;

? ? ? ? ? ? text-decoration: none;

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? top: 50%;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? transform: translate(-50%,-50%);

? ? ? ? ? ? font-size: 24px;

? ? ? ? ? ? font-weight: bold;

? ? ? ? ? ? color: white;

? ? ? ? ? ? border: 1px solid white;

? ? ? ? ? ? overflow: hidden;

? ? ? ? }

? ? ? ? a::before{

? ? ? ? ? ? content: "";

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? top: 0;

? ? ? ? ? ? left: -100%;

? ? ? ? ? ? width: 100%;

? ? ? ? ? ? height: 100%;

? ? ? ? ? ? background-image: linear-gradient(60deg,transparent,rgba(146,148,248,.4),transparent);

? ? ? ? ? ? transition: all 0.5s;

? ? ? ? }

? ? ? ? a:hover::before{

? ? ? ? ? ? left: 100%;

? ? ? ? }

? ? ? ? a:hover{

? ? ? ? ? ? box-shadow: 0 2px 10px 8px rgba(146,148,248,.4);

? ? ? ? }

? ? 你要显示特效的html