效果展示
完整源码
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Css实现crad 悬停效果</title><link rel="stylesheet" href="css/style.css"></head><body><div class="card"><div class="circle" style="--clr:#f40103;"><img src="img/cocacola_logo.png" class="logo"></div><div class="content"><h2>Cocaola</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi magni laboriosam, aspernatur pariatur odit necessitatibus.<a href="#">Explore More</a></p></div><img src="img/cocacola.png" alt="cocacola" class="product_img"></div></body></html>
/* google front *//* @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); */@import './google-front.css';*{margin: 0;padding: 0;box-sizing: border-box;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #151515;font-family: 'Poppins', sans-serif;}.card{position: relative;width: 350px;height: 350px;display: flex;justify-content: center;align-items: center;transition: 0.5s;/* background-color: #333; */transition-delay: 0.5s;}.card:hover{width: 600px;transition-delay: 0.5s;}.card .circle{position: absolute;top:0;left: 0;width: 100%;height: 100%;border-radius: 20px;display: flex;justify-content: center;align-items: center;}.card .circle::before{content: '';position: absolute;top:0;left: 0;width: 350px;height: 350px;border-radius: 50%;background: #191919;border: 8px solid var(--clr);filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));transition: 0.5s, background 0.5s;transition-delay: 0.75s, 1s;}.card:hover .circle::before{transition-delay: 0.5s;width: 100%;height: 100%;border-radius: 20px;background: var(--clr);}.card .circle .logo{position: relative;width: 250px;transition: 0.5s;transition-delay: 0.5s;}.card:hover .circle .logo {transform: scale(0);transition-delay: 0s;}.card .product_img{position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%) scale(0) rotate(315deg);height: 300px;transition: 0.5s ease-in-out;}.card:hover .product_img {transition-delay: 0.75s;top:25%;left: 92%;transform: translate(-50%, -50%) scale(1) rotate(15deg);height: 500px;}.card .content{position: absolute;width: 50%;left: 20%;padding: 20px 20px 30px 40px;opacity: 0;transition: 0.5s;visibility: hidden;}.card:hover .content{transition-delay: 0.75s;opacity: 1;visibility: visible;left: 20px;}.card .content h2{color: #fff;text-transform: uppercase;font-size: 2.5em;line-height: 1em;}.card .content p{color: #fff;}.card .content a{position: relative;color: #111;background-color: #fff;padding:10px 20px;border-radius: 10px;display: inline-block;text-decoration: none;font-weight: 600;margin-top: 10px;}
/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 200;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLFj_Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 200;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLFj_Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 200;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 300;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 300;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 300;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url(../front/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url(../front/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url(../front/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 800;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 800;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 800;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* devanagari */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 900;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLBT5Z11lFc-K.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}/* latin-ext */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 900;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLBT5Z11lFc-K.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {font-family: 'Poppins';font-style: normal;font-weight: 900;font-display: swap;src: url(../front/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
