效果展示
完整源码
<!DOCTYPE html><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;}
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶(hù)，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶(hù)型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶(hù)型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專(zhuān)屬顧問(wèn)
