.pians ul li .a{ color: white; width: 285px; height: 310px; display: block;} .pians ul li .a { text-decoration: none; position: relative;} .pians ul li .a .title a{ background: none;} .pians ul li .a:hover .title a{ background: none;} .pians ul li .a .bg{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; transition: all 1s ease-out 0s; background-color: rgba(130,62,147,.0);} .pians ul li .a .title{ font-size: 30px; transition: all 1s ease-out 0s; z-index: 11; position: absolute;} .pians ul li .a .title .hd{ height: 2px; background: white; width: 50px;} .pians ul li .a .title .chid{ font-size: 16px; margin-top: 10px;} .pians ul li .a .imgs{ position: absolute; bottom: 40px; z-index: 11; transition: all 1s ease-out 0s;} .pians ul li .a:hover .imgs{ transform:translateY(-40px);} .pians ul li .a:hover .title{ transform:translateY(10px);} .pians ul li .a:hover .bg{ background-color: rgba(130,62,147,.7);} .pians ul li .a .title a{ height: auto; padding: 0; width: auto;} .pians ul li .a .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; transition: all 1s ease-out 0s; background-color: rgba(130,62,147,.0);} .pians ul li .a .imgs { position: absolute; bottom: 40px; z-index: 11; transition: all 1s ease-out 0s;} .pians ul li:nth-child(5) .a{ background: #067FC4; padding: 30px;} @media screen and (max-width: 1280px){ .pians ul li .a { width: 100%;}} /*组件样式*/