css流光效果简单版

首先说一下原理：

1：一个大的标签包着4个小标签

2：给小标签给上属性

3：让一边一个小标签

4：用css动画让它们动起来（每个动画只设置0%和100%为的是让他们“跑起来”而且还简单方便）

5：给大标签加上overflow — hidden（让他们只在大标签上显示）

6:让他们的，高不到他们动的时候变零，轮到他们的时候赋高，宽

7：css倒影属性

     background: #03e9f4;color: #050801;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);

代码：


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>流光按钮</title>
</head><body><!DOCTYPE html><html><head><meta charset="utf-8"><title>Surprise</title></head><style>@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background: #050801;font-family: 'Raleway', sans-serif;font-weight: bold;}a {position: relative;display: inline-block;padding: 25px 30px;margin: 40px 0;color: #03e9f4;text-decoration: none;text-transform: uppercase;transition: 0.5s;letter-spacing: 4px;overflow: hidden;margin-right: 50px;}a:hover {background: #03e9f4;color: #050801;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);}a:nth-child(1) {filter: hue-rotate(270deg);}a:nth-child(2) {filter: hue-rotate(110deg);}a span {position: absolute;display: block;}a span:nth-child(1) {top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #03e9f4);animation: animate1 1s linear infinite;}@keyframes animate1 {0% {left: -100%;}50%,100% {left: 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(3) {bottom: 0;right: 0;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #03e9f4);animation: animate3 1s linear infinite;animation-delay: 0.50s;}@keyframes animate3 {0% {right: -100%;}50%,100% {right: 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%;}}img {width: 100vw;height: 100vh;position: absolute;display: none;}</style><body><a href="#" onclick="FullScreen()"><span></span><span></span><span></span><span></span>Neon button</a><!-- 换成自己的或者              http://zhangtong.kuxia.top --><img src="img/学习视频.gif" alt=""></body><script>function FullScreen() {setTimeout(function () {let domElement = document.documentElement;if (domElement.requestFullscreen) {domElement.requestFullscreen();} else if (domElement.mozRequestFullScreen) {domElement.mozRequestFullScreen();} else if (domElement.webkitRequestFullScreen) {domElement.webkitRequestFullScreen();}let img = document.getElementsByTagName('img')[0];img.style.display = 'block'}, 0)};</script></html></body></html>

css流光效果简单版相关推荐

HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
html流光按钮,【CSS】css实现流光效果-按钮流光显示效果-自发光
[CSS]css实现流光效果-按钮流光显示效果-自发光 [CSS]css实现流光效果-按钮流光显示效果-自发光废话不多说,直接上代码 Streamer * { padding: 0; margin: ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
纯CSS 毛玻璃效果
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情本文简介点赞 + 关注 + 收藏 = 学会了在我年轻时做过的开发中,毛玻璃应用得最广是在复杂的背景图 ...

css流光效果简单版

css流光效果简单版相关推荐

最新文章

热门文章