html+css 炫酷的流边按钮

前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

文章目录

一、效果

二、原理解析

1.给每一个按钮添加一个hover效果,当鼠标移动上去时改变按钮的效果。

2.当按钮上有鼠标时,hover效果触发。

javascript 复制代码
/* 鼠标悬停时改变线条样式 */
.button:hover .shape {
    stroke: #06e6a0;
    stroke-width: 3;
    stroke-dasharray: 50 0;
    stroke-dashoffset: 0;
}

2.1stroke-dasharray介绍

2.2stroke-dashoffset介绍

3.具体的变换参数,直接看代码,可以一键复制,查看效果

三、上代码,可以直接复制使用

目录

html

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>html+css 炫酷的流边按钮</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
        html+css 炫酷的流边按钮</h1>
    <div class="wrapper">
        <div class="button">
            <svg width="160" height="50">
                <rect class="shape" width="160" height="50"></rect>
                <div class="text">求点赞</div>
            </svg>
        </div>
        <div class="button">
            <svg width="160" height="50">
                <rect class="shape" width="160" height="50"></rect>
                <div class="text">求关注</div>
            </svg>
        </div>
        <div class="button">
            <svg width="160" height="50">
                <rect class="shape" width="160" height="50"></rect>
                <div class="text">求分享</div>
            </svg>
        </div>
    </div>


</div>
</body>

</html>

css

css 复制代码
* {
    margin: 0;
    padding: 0;
}

.container {
    /* 方便演示,居中显示 */
    height: 100vh;
    background-color: #2c3e50;
}

.wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.button {
    /* 相对定位 */
    position: relative;
    width: 160px;
    height: 50px;
    margin: 0 15px;
    cursor: pointer;
}

.shape {
    /* 取消填充 */
    fill: none;
    /* 定义一条线 */
    stroke: #009ffd;
    /* 线的厚度 */
    stroke-width: 6;
    /* 设置虚线:虚线长度 间距 */
    stroke-dasharray: 100 400;
    /* 虚线偏移量 */
    stroke-dashoffset: -240;
    /* 过渡效果 */
    transition: 1s ease;
}

.text {
    /* 绝对定位 居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    letter-spacing: 2px;
}

/* 鼠标悬停时改变线条样式 */
.button:hover .shape {
    stroke: #06e6a0;
    stroke-width: 3;
    stroke-dasharray: 50 0;
    stroke-dashoffset: 0;
}

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕

更多专栏订阅推荐:

👍 html+css+js 绚丽效果

💕 vue

✈️ Electron

⭐️ js

📝 字符串

✍️ 时间对象(Date())操作

相关推荐
夏天想6 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界13 分钟前
这个 CSS 特性,可能终结样式冲突
前端·css
zwjapple21 分钟前
css变量的使用。
css
zzzsde26 分钟前
【C++】深入理解string类(5)
java·前端·算法
袁煦丞29 分钟前
随机菜谱解救选择困难!YunYouJun/cook 成为你的厨房锦囊:cpolar内网穿透实验室第549个成功挑战
前端·程序员·远程工作
携欢37 分钟前
PortSwigger靶场之CSRF where token is tied to non-session cookie通关秘籍
运维·服务器·前端
川石课堂软件测试42 分钟前
CSS中常用的几种定位。
开发语言·css·python·网络协议·http·html·pytest
我是华为OD~HR~栗栗呀1 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试
詩句☾⋆᭄南笙1 小时前
CSS美化网页元素
前端·css·html
程序0071 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html