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>​

最后

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

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

相关推荐
爱电摇的小码农6 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
灵犀学长12 小时前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
千鼎数字孪生-可视化1 天前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
iphone1083 天前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一只小风华~4 天前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
长路 ㅤ   4 天前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481214 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d4 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
涔溪7 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang7 天前
前端如何实现电子签名
前端·javascript·html5