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())操作

相关推荐
AA-代码批发V哥1 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作