css实现带圈圈的图文卡片悬浮弹出文字动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现带圈圈的图文卡片悬浮弹出文字动画效果代码,鼠标悬浮上去后圈圈自动180度旋转。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
background-color: #2e2e31;
display: flex;
align-items: center;
height: 100vh;
width: 100vw;
}
.container {
height: 100vh;
width: 100vw;
max-height: 600px;
max-width: 1200px;
min-height: 600px;
min-width: 1100px;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
.panel {
height: 270px;
width: 190px;
position: relative;
}
.panel:hover .card {
filter: blur(1.5px);
}
.panel:hover .card1 {
background-size: 215% 135%;
}
.panel:hover .card2 {
background-size: 115% 115%;
}
.panel:hover .card3 {
background-size: 155% 115%;
}
.panel:hover .title {
color: rgba(255, 255, 255, 0.2);
}
.panel:hover .border {
border: 1px solid white;
}
.panel:hover .slide {
bottom: 0px;
}
.panel:hover .ring:before,
.panel:hover .ring:after {
transform: translateX(-50%) translateY(-50%) rotate(310deg);
}
.ring,
.card,
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0