html文字鼠标滑过放大,CSS3 悬停文字放大动效

CSS

语言：

CSSSCSS

确定

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600,800');

body {

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 500px;

perspective: 500px;

background: #191919;

color: transparent;

font-family: "Open Sans";

font-weight: 800;

font-size: 8vw;

text-transform: uppercase;

text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);

}

span {

display: inline-block;

cursor: pointer;

padding: 0 0.2em;

position: relative;

-webkit-transition: all 0.15s linear;

transition: all 0.15s linear;

}

span.on {

color: #fff;

-webkit-transform: scale(2.2);

-ms-transform: scale(2.2);

transform: scale(2.2);

text-shadow: 0 0 1px #fff;

}

span.side {

-webkit-transform: scale(1.65);

-ms-transform: scale(1.65);

transform: scale(1.65);

text-shadow: 0 0 1px rgba(255, 255, 255, 0.85);

}

span.side2 {

-webkit-transform: scale(1.35);

-ms-transform: scale(1.35);

transform: scale(1.35);

text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);

}