html中图标悬停,CSS3 图标悬停左右摇动动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);

body {

background: #bed62e;

perspective: 1000px;

transform-style: preserve-3d;

display: flex;

height: 100vh;

}

.card {

pointer-events: none;

transform: translateZ(0);

padding: 30px;

background: #bed62e;

border-radius: 5px;

width: 400px;

height: 200px;

margin: auto;

transform-style: preserve-3d;

backface-visibility: hidden;

display: flex;

position: relative;

}

.card:after {

content: " ";

position: absolute;

width: 100%;

height: 10px;

border-radius: 50%;

left: 0;

bottom: -50px;

}

.card .card-content {

margin: auto;

text-align: center;

transform-style: preserve-3d;

}

.card h1 {

transform: translateZ(100px);

}

.card p {

transform: translateZ(50px);

display: block;

}

.card p.related {

transform: translateZ(80px);

font-style: italic;

}

.card a {

color: #69c6b8;

pointer-events: auto;

}