html|实现炫酷图片悬浮翻转

前言

网上看到的炫酷图片翻转特效,好看纯分享

正文:

1.效果

2.源码

复制代码
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>3D 卡片悬浮</title>    <style>      :root {        --card-height: 300px;        --card-width: calc(var(--card-height) / 1.5);      }      * {        box-sizing: border-box;      }      body {        width: 100vw;        height: 100vh;        margin: 0;        display: flex;        justify-content: center;        align-items: center;        background: #191c29;      }      .card {        width: var(--card-width);        height: var(--card-height);        position: relative;        display: flex;        justify-content: center;        align-items: flex-end;        padding: 0 36px;        perspective: 2500px;        margin: 0 50px;      }​      .cover-image {        width: 100%;        height: 100%;        object-fit: cover;      }​      .wrapper {        transition: all 0.5s;        position: absolute;        width: 100%;        z-index: -1;      }​      .card:hover .wrapper {        transform: perspective(900px) translateY(-5%) rotateX(25deg)          translateZ(0);        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);        -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);      }​      .wrapper::before,      .wrapper::after {        content: '';        opacity: 0;        width: 100%;        height: 80px;        transition: all 0.5s;        position: absolute;        left: 0;      }      .wrapper::before {        top: 0;        height: 100%;        background-image: linear-gradient(          to top,          transparent 46%,          rgba(12, 13, 19, 0.5) 68%,          rgba(12, 13, 19) 97%        );      }      .wrapper::after {        bottom: 0;        opacity: 1;        background-image: linear-gradient(          to bottom,          transparent 46%,          rgba(12, 13, 19, 0.5) 68%,          rgba(12, 13, 19) 97%        );      }​      .card:hover .wrapper::before,      .wrapper::after {        opacity: 1;      }​      .card:hover .wrapper::after {        height: 120px;      }      .title {        width: 100%;        transition: transform 0.5s;      }      .card:hover .title {        transform: translate3d(0%, -50px, 100px);      }​      .character {        width: 100%;        opacity: 0;        transition: all 0.5s;        position: absolute;        z-index: -1;      }​      .card:hover .character {        opacity: 1;        transform: translate3d(0%, -30%, 100px);      }</style>  </head>  <body>    <div class="card">      <div class="wrapper">        <img          src="https://gd-hbimg.huaban.com/768fb9e505479fc6c3c5704bf5a3e20b1ba5f119124aa-HvpIF1_fw1200"          class="cover-image"        />      </div>      <img        src="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC"        class="title"      />      <img        src="https://gd-hbimg.huaban.com/d0273d6311acc8641c7715ee5b09217e26880c15146b5-pFqBHa_fw1200"        class="character"      />    </div>​    <div class="card">      <div class="wrapper">        <img          src="https://gd-hbimg.huaban.com/cbcd12b8d1ea9abb955f022de6a37be26ab73b9423921-YBTOhc"          class="cover-image"        />      </div>      <img        src="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC"        class="title"      />      <img        src="https://gd-hbimg.huaban.com/84675eb16a4dcc4b86db8652647eae15e87c99bf63b593-Z0Xb2S"        class="character"      />    </div>  </body></html>​

最后

素材来源网络,如有侵权请联系删除。

使用过程中出现问题欢迎交流学习。

相关推荐
心一信息1 天前
ThreeJS骨骼示例
css·css3·html5
笑鸿的学习笔记2 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
java水泥工2 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-茶叶种植大数据溯源平台
大数据·echarts·html5
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
小菜全3 天前
打包 Uniapp
javascript·vue.js·html5
空山新雨(大队长)3 天前
HTML第九课:HTML5新增标签
前端·html·html5
java水泥工4 天前
基于Echarts+HTML5可视化数据大屏展示-旅游智慧中心
数据分析·echarts·html5
卿·静5 天前
Node.js轻松生成动态二维码
前端·javascript·vscode·node.js·html5