灵魂按钮

最新推荐文章于 2023-01-04 18:39:57 发布
最新推荐文章于 2023-01-04 18:39:57 发布
阅读量141 收藏
点赞数
分类专栏： CSS 干货 笔记 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45768871/article/details/112911974
版权
干货 同时被 3 个专栏收录
40 篇文章 1 订阅
订阅专栏
CSS
25 篇文章 0 订阅
订阅专栏
笔记
7 篇文章 0 订阅
订阅专栏

在这里插入图片描述

灵魂按钮

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Terminal+Dosis);
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            -webkit-backface-visibility: hidden;
            background-color: hsl(0, 0%, 18%);
            -webkit-background-size: 3px 3px;
            background-image: -webkit-linear-gradient( 0deg, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 10%, 1) 3px), -webkit-linear-gradient( 90deg, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 10%, 1) 5px);
            background-image: -moz-linear-gradient( hsl(0, 0%, 11%), hsl(0, 0%, 11%));
            background-image: -ms-linear-gradient( hsl(0, 0%, 11%), hsl(0, 0%, 11%));
            background-image: -o-linear-gradient( hsl(0, 0%, 11%), hsl(0, 0%, 11%));
        }
        
        body {
            margin: 0;
            padding: 50px;
            text-align: center;
            font: 13px/18px "Droid Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
        }
        /* Space CaCSS ------------------------------------------------- */
        
        div {
            display: inline-block;
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0px auto;
            border-radius: 50%;
            border: 10px solid hsla(0, 0%, 0%, .7);
            box-shadow: inset 0 15px 15px -5px hsla(0, 0%, 100%, .7), inset 0 -5px 10px 3px hsla(0, 0%, 0%, .6), 0 8px 10px 2px hsla(0, 0%, 0%, .3);
            background-position: center;
            transform: scale(.66);
            transition: transform .5s cubic-bezier(.32, 0, .15, 1);
        }
        
        div:hover {
            cursor: none;
            transform: scale(1);
            transition: transform .2s cubic-bezier(.32, 0, .15, 1);
        }
        /* Particle Ping Pong -------------------------------------------- */
        
        .particle {
            background-size: 12px 12px;
            background-color: #000;
            /* the default highlight was too strong */
            box-shadow: inset 0 15px 15px -5px hsla(0, 0%, 100%, .25), inset 0 -5px 10px 3px hsla(0, 0%, 0%, .6), 0 8px 10px 2px hsla(0, 0%, 0%, .3);
            background-image: radial-gradient( #555 0px, hsla(0, 0%, 0%, 0) 2px, hsla(0, 0%, 0%, 0) 24px), repeating-radial-gradient( white 0px, black 2px, black 48px);
        }
        
        .particle:hover {
            animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;
        }
        
        @keyframes particle-size {
            from {
                background-size: 6px 6px, 12px 12px;
            }
            to {
                background-size: 12px 12px, 24px 24px;
            }
        }
        
        @keyframes particle-positon {
            from {
                background-position: 60px, 60px;
            }
            to {
                background-position: 140px, 140px;
            }
        }
        /* Growing cells -------------------------------------------- */
        
        .cells {
            background-size: 24px 24px;
            background-color: #fff;
            background-image: repeating-radial-gradient( black 8px, white 12px);
        }
        
        .cells:hover {
            animation: cells 0.4s linear infinite;
        }
        
        @keyframes cells {
            from {
                background-size: 12px 12px;
            }
            to {
                background-size: 24px 24px;
            }
        }
        /* Jelly -------------------------------------------- */
        
        .jelly {
            background-size: 60px 60px;
            background-color: hsla(320, 80%, 60%, 1);
            background-image: repeating-radial-gradient( hsla(320, 100%, 60%, .6) 0px, hsla(220, 100%, 60%, 0) 60%), repeating-radial-gradient( hsla(330, 100%, 40%, 1) 12%, hsla(320, 80%, 60%, 1) 24px);
        }
        
        .jelly:hover {
            animation: jelly 1.4s cubic-bezier(.1, .4, .9, .6) infinite;
        }
        
        @keyframes jelly {
            from {
                background-size: 60px 60px, 24px 24px;
            }
            50% {
                background-size: 120px 120px, 100px 100px;
            }
            to {
                background-size: 24px 24px, 140px 140px;
            }
        }
        /* Blobbs -------------------------------------------- */
        
        .blobbs {
            background-size: 66px 66px;
            background-color: hsl(200, 100%, 50%);
            background-image: repeating-radial-gradient( hsla(200, 100%, 80%, .8) 0px, hsla(200, 100%, 80%, .5) 4px, hsla(200, 100%, 80%, 0) 50px), repeating-radial-gradient( hsla(260, 100%, 0%, 0) 0px, hsla(260, 100%, 50%, .1) 2px, hsla(260, 100%, 0%, 0) 10px);
        }
        
        .blobbs:hover {
            animation: blobbs-position 6s cubic-bezier(.4, 0, .2, 1) infinite, blobbs-size .75s cubic-bezier(.4, 0, .2, 1) infinite alternate;
        }
        
        @keyframes blobbs-position {
            0% {
                background-position: left top, left top;
            }
            25% {
                background-position: right top, left bottom;
            }
            50% {
                background-position: right bottom, right bottom;
            }
            75% {
                background-position: left bottom, right top;
            }
            100% {
                background-position: left top, left top;
            }
        }
        
        @keyframes blobbs-size {
            from {
                background-size: 200px 200px, 200px 200px;
            }
            to {
                background-size: 66px 66px, 66px 66px;
            }
        }
        /* The Chase -------------------------------------------- */
        
        .chase {
            background-repeat: no-repeat, repeat;
            background-size: 180px 180px;
            background-color: hsl(50, 100%, 70%);
            background-image: repeating-radial-gradient( hsla(50, 100%, 100%, 1) 0px, hsla(50, 100%, 90%, 1) 10px, hsla(50, 100%, 70%, .2) 12px, hsla(50, 100%, 70%, 0) 130px), repeating-radial-gradient( hsla(20, 100%, 50%, 0) 20%, hsla(20, 100%, 50%, .4) 80%, hsla(50, 100%, 70%, 1) 120px);
        }
        
        .chase:hover {
            animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;
        }
        
        @keyframes chase-position {
            0% {
                background-position: left top, left top;
            }
            25% {
                background-position: right top, left bottom;
            }
            50% {
                background-position: right bottom, right bottom;
            }
            75% {
                background-position: left bottom, right top;
            }
            100% {
                background-position: left top, left top;
            }
        }
        
        @keyframes chase-size {
            from {
                background-size: 120px 120px, 300px 300px;
            }
            50% {
                background-size: 160px 160px, 150px 150px;
            }
            to {
                background-size: 180px 180px, 100px 100px;
            }
        }
    </style>
</head>

<body>
    <div class="particle"></div>
    <div class="cells"></div>
    <div class="jelly"></div>
    <div class="blobbs"></div>
    <div class="chase"></div>
</body>

</html>

欢迎返问个人博客： 晴栀

在这里插入图片描述

妙趣前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
脚手架类似于添加购物车效果
08-29
5、components 文件夹：她可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。一个vue项目就是由一个个的组件拼装起来的。 6、router 文件夹 及 子目录：这个文件夹里的是整个vue项目的路由，vue 是单页面应用...
blog:灵魂小站博客区
04-10
在博客中，JavaScript可能用于实现评论系统、文章滚动、社交分享按钮等功能，提升用户体验。 除此之外，个人博客项目可能还会涉及到其他技术，如数据库（如MySQL或MongoDB）用于存储文章内容和用户数据，服务器端...
幽灵按钮
dfl2099的博客
06-13 99
幽灵按钮 幽灵按钮 幽灵按钮 转载于:https://www.cnblogs.com/qianjilou/p/6999652.html
html 按钮3d效果,HTML——3D按钮
weixin_34827430的博客
06-04 599
简单编写样式引入css样式文件部分代码展示编写列表代码css样式代码/*灰色*/.gray,.gray:hover{color:#555;border-bottom:4px solid #b2b1b1;background:#eee;}.gray:hover{background:#e2e2e2;}a.button:before,a.button:after{content:'';position...
Chrome灵魂插件
NilEcho2333的博客
07-07 1万+
文章开头先做个小调查，大家都用的什么浏览器？ 不看结果盲测一下，肯定是 Chrome 遥遥领先，特别是在程序员这个群体里面应该占比更高。 我使用谷歌浏览器也近10年了，不是为了在开发过程中测试，基本上不会再用其它浏览器了。 谷歌浏览器之所以这么强大，很大一部分原因就是可以无限使用扩展这个功能，使得浏览器的功能可以不断加强。 所以有时候我们可以称 Chrome 插件，就是 Chrome 浏览器的灵魂，今天我就给大家推荐 6 款 Chrome 灵魂插件。 1、OneTab 相信很多朋友向我一样，工作
Python tkinter（3）按钮控件
最新发布
jzwalliser的博客
01-04 5756
tkinter.Button 按钮组件
浮动操作按钮的选择
【代码有bug】
10-28 1967
浮动操作按钮，现在可选的方案很多，design库中也有，目前来说在考虑实现浮动操作按钮的时候，有以下几种常用方案，详细请看本文。
细节构筑空间的灵魂.zip
09-03
设计师必须关注每一个交互细节，如按钮的大小、颜色、位置，以及用户在界面中的导航流程等。这些看似微不足道的元素，实则极大地影响着用户的满意度和产品的易用性。 2. **响应式设计**：在多设备共存的时代，一个...
细节构筑空间的灵魂.doc
09-19
细节决定了用户体验的质量，如按钮的形状、颜色搭配、文字排版等，都需要精心设计以提高用户交互的舒适度。 2. **比例和平衡**：在UI/UX设计中，元素的比例和空间布局的平衡直接影响用户对界面的感知。良好的设计...
Whac-A-Mole（按钮版）-项目开发
03-30
其次，软件部分是整个游戏的灵魂。"whac_a_mole_v1_0_0.ino"是一个Arduino程序文件，表明游戏的控制逻辑是基于Arduino平台实现的。Arduino是一种开源电子原型平台，非常适合此类交互式游戏的开发。通过编程，我们...
CSS实现平行四边形
热门推荐
qq_45768871的博客
01-21 2万+
作者：晴栀Sunset 平行四边形 文章目录平行四边形背景知识难题嵌套元素方案伪元素方案总结 时间有三种步伐：未来姗姗来迟，现在象箭一样飞逝，过去永远静止不动。 背景知识 基本的 CSS 变形 难题 平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。 让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，如图 3-13 所示。然后，我们可以通过skew() ..
DNS 协议是什么？
qq_45768871的博客
10-15 9149
DNS 协议是什么？说说 DNS 完整的查询过程? 一、是什么 DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器 简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址 IP 地址：一长串能够唯一地标记网络上的计算机的数字 域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识 二、域名 域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级
负载均衡详解
qq_45768871的博客
10-15 6655
负载均衡详解 摘要：面对大量用户访问、高并发请求，海量数据，可以使用高性能的服务器、大型数据库，存储设备，高性能Web服务器，采用高效率的编程语言比如(Go,Scala)等… 面对大量用户访问、高并发请求，海量数据，可以使用高性能的服务器、大型数据库，存储设备，高性能Web服务器，采用高效率的编程语言比如(Go,Scala)等，当单机容量达到极限时，我们需要考虑业务拆分和分布式部署，来解决大型网站访问量大，并发量高，海量数据的问题。 从单机网站到分布式网站，很重要的区别是业务拆分和分布式部署，将应用拆分后
重定向状态码302、301
qq_45768871的博客
10-18 2835
状态码302、301 301 Moved Permanently 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。 新的永久性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，否则响应的实体中应当包含指向新的URI的超链接及简短说明。 如果这不是一个GET或者HEAD请求，那么浏览器禁止自动进行重定向，除非得到用
TCP 协议简述
qq_45768871的博客
11-02 1610
TCP 协议简述 TCP 提供面向有连接的通信传输，面向有连接是指在传送数据之前必须先建立连接，数据传送完成后要释放连接。 无论哪一方向另一方发送数据之前，都必须先在双方之间建立一条连接。在TCP/IP协议中，TCP协议提供可靠的连接服务，连接是通过三次握手进行初始化的。 同时由于TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议，TCP是全双工模式，所以需要四次挥手关闭连接。 TCP包首部 网络中传输的数据包由两部分组成：一部分是协议所要用到的首部，另一部分是上一层传过来的数据。首部的结构由.
初识WeakSet
qq_45768871的博客
05-30 1572
初始WeakSet ECMAScript 6 新增的“弱集合”（WeakSet）是一种新的集合类型，为这门语言带来了集合数据结构。WeakSet 是 Set的“兄弟”类型，其 API 也是 Set 的子集。WeakSet中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式。 基本 API 可以使用 new 关键字实例化一个空的 WeakSet： const ws = new WeakSet(); 弱集合中的值只能是 Object或者继承自 Object 的类型，.
十大经典排序算法（动图演示）
qq_45768871的博客
02-01 1507
十大经典排序算法（动图演示） 十种常见排序算法可以分为两大类： 比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。 非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。 0.3 相关概念 稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。 不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 b 的后面。 时间复杂度：对排序数据的总
前端基础篇之 CSS 世界
qq_45768871的博客
10-15 1161
前端基础篇之 CSS 世界 基本概念 这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。 流 “流”又叫文档流，是 css 的一种基本定位和布局机制。流是 html 的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是 html 默认的布局机制，如你写的 html 不用 css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。 块级元素和内联元素 这个大家肯定都知道。 块级元素是指单独撑满一行
Http缓存
qq_45768871的博客
10-16 1132
http 背景 以前啥都不懂时候听这个名字感觉好牛b的，实际上这玩意很简单，就是改个请求头完了。 概念 一、强缓存 强缓存是设置过期时间，超过设置的时间会发请求，否则就会走缓存，连请求也不会发。状态码是200 二、协商缓存 协商缓存常用模式有两种，一种是last-modified，一种是etag。也有地方叫对比缓存的。 last-modified就是资源的修改时间。如果客户端来请求服务器一个文件，服务器便会给请求头加上last-modified返回给客户端，客户端下次请求同一个文件时，会带上If-Modi
Windows操作系统简介：从DOS到Win7
操作系统是计算机的灵魂，它管理并控制着计算机的硬件和软件资源。在Windows 7中，操作系统的主要功能包括： 1. **处理机管理**：调度和分配CPU资源，确保多任务的高效运行。 2. **存储器管理**：管理内存资源，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值