css实现 炫酷3d层叠标签

最新推荐文章于 2021-08-04 08:03:53 发布
最新推荐文章于 2021-08-04 08:03:53 发布
阅读量510 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qin904495445/article/details/105792745
版权

动画是从b站看up主视频学的 非原创

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #222;
        }

        ul {
            position: relative;
            display: flex;
            transform-style: preserve-3d;
            transform: rotate(-25deg) skew(25deg);
        }

        ul li {
            list-style: none;
            position: relative;
            width: 60px;
            height: 60px;
            margin: 0 10px;
        }

        ul li::before{
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 10px;
            background-color: #2a2a2a;
            transform-origin: top;
            transform: skewX(-41deg);
            z-index: 10;
        }
        ul li::after{
            content: '';
            position: absolute;
            top: 0px;
            left: -9px;
            width: 9px;
            height: 100%;
            background-color: #2a2a2a;
            transform-origin: right;
            transform: skewY(-49deg);
            z-index: 10;
        }
        ul li:hover{
            z-index: 1000;
        }
        ul li span {
            position: absolute;
            
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex !important;
            justify-content: center;
            align-items: center;
            background-color: #333;
            color: rgba(255, 255, 255, 0.2);
            font-size: 30px !important;
            transition: 0.2s;
        }

        ul li:hover span {
            z-index: 1000;
            color: #fff;
            box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
            transition: calc(var(--i) * 0.1s);
            transform: translate(calc((var(--i) - 1) * 10px), calc((var(--i) - 1) * -10px));
            opacity: calc(var(--i) * 0.2);
        }

        ul li:hover:nth-child(1) span {
            background-color: #3b5999;
        }

        ul li:hover:nth-child(2) span {
            background-color: #55acee;
        }

        ul li:hover:nth-child(3) span {
            background-color: #25d366;
        }

        ul li:hover:nth-child(4) span {
            background-color: #0077b5;
        }

        ul li:hover:nth-child(5) span {
            background-color: #e4405f;
        }
    </style>
</head>

<body>
    <ul>
        <li style="z-index:50;">
            <a href="#">
                <span style="--i:1;"></span>
                <span style="--i:2;"></span>
                <span style="--i:3;"></span>
                <span style="--i:4;"></span>
                <span style="--i:5;" class="fa fa-facebook"></span>
            </a>
        </li>
        <li style="z-index:40;">
            <a href="#">
                <span style="--i:1;"></span>
                <span style="--i:2;"></span>
                <span style="--i:3;"></span>
                <span style="--i:4;"></span>
                <span style="--i:5;" class="fa fa-twitter"></span>
            </a>
        </li>
        <li style="z-index:30;">
            <a href="#">
                <span style="--i:1;"></span>
                <span style="--i:2;"></span>
                <span style="--i:3;"></span>
                <span style="--i:4;"></span>
                <span style="--i:5;" class="fa fa-whatsapp"></span>
            </a>
        </li>
        <li style="z-index:20;">
            <a href="#">
                <span style="--i:1;"></span>
                <span style="--i:2;"></span>
                <span style="--i:3;"></span>
                <span style="--i:4;"></span>
                <span style="--i:5;" class="fa fa-linkedin"></span>
            </a>
        </li>
        <li style="z-index:10;">
            <a href="#">
                <span style="--i:1;"></span>
                <span style="--i:2;"></span>
                <span style="--i:3;"></span>
                <span style="--i:4;"></span>
                <span style="--i:5;" class="fa fa-instagram"></span>
            </a>
        </li>
    </ul>
</body>

</html>
wm-tuzki
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
84.CSS 3D波浪加载特效
粉丝们务必加入微信粉丝群
09-06 660
效果 (源码网盘地址在最后) 演示视频 【前端特效 84】CSS 3D 波浪加载特效 视频播放地址一：https://www.ixigua.com/6867105205226308110/ 视频播放地址二：https://www.bilibili.com/video/BV15D4y1m7JG/ 源码 index.html <!DOCTYPE html> <html l
CSS 3.0实现卡片悬停立体特效
越陌度阡
06-20 3390
今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效，效果如下： 以下是代码实现，欢迎大家制复粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
CSS3 3D银行卡片层叠特效特效代码
03-20
CSS3 3D银行卡片层叠特效是一款纯CSS3绘制的3D层叠卡片鼠标悬停滑动展示特效。
DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
热门推荐
php菜鸟技术天地
06-12 1万+
让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。  重叠样式需要主要CSS样式解释  1、z-index 重叠顺序属性  2、position:relative和position:absolute设置对象属性为可定位（可重叠）  3、left right top bottom绝对定位具体位置设置  配合的样式  1、css width  2、c
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
weixin_33469623的博客
08-04 753
继上一次学了如何去运用css画平面图形，这一次学如何去画正方体，从2D向着3D学习，虽然有点满，但总是一个过程，一点一点积累，然后记录起来。Transfrom3D在这一次中运用到了一下几种属性：rotate:rotateX() rotateY() rotateZ() ；这个属性能够实现翻转效果translate:translateX translateY() translateZ()　　；这...
CSS 3.0实现立体卡片特效
越陌度阡
06-02 2822
给大家分享一个由CSS 3.0实现的立体卡片特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 3.0实.
纯CSS3实现超级炫酷3D效果源码下载
11-03
【纯CSS3实现超级炫酷3D效果源码下载】是一个引人入胜的主题，它展示了CSS3在现代网页设计中的强大潜力。CSS3是层叠样式表的第三版，相较于之前的版本，它引入了许多新的特性和功能，尤其是3D变换和动画效果，让网页...
纯CSS3炫酷3D星空动画特效
05-02
【标题】"纯CSS3炫酷3D星空动画特效"涉及了现代网页设计中的关键技能——CSS3的应用，特别是其在实现3D效果和动画功能上的潜力。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，极大地扩展了对网页样式...
CSS3炫酷精美3D横向菜单.rar
最新发布
10-01
【标题】"CSS3炫酷精美3D横向菜单.rar"是一个关于使用CSS3技术实现的高级网页导航菜单的资源包。这个菜单具有独特的3D视觉效果，为网站增添了一种现代且引人入胜的用户体验。CSS3是层叠样式表（Cascading Style ...
CSS3炫酷3D弹性按钮特效源码免费下载
11-05
"CSS3炫酷3D弹性按钮特效源码免费下载"这个标题指出，我们将会讨论一个使用CSS3技术实现的、具有3D视觉效果和弹性动画的按钮设计。这种特效能够使网页元素更加生动吸引人，提升用户交互体验。"3D弹性按钮"是指按钮在...
CSS3 3D卡片层叠动画
08-23
CSS3提供了很多属性可以实现3D效果，之前我们也分享过一些基于CSS3和HTML5的卡片动画，例如这个纯CSS3实现可感知方向的卡片翻转动画和CSS3实现答题卡片抽取切换动画。这次我们给大家带来另一款基于CSS3的卡片层叠动画，它可以让若干张卡片上下层叠起来，并且在鼠标滑过时给卡片呈现发光的效果，卡片层叠起来后给人3D立体的视觉效果。
CSS3炫酷个人简历网站模板
06-24
CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它为网页设计带来了丰富的视觉效果和动态交互性。在这个个人简历模板中，CSS3的应用体现在以下几个关键知识点： 1. **选择器增强**：CSS3引入了更多的选择...
怎么用html实现叠加效果,使用CSS3混合模式实现的图案叠加特效
weixin_33687939的博客
06-04 629
CSS语言：CSSSCSS确定.line:nth-child(1) {width: 8px;height: 8px;background-color: #f0eff4;top: -4px;left: -4px;z-index: -1;mix-blend-mode: difference;-webkit-animation: magic 16s ease-in-out infinite altern...
CSS 中重要的层叠概念
weixin_34221775的博客
09-21 208
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~ 屏幕是一个二维平面，然而HTML元素却是排列在三维坐标系中，x为水平位置，y为垂直位置，z为屏幕由内向外方向的位...
定位层级关系(Z-index标签层叠)详解以及标签包含规范
dwjdj的博客
01-24 1789
定位层级关系(Z-index标签层叠) 当对多个标签设置定位时，定位标签之间有可能会发生重叠，要想改变重叠的顺序，可以对定位标签应用z-index属性，取值可取正整数，负数和0，默认状况下z-index属性值为0，并且取值越大，设置该属性的定位标签在层叠标签中越居上。 ☞ 只有定位（静态定位除外）的元素才有层级关系 ☞ 通过z-index属性去设置（改变）元素的层级关系 ☞ 默认的z-index:...
解决span标签重叠的问题
软件维修师
12-23 8733
最近写Demo遇到这样的问题，span标签被用来组合文档中的行内元素。 所以设置它的margin-top\margin-bottom 没有什么效果，导致会出现重叠的现象span标签换行后，与上一行重叠。 只需要添加float属性就可以了， 添加float:left; 效果如下 怎么样，是不是很简单呢，就这样吧 感谢你的阅读，我是 重庆-传说 2017年12月23日
css3向上标签立体,CSS3 立体感的商品打折标签
weixin_42509847的博客
08-04 292
CSS语言：CSSSCSS确定.product {width: 300px;font-family: sans-serif;margin: 2%;}.product-image {background: pink;margin-bottom: 10px;position: relative;min-height: 250px;}.onsale-section {position: absolute...
3D分层图像悬停效果 html+css
你好呀，很高兴你在看这里~
04-19 1796
一.（⊙-⊙）先看效果（完整源码在底部）： 二. (￣◇￣)实现过程步骤： 0.基本css样式（复制即可）* ： *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content:
html5 微信签到墙,3D签到墙 webgl示例源码(three.js)
weixin_30957757的博客
06-04 1895
【实例简介】【实例截图】【核心代码】three.js css3d - periodic tablehtml, body {height: 100%;}body {background-color: #000000;margin: 0;font-family: Helvetica, sans-serif;;overflow: hidden;}a {color: #ffffff;}#info {pos...
纯css实现炫酷抖音女友3d旋转相册特效
05-11
实现炫酷抖音女友3D旋转相册特效，需要掌握CSS3的一些基本动画和转换属性。首先需要准备照片，然后将照片放在一个容器中，设置容器的宽度、高度、视距、景深。接下来，需要使用CSS3的旋转属性将照片进行旋转，同时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值