web前端-第三次作业-按钮

news2025/1/14 10:11:50
<!DOCTYPE html>
<!-- 2022/11/16 -->
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>按钮</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      gap:4vmin;
      overflow: hidden;

      min-height: 100vh;
      background-color: #112222;
    }
    button{
      padding: 50px 100px;
      border: none;
      border-radius: 100px;
      background-image: linear-gradient(90deg,#55a532,#e9e9e9);
      color: #888888;
      font-size: 6vmin;
      font-weight: bold;
      letter-spacing: 1vmin;
      cursor: pointer;

      position: relative;
    }

    button:hover{
      color: paleturquoise;
      background-image: radial-gradient(red,beige);
      animation: animate 2s infinite linear;
    }



    @keyframes animate {
      0%{
        padding: 50px 100px;
        opacity: 40%;
      }
      50%{
        padding: 50px 100px;
        opacity: 0.1;
      }
      100%{
        padding: 50px 100px;
        background-color: #3967FF;
        opacity: 40%;
      }
    }
  </style>
</head>
<body>
      <button type="button">按钮
      </button>
</body>
</html>

之前
在这里插入图片描述
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/19286.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AutoDWG DWG 转换 PDF 控制组件-ActiveX

AutoDWG DWG 到 PDF 控制组件&#xff0c;比以往任何时候都更快&#xff01; DWG2PDF-X &#xff0c;一个控制组件允许您直接将 dwg 转换为 pdf&#xff0c;dxf 和 dwf 直接转换为 pdf&#xff0c;不需要 AutoCAD。 主要特征&#xff1a; 支持 R2.5 到 2019 版本的 DWG、DXF 和…

关于Conversational QA 的一些调研

文章目录Paper1: Understanding User Satisfaction with Task-oriented Dialogue SystemsMotivation:Classification:Contributions:DatasetKnowledge:Paper2: Evaluating Mixed-initiative Conversational Search Systems via User SimulationMotivationClassification:Contri…

java计算机毕业设计ssm建设路小学读背兴趣任务管理系统

项目介绍 随着互联网技术的发展,计算机技术广泛应用在人们的生活中,逐渐成为日常工作、生活不可或缺的工具。目前,各种在线学习平台层出不穷。建设路小学读背兴趣任务繁重,如何快速的学习提高小学生的读背兴趣任务,是老师非常关注的问题。为小学读背兴趣任务开发必要的程序,能…

ES6 入门教程 13 Symbol 13.8 内置的 Symbol 值

ES6 入门教程 ECMAScript 6 入门 作者&#xff1a;阮一峰 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录ES6 入门教程13 Symbol13.8 内置的 Symbol 值13.8.1 Symbol.hasInstance13.8.2 Symbol.isConcatSpreadable13.8.3 Symbol.species13.8.4 …

Gillespie 随机模拟算法附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

Python最佳实践-构建自己的第三方库

移植自本人博客&#xff1a;Python最佳实践-构建自己的第三方库 Introduction 在写一个项目的时候需要用到发布订阅者模式&#xff08;又叫广播模式&#xff09;&#xff0c;于是就实现了一下&#xff0c;写完之后感觉可以封装成库&#xff0c;于是查阅了一下如何在python上开…

全自动采集软件-自动采集为原创发布工具

随着时代不停地发展。互联网无时不刻地出现在我们的生活中&#xff0c;大家也越来越注重效率&#xff0c;今天小编就给大家来分享一款全自动采集软件。只需要点几下鼠标就能轻松获取数据&#xff0c;不管是导出还是发布到网上。详细参考图片一、二、三、四&#xff01; 企业人员…

CanOpen协议的伺服驱动控制

一、CanOpen的基本介绍&#xff1a;1、基本介绍&#xff1a;CanOpen在CAN网络7层协议中&#xff0c;处于应用层。CANopen协议是在20世纪90年代末&#xff0c;由CIA组织CAN-in-Automation&#xff0c;&#xff08;http://www.can-cia.org &#xff09;在CAL&#xff08;CAN Appl…

信息论编码 | 霍尔曼编码设计MATLAB实现 两种方法 函数调用

姓名 班级 20电信 学号 2020 实验项目 实验三 霍尔曼编码 日期 2022.11 实验环境 联想电脑MATLAB R2018a版 实验内容与完成情况&#xff08;记录实验内容、操作步骤、实验结果等&#xff0c;包括系统输出的错误信息&#xff0c;以截图等方式记录实验结果&#xff09; …

吹爆,这份有思路有案例能落地的SpringCloud开发笔记

前言 SpringCloud想必每一位Java程序员都不会陌生&#xff0c;很多人一度把他称之为“微服务全家桶”&#xff0c;它通过简单的注解&#xff0c;就能快速地架构微服务&#xff0c;这也是SpringCloud的最大优势。但是最近有去面试过的朋友就会发现&#xff0c;现在面试你要是没…

【毕业设计】3-基于单片机的公交车智能播报到站运行位置指示系统(原理图+源码+论文)

【毕业设计】3-基于单片机的公交车智能播报到站运行位置指示系统&#xff08;原理图源码论文&#xff09; 文章目录【毕业设计】3-基于单片机的公交车智能播报到站运行位置指示系统&#xff08;原理图源码论文&#xff09;资料下载链接任务书设计说明书摘要设计框架架构设计说明…

一个基于NetCore模块化、多租户CMS系统

今天给大家推荐一个基于.NetCore开发的、支持多租户的开源CMS系统。 项目简介 这是一个基于ASP.NET Core 构建的、模块化和多租户应用程序框架&#xff0c;采用文档数据库&#xff0c;非常高性能&#xff0c;跨平台的系统。 该项目可用于企业网站、个人博客、产品介绍网站等…

【计算机毕业设计】基于netty的网关推送平台

前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着准备考研,考公,考教资或者实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年各个学校要求的毕设项目越来越难,有不少课题是研究生级别难度的,对本科同学来说是充满挑战。为帮助大家顺利通过…

字符流用户注册案例、字符缓冲流、字符缓冲流特有功能、字符缓冲流操作文件中的数据排序案例

文章目录字符流用户注册案例字符缓冲流字符缓冲流特有功能字符缓冲流操作文件中的数据排序案例IO流小结字符流用户注册案例 案例需求&#xff1a; 将键盘录入的用户名和密码保存到本地实现永久化存储实现步骤 获取用户输入的用户名和密码&#xff08;这里使用 scanner 键盘录…

NLP的数据增强技术总结

文章目录一、简单的数据增强技术 EDA (Easy Data Augmentation) 即Normal Augmentation Method1、同义词替换(Synonym Replacement, SR)&#xff1a;2、随机插入(Random Insertion, RI)&#xff1a;3、随机交换(Random Swap, RS)&#xff1a;4、随机删除(Random Deletion, RD)&…

JS中判断数据类型的几种方法

目录 1.typeof 2.constructor 3.instanceof 4.Object.prototype.toString.call 1.typeof &#x1f4d9; 语法 : typeof(需要判断的数据变量) &#x1f4d9; 特点: &#x1f340; 对于基本数据类型,除了null外都可以返回正确的结果;对于null,返回的是Object &#x1f34…

FL Studio21中文版本新增功能FL2023完整版

FL Studio水果简称FL&#xff0c;全称&#xff1a;Fruity Loops Studio&#xff0c;国人习惯叫它水果萝卜。FL软件现有版本是 FL Studio 21&#xff0c;已全面升级支持简体中文语言界面 。 FL Studio 21水果工具更新、新功能和插件FL Studio 21已经发布&#xff0c;并且有许多…

[附源码]java毕业设计日常饮食健康推荐系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

迭代器C11

迭代器 迭代器失效 容器使用迭代器时&#xff0c;不要改变容器的大小 /在操作迭代器的过程中&#xff08;使用了迭代器这种循环体&#xff09;&#xff0c;千万不要改变vectori容器的容量&#xff0c;也就是不要增加或者删除vectori容器中的元素 /往容器中增加或者从容器中删…

python基于百度sdk语音转文字

python基于百度sdk语音转文字 1.安装baidu-aip 这样pip install aip&#xff1b; 2.要是不行的话下载"识别、合成 RESTful API Python SDK ",解压到某个文件夹下面如&#xff1a;d:\AI 百度智能云-管理中心https://console.bce.baidu.com/ai/#/ai/speech/overview/…