css-赛博朋克风动画组件

最新推荐文章于 2023-03-26 12:26:56 发布
最新推荐文章于 2023-03-26 12:26:56 发布
阅读量718 收藏 11
点赞数 1
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013362192/article/details/116042459
版权

css-赛博朋克风动画组件 目录

文章目录

前言

  • Tutorials收费课程中的一种实现。

  • 实现思路：

    • 先绘制盒子
    • 制作动画，通过颜色位置变化来实现流转
    • -webkit-box-reflect: below 2px linear-gradient(transparent,#0005);实现倒影

  • 所用功能：

    • border-sizing
    • justify-content
    • display
    • overflow
    • transition
    • -webkit-box-reflect
    • box-shadow
    • animation

结果展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cyberpunk Button</title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
            font-family: consolas;
            box-sizing: border-box;
        }
		
        body
        {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #050801;
        }
		
        a
        {
            position: relative;
            display: inline-block;
            padding: 25px 30px;
            margin: 0 20px;
            color: #03e9f4;
            text-transform: uppercase;
            letter-spacing: 4px;
            text-decoration: none;
            font-size: 24px;
            overflow: hidden;
            transition: 0.5s;
            -webkit-box-reflect: below 2px linear-gradient(transparent,#0005);
        }
        a:hover
        {
            background: #03e9f4;
            color: #050801;
            box-shadow: 0 0 5px #03e9f4,
            0 0 25px #03e9f4,
            0 0 50px #03e9f4,
            0 0 200px #03e9f4;
        }
        a span
        {
            position: absolute;
            display: block;
        }
        a span:nth-child(1)
        {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,transparent,#03e9f4);
            animation: animate1 1s linear infinite;
            animation-delay: 0s;
        }
        @keyframes animate1
        {
            0%
            {
                left: -100%;
            }
            50%,100%
            {
                left: 100%;
            }
        }
        a span:nth-child(3)
        {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg,transparent,#03e9f4);
            animation: animate3 1s linear infinite;
            animation-delay: 0.5s;
        }
        @keyframes animate3
        {
            0%
            {
                right: -100%;
            }
            50%,100%
            {
                right: 100%;
            }
        }
        a span:nth-child(2)
        {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg,transparent,#03e9f4);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }
        @keyframes animate2
        {
            0%
            {
                top: -100%;
            }
            50%,100%
            {
                top: 100%;
            }
        }
        a span:nth-child(4)
        {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg,transparent,#03e9f4);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }
        @keyframes animate4
        {
            0%
            {
                bottom: -100%;
            }
            50%,100%
            {
                bottom: 100%;
            }
        }


        a:nth-child(1)
        {
            filter: hue-rotate(290deg);
        }

        a:nth-child(3)
        {
            filter: hue-rotate(110deg);
        }
    </style>
</head>
<body>
<a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    btn1
</a>
<a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    btn2
</a>
<a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    btn3
</a>
</body>
</html>
莫兮是我
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯 CSS 制作赛博朋克 2077 “故障风”按钮
CodingStartup的博客
12-22 549
纯 CSS 制作赛博朋克 2077 “故障风”按钮 大家好，我是 Steven。 虽然我不打机，但我都知道 赛博朋克 2077 这个游戏，在它的网页上，有一个 Available Now 的按钮，当游标移到它之上的时候，会有一个好像故障的毛刺效果。 这一期，我们就会模仿并且实现这个效果。 这个教程的视频版在 https://www.bilibili.com/video/BV15A411s7cX ，欢迎三连关注！ 编写 HTML 代码 打开 CodePen 编辑器 ( https://codepen.io
animate-css-styled-components:动画css的简单端口，用于样式组件
05-11
动画CSS样式的组件动画css的简单端口，用于样式组件安装安装animate-css-styled-components [sudo] npm i --save animate-css-styled-components如何使用导入animate-css-styled-components模块，调用全局动画import...
转载，赛博朋克2077按钮bug制作，bug风格设计
Mr_aswl的博客
01-02 462
css制作赛博朋克按钮故障风格…转载自B站up 链接如下： https://www.bilibili.com/video/BV15A411s7cX?t=447 我只是个无情的代码搬运工~~~ 来人上代码！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
牛B！纯 CSS 制作赛博朋克 2077 “故障风”按钮
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-03 561
（给前端瓶子君加星标）转自：CodingStarupjuejin.cn/post/6908565208596217863大家好，我是 Steven。虽然我不打机，但我都知道赛博朋克 2...
仅用CSS几步实现赛博朋克2077风格视觉效果
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
07-16 523
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群背景文章开始之前先简单了解下什么是 赛博朋克，以及什么是 赛博朋克2077。赛博朋克（Cyberpunk）是背景大都...
纯CSS制作赛博朋克2077“故障风”按钮
hktkkkk的博客
10-28 264
纯CSS制作赛博朋克2077“故障风”按钮
CSS实现赛博朋克风格按钮
TBDBTUO的博客
06-20 548
赛博朋克背景 赛博朋克（Cyberpunk）是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗？》最受注目，小说亦被改编成电影《银翼杀手》。总的来讲，赛博朋克的风格主线，就是反应出科技高度发展的人类文明，与脆弱渺小的人类个体之间的强烈反差，同时外界与内在，钢铁
仅用 CSS 实现赛博朋克 2077 风格视觉效果
zz_jesse的博客
07-21 1517
点击上方关注前端技术江湖，一起学习，天天进步作者dragonir原文链接：https://juejin.cn/post/6972759988632551460文章开始之前先简单了解下...
augmented-ui:赛博朋克风格的Web UI变得容易。 得到增强
04-13
http ： //augmented-ui.com/v1/test.html unpkg： https ：//unpkg.com/augmented-ui@1/augmented.css 安装： $ npm install augmented-ui /node_modules/augmented-ui/augmented-ui.min.css $ npm install ...
CSS-3D悬停相册动画
最新发布
03-21
CSS-3D悬停相册
赛博朋克按钮.html
02-08
赛博朋克按钮.html
赛博朋克控制台
02-14
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESL
68种动画效果的CSS3动画库vivify.css
12-13
Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似，为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。
vue-css-modules:在Vue组件内部将类名无缝映射到CSS模块
05-09
yarn add vue-css-modules CDN： | （可作为window.VueCSSModules ）CSS模块：本地范围和模块化为本地类分配一个全局唯一名称，因此组件样式不会影响其他组件。 例如/* button.css */. button { font-size : 16 px ...
css-in-js-media:仅在使用CSS-in-JS（样式化组件，emotion.js）时处理响应式设计
05-02
css-in-js-media :artist_palette: 使用CSS-in-JS缩小和简化包含媒体当您使用css-in-js（情感，样式化组件）进行样式设置时，您可以使用此css-in-js-media完美轻松地处理响应式设计，该类与和支持类型系统相似如果您...
赛博朋克风格按钮 html+css
你好呀，很高兴你在看这里~
01-29 9600
先看效果： 前言： 这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。 实现： 1. 首先定义一个div标签作为按钮，类名为 .anniu： <div class="anniu">Aurora Borealis night</div> 2. .anniu 的css基本样式，长宽，字体大小等： .anniu,.anniu::after{ font-family: 'Do Hyeon'
朋克css,仅用CSS几步实现赛博朋克2077风格视觉效果
weixin_30527151的博客
08-04 543
背景文章开始之前先简单了解下什么是 赛博朋克，以及什么是 赛博朋克2077。赛博朋克(Cyberpunk)是背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗？》最受注目。总的来讲，赛博朋克的...
我用html+css+js+vue写了一个赛博朋克2077
hideonbush123的博客
03-26 529
我用html+css+js+vue写了一个赛博朋克2077
CSS几步实现赛博朋克2077风格视觉效果
weixin_45032957的博客
06-15 353
故障效果主要通过 clip-path: inset 和动画实现。利用 button 的伪元素 ::after，给它定义多个分片 --slice 变量，并通过动画切换切片的位置，来实现晃动效果。其中clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 inset() 方法用于定义一个矩形，可以传入 5 个参数，分别对应 top，right，bottom，left的裁剪位置及 round 和 radius（可选，圆角），它的基本语法如下： inset( {1,4} [ ro
用CSS实现赛博朋克风格背景
06-13
赛博朋克风格的背景通常都比较复杂，包含了许多几何形状、线条、渐变和特效等元素。以下是一种可能的实现方式： HTML结构： ```html <div class="cyber-bg"> <div class="grid"></div> <div class="lines"></div> <div class="dots"></div> <div class="glow"></div> </div> ``` CSS样式： ```css .cyber-bg { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: #1b1b1b; } .grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; } .lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 2px, transparent 2px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 2px, transparent 2px); background-size: 50px 50px; animation: lines 10s linear infinite; } .dots { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-position: 0 0, 25px 25px; background-size: 50px 50px; } .glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; border-radius: 50%; background-color: rgba(0, 255, 255, 0.1); opacity: 0; animation: glow 5s linear infinite; } @keyframes lines { from { background-position: 0 0, 0 0; } to { background-position: 50px 50px, 25px 25px; } } @keyframes glow { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 0; } } ``` 解释： 1. `.cyber-bg` 是最外层的容器，设置宽度为100%、高度为100vh，背景颜色为 #1b1b1b（深灰色）。 2. `.grid` 是一个全屏的网格背景，使用渐变和 `background-size` 属性实现。 3. `.lines` 是一组斜线背景，使用渐变和 `animation` 属性实现。通过动画将背景的位置随时间移动，形成动态效果。 4. `.dots` 是一组圆点背景，使用径向渐变和 `background-position` 属性实现。 5. `.glow` 是一个发光的圆形背景，使用圆形边框和透明度实现。通过动画将透明度随时间变化，形成发光效果。 6. 使用 `position: absolute` 属性将每个背景元素定位到父容器的左上角，使它们叠加在一起形成复杂的背景效果。 这只是一种实现方式，您可以根据自己的需求和创意进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值