32.纯 CSS 创作六边形按钮特效

原文地址:https://segmentfault.com/a/1190000015020964

感想:简简单单的动画特效,位置,动画。

HTML代码:

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

CSS代码:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav{
    --h: 3em;
}
nav:nth-child(1){
    --rate: 1.5;
    --bgcolor: black;
}
nav:nth-child(2){
    --rate: 1.732;
    --bgcolor: brown;
}
nav:nth-child(3){
    --rate: 2;
    --bgcolor: green;
}
nav ul{
    padding: 0;
}
nav ul li{
    position: relative;
    list-style-type: none;
    width: calc(var(--h) * var(--rate));
    height: var(--h);
    line-height: var(--h);
    margin: 2em;
    background-color: var(--bgcolor);
    color: white;
    font-family: sans-serif;
    text-align: center;
}
/* 用伪元素增加2个倾斜的矩形 */
nav ul li::before,
nav ul li::after{
    position: absolute;
    top: 0;
    left: 0;
    content: ‘‘;
    /* inherit : 继承 */
    width: inherit;
    height: inherit;
    background-color: var(--bgcolor);
    z-index: -1;
    filter: opacity(0);
    transition: 0.3s;
}
nav ul li::before{
    /* 角度 位置 */
    transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
    transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}
nav ul li:hover::before{
    filter: opacity(1);
    transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after{
    filter: opacity(1);
    transform: rotate(-60deg) translateX(0);
}

原文地址:https://www.cnblogs.com/FlyingLiao/p/10340137.html

时间: 01-30

32.纯 CSS 创作六边形按钮特效的相关文章

纯CSS实现3D按钮效果

今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常少,如下所示 a.css-3d-btn{ position: relative; color: rgba(255, 255, 255, 1); text-decoration: none; background-color: rgba(219, 87, 51, 1); font-family: "M

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我

纯CSS实现超酷发送按钮

p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 今天在Dribble闲逛,偶然间看到一个不错的发送完成效果,使用纯css实现了下,最终效果如下. ---------------- ---------------------------------------- 在线研究点击这里,下载收藏点击这里. ---------------------------------------- --------------- 制作这个案例,你需要拥有 1.

简单实用的纯css按钮效果

在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者.下面就是一个纯css按钮,需要的可以参考. css代码 .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white

ybutton 高端大气上档次华丽的按钮特效

小菜偶然在某网站中看到一款非常华丽的按钮特效,感觉十分有必要抄袭下来,以备日后使用. 简单描述一下按钮的效果:鼠标移到按钮上的时候,会出现灯光闪过的效果,非常的高端. 但遗憾的,这么牛逼的效果,仅仅兼容谷歌浏览器,连火狐都识别不了. 因为这个效果没有用图片,更没有用js,纯css打造,因此涉及一些高级css技术,造成只有谷歌能识别.但即便是这样,在其他浏览器下的效果也还可以,不至于不堪入目. 先来张效果图(其实,图上看不出什么): ybutton在线演示 ybutton GitHub项目地址 y

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 1 #square {

CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

纯css实现扁平化360卫士logo demo

前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的. 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下. 开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄.不过,好在以前用过photoshop绘制过一些简单的icon.所以,经过我仔细 的分析.大概有了思路,这两个东东是可以利用box-shadow这个属性来实现.虽然跟photoshop绘制有点不同,但是大致还是差不多的. 代码效果预览地址:http://code.w3ctech.co