C++复刻：[流光按钮]+[悬浮波纹按钮]

已于 2023-07-31 21:32:16 修改
阅读量531 收藏 8
点赞数 1
分类专栏： QT_C++ 文章标签： c++ qt
于 2023-07-30 22:18:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47355554/article/details/132011881
版权

目录

参考

Python版本：GitHub地址
B站主页

效果

在这里插入图片描述

实现

main.cpp

#include "dialog.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();
    return a.exec();
}

dialog.h

dialog.cpp

#include "dialog.h"
#include "flowingRayButton.h"
#include "hoveringRippleButton.h"
#pragma execution_character_set("utf-8")
Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    //隐藏最大化按钮|置顶
    setWindowFlags(this->windowFlags()& ~Qt::WindowMaximizeButtonHint|Qt::WindowStaysOnTopHint);
    this->resize(800, 800);
    this->setStyleSheet("background:#000000");
    // 流动光线按钮
    FlowingRayButton *a1 = new FlowingRayButton(this);
    a1->setGeometry(QRect(200, 100, 440, 140));
    a1->setBorder(6);

    auto w =new QWidget(this);
    w->setGeometry(0,270,this->width(),this->height());
    w->setStyleSheet("background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #00bd39, "
                     "stop:0.1 #00b844, stop:0.2 #00b44f, stop:0.3 #00af59, stop:0.4 #00aa64, "
                     "stop:0.5 #01a66f, stop:0.6 #01a17a, stop:0.7 #019c84, stop:0.8 #01988f, "
                     "stop:0.9 #01939a);");

    FlowingRayButton *a2 = new FlowingRayButton(this);
    a2->setGeometry(QRect(200, 300, 440, 140));

    /* Rborder-width 是一个自定义的属性，它不是官方的 CSS 属性;
     * Rborder-width 用于样式表中不会产生任何影响。可以忽略警告Unknown property Rborder-width*/
    a2->setStyleSheet("QFrame{"
                      "	background-color: rgba(255, 255, 255,255);"
                      "	border:none;"
                      "	border-radius:10px;"
                      " Rborder-width:10px;"
                      "}"
                      "QPushButton{border-radius: 15px;color:#ffffff;}"
                      );

    a2->setStyleSheetConfig();


    new HoveringRippleButton(this,QRect(200, 500, 440, 140), QSize(440, 140));
}

Dialog::~Dialog()
{
}

flowingRayButton.h 流动光线按钮

#ifndef FLOWINGRAYBUTTON_H
#define FLOWINGRAYBUTTON_H

#include <QFrame>
#include <QPushButton>
#include <QWidget>
#include <QLineEdit>
#include <QGraphicsBlurEffect>
#include <QRect>
#include <QSize>
#include <Qt>
#include <QTimer>
#include <QParallelAnimationGroup>
#include <QPropertyAnimation>
#include <QEasingCurve>
#include <QPoint>
#include <QSequentialAnimationGroup>
#include <QAbstractAnimation>
#include <QRegularExpression>
#include <QBrush>
#include <QColor>
#include <QCursor>
#include <QFont>
#include <QPainter>
#include <QPainterPath>
#include <QLinearGradient>
#include <QDebug>
// 流动光线按钮
class FlowingRayButton : public QFrame
{
    Q_OBJECT
public:
    FlowingRayButton(QWidget *parent = nullptr);
    ~FlowingRayButton();
    void setBorder(int border = 5); // 设置按钮在QFrame中的大小
    void setStyleSheetConfig();     // 根据样式重新配置(解析样式设置)
    QPushButton *getFlowingRayButton();
private:
    QPushButton *m_pPushButton;
    int border_radius;              // 边框圆角
    int border;                     // 边界
    QTimer *m_pTimer;
    int rect_1_offset;              //
    int rect_2_offset;
    int rect_1_start;
    int rect_2_start;
    int init_x;
    int flag;
    void initUI();
    void initAnimationConfig();     // 初始化动画配置
    void enterEvent(QEvent *event) override;//重写处理鼠标光标进入部件的事件
    void leaveEvent(QEvent *event) override;//重写处理鼠标光标离开部件的事件
    void paintEvent(QPaintEvent *event) override;//重写绘制事件

private slots:
    void offsetUpdate();            // 偏移更新
};

#endif // FLOWINGRAYBUTTON_H

flowingRayButton.cpp 流动光线按钮

#include "flowingRayButton.h"
// 流动光线按钮
FlowingRayButton::FlowingRayButton(QWidget *parent)
    : QFrame(parent)
{
    border_radius=10;
    border=5;
    initUI();
}

FlowingRayButton::~FlowingRayButton()
{

}

void FlowingRayButton::initUI()
{
    this->resize(300, 100);
    this->setStyleSheet("QFrame{"
                  "	background-color: rgba(255, 255, 255,0);"
                  "	border:none;"
                  "	border-radius:10px;"
                  " Rborder-width:5px;"
                  "}"
                  "QPushButton{border-radius: 5px;color:#ff0066;}"
                  );
    m_pPushButton = new QPushButton(this);
    setBorder();

    QFont font;
    font.setPointSize(25);

    m_pPushButton->setFont(font);
    m_pPushButton->setText("Start Coding");
    m_pTimer = new QTimer(this);
    m_pTimer->setInterval(10);      //间隔毫秒
    connect(m_pTimer, SIGNAL(timeout()), this, SLOT(offsetUpdate()));
    initAnimationConfig();
}

void FlowingRayButton::setBorder(int border)
{
    int btn_width = this->width() - border * 2;
    int btn_height = this->height() - border * 2;
    int btn_x = border;
    int btn_y = border;
    m_pPushButton->setGeometry(QRect(btn_x, btn_y, btn_width, btn_height));
}

 // 根据样式重新配置(解析样式设置)
void FlowingRayButton::setStyleSheetConfig()
{
    /*匹配规则;
     * 注意：正则表达式在找到第一个匹配项后就会停止查找，所以它不会再次匹配。
     * 从头开始查找匹配 border-radius: 的部分，然后尝试匹配一个或多个数字字符 (\\d+)，而后匹配 px;
     * 使用 \\s* 来匹配可能存在的空格字符，包括零个或多个空格;
     * \\d+表示匹配一个或多个数字字符
     * 使用 (?P<border_radius>\\d+) 来匹配 border-radius 后面的数字，并将其命名为 border_radius;*/
    QRegularExpression radius_match("border-radius:\\s*(?P<border_radius>\\d+)px;");
    QRegularExpressionMatch radius_result = radius_match.match(this->styleSheet());
    if (radius_result.hasMatch())
    {
        //提取捕获组中命名为 border_radius的内容
        border_radius = radius_result.captured("border_radius").toInt();
    }

    QRegularExpression Rborder_width_match("Rborder-width:\\s*(?P<Rborder_width>\\d+)px;");
    QRegularExpressionMatch Rborder_width_result = Rborder_width_match.match(this->styleSheet());
    if (Rborder_width_result.hasMatch()) {
        border = Rborder_width_result.captured("Rborder_width").toInt();
    }

    // 根据样式重新配置QPushButton边界
    setBorder(border);
    initAnimationConfig();
}

// 初始化动画配置
void FlowingRayButton::initAnimationConfig()
{
    rect_1_offset = 0;
    rect_2_offset = 0;
    rect_1_start = 0;
    rect_2_start = -this->width();
    init_x = -this->width();
    flag = 0;
}

// 偏移更新
void  FlowingRayButton::offsetUpdate()
{
    if(rect_1_offset >= this->width()&&flag==0) {
        rect_1_offset = 0;
        rect_1_start = init_x;
        flag=1;
    }
    if(rect_1_offset >= this->width()*2&&flag==1) {
        rect_1_offset = 0;
        rect_1_start = init_x;
    }

    if (rect_2_offset >= this->width() * 2) {
        rect_2_offset = 0;
        rect_2_start = init_x;
    }

    rect_1_offset += 3;
    rect_2_offset += 3;

    update();
}

//重写处理鼠标光标进入部件的事件
void FlowingRayButton::enterEvent(QEvent *event)
{
    m_pTimer->start();
    // 调用父类的 enterEvent 函数，以保持默认行为
    QFrame::enterEvent(event);
}

//重写处理鼠标光标离开部件的事件
void FlowingRayButton::leaveEvent(QEvent *event)
{
    m_pTimer->stop();
    // 调用父类的 leaveEvent 函数，以保持默认行为
    QFrame::leaveEvent(event);
}

//重写绘制事件
void FlowingRayButton::paintEvent(QPaintEvent *event)
{
    // 调用父类的 paintEvent 函数，以保持默认行为
    QFrame::paintEvent(event);

    QPainterPath path;
    //添加一个带有圆角的矩形路径
    path.addRoundedRect(0, 0, this->width(), this->height(), border_radius, border_radius);

    QPainter painter(this);
    //设置渲染提示; QPainter::Antialiasing 是一种渲染提示，用于抗锯齿绘制，使得图形边缘更加平滑
    painter.setRenderHint(QPainter::Antialiasing);
    //设置画笔; Qt::NoPen 表示不使用画笔，也就是不绘制边框
    painter.setPen(Qt::NoPen);
    //设置剪裁路径，即限制绘制区域为指定的路径范围内
    painter.setClipPath(path);

    //线性渐变
    QLinearGradient gradient_1(rect_1_start + rect_1_offset, 0, rect_1_start + rect_1_offset + this->width(), 0);
    //在(0,1)之间设置颜色的渐变过程，将一个颜色逐渐过渡到另一个
    gradient_1.setColorAt(0, QColor(0, 164, 128, 230));
    gradient_1.setColorAt(0.166, QColor(13, 88, 166, 230));
    gradient_1.setColorAt(0.333, QColor(118, 8, 170, 230));
    gradient_1.setColorAt(0.5, QColor(255, 144, 0, 230));
    gradient_1.setColorAt(0.666, QColor(255, 255, 0, 230));
    gradient_1.setColorAt(0.833, QColor(165, 239, 0, 230));
    gradient_1.setColorAt(1, QColor(83, 223, 0, 230));

    painter.setBrush(gradient_1);
    painter.drawRect(rect_1_start + rect_1_offset, 0, this->width(), this->height());

    QLinearGradient gradient_2(rect_2_start + rect_2_offset, 0,rect_2_start + rect_2_offset + this->width(), 0);
    gradient_2.setColorAt(0, QColor(0, 164, 128, 230));
    gradient_2.setColorAt(0.166, QColor(13, 88, 166, 230));
    gradient_2.setColorAt(0.333, QColor(118, 8, 170, 230));
    gradient_2.setColorAt(0.5, QColor(255, 144, 0, 230));
    gradient_2.setColorAt(0.666, QColor(255, 255, 0, 230));
    gradient_2.setColorAt(0.833, QColor(165, 239, 0, 230));
    gradient_2.setColorAt(1, QColor(83, 223, 0, 230));

    painter.setBrush(gradient_2);
    painter.drawRect(rect_2_start + rect_2_offset, 0, this->width(), this->height());

}

QPushButton *FlowingRayButton::getFlowingRayButton()
{
    return m_pPushButton;
}

hoveringRippleButton.h 悬浮波纹按钮

#ifndef HOVERINGRIPPLEBUTTON_H
#define HOVERINGRIPPLEBUTTON_H

#include <QFrame>
#include <QFrame>
#include <QPushButton>
#include <QWidget>
#include <QPainter>
#include <QPainterPath>
#include <QTimer>
#include <QMouseEvent>
#include <QPropertyAnimation>
#include <QtCore/qmath.h>

//悬浮波纹按钮
class HoveringRippleButton : public QFrame
{
    Q_OBJECT
public:
    HoveringRippleButton(QWidget *parent = nullptr);
    HoveringRippleButton(QWidget *parent = nullptr, const QRect &geometry = QRect(), const QSize &minSize = QSize());
    ~HoveringRippleButton();

private:
    QRect geometry;
    QSize minSize;
    QPushButton *m_pPushButton;
    int corner_radius;              // 按钮的圆角半径
    int radius_var;                 // 半径变化值
    int radius;                     // 起始半径
    qreal max_radius;               // 最大半径
    QPoint center;                  // 鼠标点击坐标
    QColor color;                   // 填充颜色
    int msec;                       // 定时时间
    QTimer *m_pTimer;
    void initUI();
    void initAnimationConfig();     // 初始化动画配置
    void enterEvent(QEvent *event) override;//重写处理鼠标光标进入部件的事件
    void leaveEvent(QEvent *event) override;//重写处理鼠标光标离开部件的事件
    void paintEvent(QPaintEvent *event) override;//重写绘制事件
private slots:
    void incRadius();
    void decRadius();

};

#endif // HOVERINGRIPPLEBUTTON_H

hoveringRippleButton.cpp 悬浮波纹按钮

#include "hoveringRippleButton.h"
#pragma execution_character_set("utf-8")
//悬浮波纹按钮
HoveringRippleButton::HoveringRippleButton(QWidget *parent)
    : QFrame(parent)
{
    geometry=QRect(0,0,100,50);
    minSize =QSize(100,50);
    initUI();
}

HoveringRippleButton::HoveringRippleButton(QWidget *parent, const QRect &geometry, const QSize &minSize)
    : QFrame(parent), geometry(geometry), minSize(minSize)
{
    initUI();
}

HoveringRippleButton::~HoveringRippleButton()
{

}

void HoveringRippleButton::initUI()
{
    setMinimumSize(minSize);
    setStyleSheet("QFrame{"
                  "	background-color: rgb(46, 22, 177);"
                  "	border:none;"
                  "	border-radius:10px;"
                  "}"
                  "QPushButton{"
                  "	background-color: rgba(255, 255, 255, 0);"
                  "	color: rgb(255, 255, 255);"
                  "}");

    m_pPushButton = new QPushButton(this);
    m_pPushButton->setMinimumSize(minSize);
    m_pPushButton->setFixedSize(QSize(width(), height()));
    QFont font;
    font.setPointSize(25);
    m_pPushButton->setFont(font);
    m_pPushButton->setText("悬浮会变色喔");

    setGeometry(geometry);
    initAnimationConfig();
}

void HoveringRippleButton::initAnimationConfig()
{
    corner_radius = 10;                                     // 按钮的圆角半径
    radius_var = 2;                                         // 半径变化值
    radius = 0;                                             // 起始半径
    max_radius = qSqrt(width() * width() + height() * height());  // 最大半径
    center = QPoint();                                       // 鼠标点击坐标
    color = QColor(255, 89, 0);                              // 填充颜色
    msec = 10;                                               // 定时时间

    m_pTimer = new QTimer(this);
    m_pTimer->setInterval(msec);
    connect(m_pTimer,SIGNAL(timeout()), this, SLOT(incRadius()));
}

//重写处理鼠标光标进入部件的事件
void HoveringRippleButton::enterEvent(QEvent *event)
{
    // 调用父类的 enterEvent 函数，以保持默认行为
    QFrame::enterEvent(event);
    /* QCursor::pos() 获取当前鼠标的全局坐标
     * mapFromGlobal()将全局坐标转换为窗口内部相对坐标*/
    center = mapFromGlobal(QCursor::pos());
    m_pTimer->disconnect();
    connect(m_pTimer, SIGNAL(timeout()), this, SLOT(incRadius()));
    m_pTimer->start();
}

//重写处理鼠标光标离开部件的事件
void HoveringRippleButton::leaveEvent(QEvent *event)
{
    // 调用父类的 leaveEvent 函数，以保持默认行为
    QFrame::leaveEvent(event);
    center = mapFromGlobal(QCursor::pos());
    m_pTimer->disconnect();
    connect(m_pTimer, SIGNAL(timeout()), this, SLOT(decRadius()));
    m_pTimer->start();
}

//重写绘制事件
void HoveringRippleButton::paintEvent(QPaintEvent *event)
{
     // 调用父类的 paintEvent 函数，以保持默认行为
    QFrame::paintEvent(event);

    if (center.isNull()) {
        return;
    }

    QPainter painter(this);
    //设置渲染提示; QPainter::Antialiasing 是一种渲染提示，用于抗锯齿绘制，使得图形边缘更加平滑
    painter.setRenderHint(QPainter::Antialiasing);

    QBrush brush(color);
    painter.setBrush(brush);
    //设置画笔; Qt::NoPen 表示不使用画笔，也就是不绘制边框
    painter.setPen(Qt::NoPen);

    QPainterPath path;
    //添加一个带有圆角的矩形路径
    path.addRoundedRect(rect(), corner_radius, corner_radius);
    //设置剪裁路径，即限制绘制区域为指定的路径范围内
    painter.setClipPath(path);
    //绘制椭圆（长轴==长轴，就圆形）
    painter.drawEllipse(center, radius, radius);
}

void HoveringRippleButton::incRadius()
{
    radius += radius_var;
    if (radius > max_radius) {
        m_pTimer->stop();
        return;
    }
    update();
}

void HoveringRippleButton::decRadius()
{
    radius -= radius_var;
    if (radius < 0) {
        m_pTimer->stop();
        return;
    }

    update();
}

模糊知识点

  1. 使用QRegularExpression对象的match()函数，可以将正则表达式应用于目标文本，并检查是否存在匹配项;QRegularExpressionMatch类存储匹配结果，并提供方法来访问和提取捕获组中的具体内容。
 /*匹配规则;
 * 注意：正则表达式在找到第一个匹配项后就会停止查找，所以它不会再次匹配。
 * 从头开始查找匹配 border-radius: 的部分，然后尝试匹配一个或多个数字字符 (\\d+)，而后匹配 px;
 * 使用 \\s* 来匹配可能存在的空格字符，包括零个或多个空格;
 * \\d+表示匹配一个或多个数字字符
 * 使用 (?P<border_radius>\\d+) 来匹配 border-radius 后面的数字，并将其命名为 border_radius;*/
QRegularExpression radius_match("border-radius:\\s*(?P<border_radius>\\d+)px;");
QRegularExpressionMatch radius_result = radius_match.match(this->styleSheet());
if (radius_result.hasMatch())
{
    //提取捕获组中命名为 border_radius的内容
    border_radius = radius_result.captured("border_radius").toInt();
}
  1. QPainterPath 用于绘制复杂图形路径的类;QPainter::setClipPath()设置剪裁路径，即限制绘制区域为指定的路径范围内
 QPainterPath path;
//添加一个带有圆角的矩形路径
path.addRoundedRectaddRoundedRect(qreal x, qreal y, qreal w, qreal h, qreal xRadius, qreal yRadius, Qt::SizeMode mode);

QPainter painter(this);
//设置渲染提示; QPainter::Antialiasing 是一种渲染提示，用于抗锯齿绘制，使得图形边缘更加平滑
painter.setRenderHint(QPainter::Antialiasing);
//设置画笔; Qt::NoPen 表示不使用画笔，也就是不绘制边框
painter.setPen(Qt::NoPen);
//设置剪裁路径，即限制绘制区域为指定的路径范围内
painter.setClipPath(path);
  1. QCursor::pos() 获取当前鼠标的全局坐标
    mapFromGlobal()将全局坐标转换为窗口内部相对坐标
QPoint mapFromGlobal(QCursor::pos());

源码

Gitee:06AnimationButton C++复刻：[流光按钮]+[悬浮波纹按钮]

菜鸟看点
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
按钮边框流光特效
07-26
按钮边框流光特效
基于Qt和C++实现的设备按钮控件+源码
04-03
该项目实现了设备按钮控件，主要包含如下功能： 可设置按钮样式 圆形、警察、气泡、气泡2、消息、消息2。 可设置按钮颜色 布防、撤防、报警、旁路、故障。 可设置报警切换及对应报警切换的颜色。 可设置显示的防区...
基于Qt和C++实现的高亮发光按钮控件+源码
04-07
用法链接：https://menghui666.blog.csdn.net/article/details/137476966?spm=1001.2014.3001.5502 基于Qt和C++实现的高亮发光按钮控件+源码 基于Qt和C++实现的高亮发光按钮控件+源码 基于Qt和C++实现的高亮发光按钮控件+源码 基于Qt和C++实现的高亮发光按钮控件+源码 基于Qt和C++实现的高亮发光按钮控件+源码 基于Qt和C++实现的高亮发光按钮控件+源码
炫彩流光按钮 html+css
热门推荐
你好呀，很高兴你在看这里~
12-14 1万+
话不多，先上效果： 简介： 用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。 具体步骤： 1.先定义一个盒子当做按钮，如我就用a标签： <body> <a href="#" class="guang">button</a> </body> 2.先给a标签写基础的样式，比如长宽等等…： .guang{ position: relative; display: inline-block;
css-流光按钮
Jackie_Mina
02-06 508
CSS 流光效果 按钮
【前端设计】流光按钮
weixin_55939638的博客
01-19 558
css html
炫彩流光按钮
小白小白从不日别的博客
04-05 577
做这个的话主要就是利用了基础的html css以及css3的渐变背景以及关键帧动画 基本结构如下： <a href="" class="btn">button</a> 基本样式如下： * { margin: 0; padding: 0; } a { text-decoration: none; color: #fff; } body { height: 100vh; display: flex; /*
基于QT+C++实现的会逃跑的按钮+源码
最新发布
05-04
该项目实现了会逃跑的...两个按钮，一个为普通按钮，另一个为会跑走的按钮 鼠标移到上面时，立刻跑掉 针对鼠标、键盘、触屏进行优化 随机交换两个按钮的文字、偶尔钻到另一个按钮下面、鼠标移开自动重置到原来状态
c++游戏：超级按钮（带关机程序）
12-25
c++游戏：超级按钮（带关机程序）
基于QT+QML+C++的可交互的创意动态按钮QPushButton+源码
04-29
该项目实现了可交互的创意动态按钮，包含如下功能： 所有颜色自定义 鼠标悬浮渐变 两种点击效果：鼠标点击渐变 / 水波纹动画（可多层波纹叠加） 额外鼠标移入/移出/按下/弹起的实时/延迟共8种事件 鼠标悬浮图标位置...
Unity按钮流光特效资源
07-16
Unity按钮流光特效资源，制作好看的Unity按钮流光特效！
基于Qt和C++实现的多种样式导航按钮控件+源码
04-09
基于Qt和C++实现的多种样式导航按钮控件+源码 该项目实现了多种样式的导航按钮控件 可设置文字的左侧、右侧、顶部、底部间隔。 可设置文字对齐方式。 可设置显示倒三角、倒三角边长、倒三角位置、倒三角颜色。 可...
cppag:C ++动物游戏
04-29
C ++动物游戏（cppag） 这个项目很旧。 想法是古老的。 它创建用于处理cpp的简单图形操作。...按向右按钮，否则就会消失:( 编译运行 只需调用可爱的命令 make 谢谢 特别感谢micromod轻松播放音频。 屏幕截图
C++ 动态创建按钮及 按钮的消息响应
09-03
在C++编程中，动态创建控件是一种常见的技术，它允许程序在运行时根据需要创建用户界面元素，比如按钮。动态创建按钮相比静态创建（在资源编辑器中定义）更灵活，可以在运行时根据用户的操作或者程序逻辑进行调整。...
51496095.rar_按钮控件_C++_
08-09
标题中的"51496095.rar_按钮控件_C++_"表明这是一个关于C++编程中使用按钮控件的教程或者代码示例。在VB（Visual Basic）编程中，按钮控件是用户界面中常见的一种交互元素，通常用于触发特定的操作或事件。这个...
记录_流光按钮
SCCSCSC的博客
04-12 227
流光按钮 一、html <a href="#">BUTTON</a> 二、css *{ /* 初始化，取消页面内外边距*/ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #000000; } a{ position:
流光按钮小例
weixin_57203537的博客
04-19 112
流光按钮 https://www.bilibili.com/video/BV1NL411c7vX FROM：B站UP：艾恩小灰灰 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
css实现流光按钮
weixin_45727272的博客
04-11 915
实现效果如下图：鼠标悬浮，按钮开始变化流光展示炫酷效果提示：以下是本篇文章的代码内容,供大家参考,相互学习设置元素不响应元素,看得见摸不着,pointer-events 属性定义元素是否对指针事件做出反应。可选:auto:默认值。元素对指针事件做出反应，比如 :hover 和 click。none:元素不对指针事件做出反应。initial:将此属性设置为其默认值。inherit:从其父元素继承此属性。input:focus 选择器:选择已被选中的input。
炫彩流光按钮 CSS + HTML
小丞同学
03-02 2511
CSS + HTML实现绝美的炫彩流光按钮！！！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值