css卡片悬停转圈圈动画效果代码
代码语言:html
所属分类:悬停
代码描述:css卡片悬停转圈圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500.700'> <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, .border, .slide, .line { display: flex; justify-content: center; align-items: center; } .ring { color: #fffbf1; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 170px; } .card { background: #f0ead6; position: relative; transition: all 1s; height: 270px; width: 190px; border: 1px solid white; } .card1 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb30e060d133.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_90,h_200,/quality,q_90"); background-repeat: no-repeat; background-size: 200% 120%; } .card2 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb30e060d133.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_90,h_200,/quality,q_90"); background-repeat: no-repeat; background-size: 100% 100%; } .card3 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb30e060d133.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_90,h_200,/quality,q_90"); background-repeat: no-repeat; background-size: 140% 100%; } .ring:before, .ring:after { content: ""; padding: 0.7em 0.4em; position: absolute; left: 50%; width: 115%; top: 50%; display: block; border: 5px solid #50c9c3; border-radius: 50%; transition: transform 1s; transform: translateX(-50%) translateY(-50%) rotate(50deg); } .ring:before { border-color: #ebebeb #ebebeb rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); z-index: -1; } .ring:after { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ebebeb #ebebeb; } p { text-align: center; position: absolute; font-family: "Playfair Display"; } .title { font-size: 36px; font-weight: 700; transition: all 1s; top: 0; } .para { bottom: 0; font-size: 16px; font-family: "Raleway"; padding: 20px; margin: 0; text-align: center; } .border { position: absolute; border: 1px solid rgba(255, 255, 255, 0.5); height: 260px; width: 180px; transition: border 1s; overflow: hidden; } .s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0