html 鼠标经过引用css,css3鼠标经过动画-优快云博客

本文详细解析了CSS3中用于创建动画和过渡效果的语法和技术，包括`.no_miss_tabli`类的各种状态定义，如背景颜色、边框、文字样式等。通过使用`@keyframes`规则，实现了元素在不同时间点的平移和倾斜变换，为网页交互增添了动态视觉体验。同时，文章探讨了如何通过:hover伪类控制元素显示和动画播放，展示了前端开发中动态效果的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.no_miss_tab li {

width:327px;

height:55px;

background:#FEEC7C;

float:left;

margin-left:9px;

color:#FE5278;

z-index:1;

overflow:hidden;

border-radius:10px;

font-size:16px;

font-weight:bold;

text-align:center;

line-height:55px;

cursor:pointer;

}

.no_miss_tab li.current {

background:#FFBC36;

color:#FE5278

}

.no_miss_tab li.current .first {

display:none;

}

.no_miss_tab li.current:hover .second {

display:none;

}

.no_miss_tab li.current .second {

display:none;

}

.no_miss_tab li.current .txt {

top:0px;

}

.no_miss_tab li:nth-child(10) {

margin-right:0;

}

.txt {

z-index:4;

position:relative;

width:327px;

height:55px;

position:relative;

top:-110px;

border-radius:10px;

display:block;

text-align:center;

line-height:55px;

}

.second {

background:#FFBC36;

-webkit-transform:translatex(-328px) skew(0deg);

-moz-transform:translatex(-328px) skew(0deg);

-ms-transform:translatex(-328px) skew(0deg);

-o-transform:translatex(-328px) skew(0deg);

transform:translatex(-328px) skew(0deg);

text-align:center;

z-index:3;

position:relative;

border-radius:10px;

text-align:center;

line-height:55px;

width:327px;

height:55px;

color:#FEEC7C;

}

.gg {

-webkit-animation:removesecond 1s reverse;

color:#FEEC7C;

}

.first {

width:327px;

height:55px;

background:#FEEC7C;

position:relative;

top:-46px;

z-index:2;

border-radius:10px;

display:block;

text-align:center;

line-height:55px;

}

.no_miss_tab li:hover .second {

display:block;

-webkit-animation:movesecond 1s forwards;

-moz-animation:movesecond 1s forwards;

-ms-animation:movesecond 1s forwards;

-o-animation:movesecond 1s forwards;

animation:movesecond 1s forwards;

color:#FEEC7C;

}

/*第一个按钮*/

@-webkit-keyframes removesecond {

0% {

-webkit-transform:translateX(-328px) skew(0deg);

}

20% {

-webkit-transform:translateX(50px) skew(-20deg);

}

40% {

-webkit-transform:translateX(-50dpx) skew(20deg);

}

60% {

-webkit-transform:translateX(25dpx) skew(-8deg);

}

80% {

-webkit-transform:translateX(-15px) skew(8deg);

}

100% {

-webkit-transform:translateX(0px) skew(0deg);

}

}@-webkit-keyframes movesecond {

0% {

-webkit-transform:translateX(-328px) skew(0deg);

}

20% {

-webkit-transform:translateX(50px) skew(-20deg);

}

40% {

-webkit-transform:translateX(-50dpx) skew(20deg);

}

60% {

-webkit-transform:translateX(25dpx) skew(-8deg);

}

80% {

-webkit-transform:translateX(-15px) skew(8deg);

}

100% {

-webkit-transform:translateX(0px) skew(0deg);

}

}@-moz-keyframes movesecond {

0% {

-webkit-transform:translateX(-328px) skew(0deg);

}

20% {

-webkit-transform:translateX(50px) skew(-20deg);

}

40% {

-webkit-transform:translateX(-50dpx) skew(20deg);

}

60% {

-webkit-transform:translateX(25dpx) skew(-8deg);

}

80% {

-webkit-transform:translateX(-15px) skew(8deg);

}

100% {

-webkit-transform:translateX(0px) skew(0deg);

}

}@-ms-keyframes movesecond {

0% {

-webkit-transform:translateX(-328px) skew(0deg);

}

20% {

-webkit-transform:translateX(50px) skew(-20deg);

}

40% {

-webkit-transform:translateX(-50dpx) skew(20deg);

}

60% {

-webkit-transform:translateX(25dpx) skew(-8deg);

}

80% {

-webkit-transform:translateX(-15px) skew(8deg);

}

100% {

-webkit-transform:translateX(0px) skew(0deg);

}

}@-o-keyframes movesecond {

0% {

-webkit-transform:translateX(-328px) skew(0deg);

}

20% {

-webkit-transform:translateX(50px) skew(-20deg);

}

40% {

-webkit-transform:translateX(-50dpx) skew(20deg);

}

60% {

-webkit-transform:translateX(25dpx) skew(-8deg);

}

80% {

-webkit-transform:translateX(-15px) skew(8deg);

}

100% {

-webkit-transform:translateX(0px) skew(0deg);

}

}@keyframes movesecond {

0% {

-webkit-transform:translateX(-328px) skew(0deg);

}

20% {

-webkit-transform:translateX(50px) skew(-20deg);

}

40% {

-webkit-transform:translateX(-50dpx) skew(20deg);

}

60% {

-webkit-transform:translateX(25dpx) skew(-8deg);

}

80% {

-webkit-transform:translateX(-15px) skew(8deg);

}

100% {

-webkit-transform:translateX(0px) skew(0deg);

}