css+div实现公司服务业务图文卡片悬浮动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现公司服务业务图文卡片悬浮动画效果代码
代码标签: css div 公司 服务 业务 图文 卡片 悬浮 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.1.js"></script> <style> @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap"); h2 { font-family: "Playfair Display", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .card { position: relative; } .card::before { position: absolute; content: ""; width: 100%; height: 100%; transition: 0.6s; z-index: 0; background-color: #4f46e5; } .card:hover { box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem rgba(0, 0, 0, 0.53); } .card:nth-child(1)::before { bottom: 0; right: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%); } .card:nth-child(2)::before { bottom: 0; left: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%); } .card:nth-child(3)::before { top: 0; right: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%); } .card:nth-child(4)::before { top: 0; left: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%); } .card p { transition: 0.8s; } .card:hover::before { clip-path: circle(110vw at 100% 100%); } .card:hover p { color: #fff; } @media screen and (min-width: 62.5rem) { .circle { position: absolute; width: 100%; height: 100%; z-index: 0; } } .card:nth-child(1) .circle { background: url("//repo.bfw.wiki/bfwrepo/image/62be28fc221f0.png") no-repeat 50% 50%/cover; bottom: 0; right: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%); } .card:nth-child(2) .circle { background: url("//repo.bfw.wiki/bfwrepo/image/60e1912e6fa93.png") no-repeat 50% 50%/cover; bottom: 0; left: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%); } .card:nth-child(3) .circle { background: url("//repo.bfw.wiki/bfwrepo/image/637adcfa0b4a5.jpeg") no-repeat 50% 50%/cover; top: 0; right: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%); } .card:nth-child(4) .circle { background: url("//repo.bfw.wiki/bfwrepo/image/64fe45c2ecb26.png") no-repeat 50% 50%/cover; top: 0; left: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%); } </style> </head> <body translate="no"> <section class="min-h-screen bg-gray-900 text-center py-20 px-8 xl:px-0 flex flex-col justify-center"> <span class="text-gray-400 text-lg max-w-lg mx-auto mb-2 capitalize flex items-center">what we're offering <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0