Welcome to my admin site!

h1 { font-size: 70px; color: rgba(255, 255, 255, 1); padding: 0; margin: 0; position: absolute; letter-spacing: -0.3rem }
h1::after { content: attr(data-spotlight); color: rgba(135, 206, 250, 1); position: absolute; top: 0; left: 0; clip-path: ellipse(100px 100px at 0% 50%); animation: 5s infinite spotlight }
@keyframes spotlight { 0% { clip-path: ellipse(100px 100px at 0% 50%) } 50% { clip-path: ellipse(100px 100px at 100% 50%) } 100% { clip-path: ellipse(100px 100px at 0% 50%) } }

CSS聚光灯文字（无图片）的更多相关文章

  1. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  2. HTML/CSS实现文字环绕图片布局

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  3. CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭

    一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...

  4. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  5. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  6. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  7. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  8. css实现圆角三角形例子(无图片)

    css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向&q ...

  9. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

随机推荐

  1. SpringCloud之Gateway

    一.为什么选择SpringCloud Gateway而不是Zuul? Gateway和Zuul的职责一样,都承担着请求分发,类似Nginx分发到后端服务器. 1.SpingCloud Gateway ...

  2. node转发请求 .csv格式文件下载 中文乱码问题 + 文件上传笔记

    用户无法直接访问后台接口 需要node端转发请求 并将数据以.csv文件格式生成以供客户端下载. 很不幸出现了中文乱码的问题 挖了各种坟帖,下了各种依赖包,csv.json2csv.bufferHel ...

  3. Python如何快速复制序列？

    1 基本用法 把序列乘以一个整数,就会产生一个新序列.这个新序列是原始序列复制了整数份,然后再拼接起来的结果. l=[1,2,3] l2=l * 3 logging.info('l2 -> %s ...

  4. 剑指Offer-Python(11-15)

    11.二进制中1的个数 链接:https://www.nowcoder.com/questionTerminal/8ee967e43c2c4ec193b040ea7fbb10b8?answerType ...

  5. excel导出csv包括逗号等的处理

    /** * @Title: trimRubbishChar * @Description: 导出的时候需要对一格的内容进行检查,看是否有非法字符,以免串行 * @Since: 2016年8月2日 下午 ...

  6. Flutter 开发从 0 到 1（五）源码

    Flutter 开发从 0 到 1 明天开始又要上班了,你的假期任务完成如何啊?由于平时加班太多了,实在挤不出更多时间,从开始想用 Flutter <Flutter 开发从 0 到 1(一)需求 ...

  7. [MIT6.006] 3. Insertation Sort, Mege Sort 插入排序，归并排序

    关于第2节课<Models of Computation, Document Distance>由于内容过于简单,所以不在这里进行记录,它主要就是讲了Python很多操作是constant ...

  8. peterson算法（软件互斥 转）

    1. 背景        首先,看个例子,进程P1,P2共用一个变量COUNT,初始值为0                                                 因为P1,P ...

  9. linux笔记【简版】

    1.linux简介 kernel 内核 shell 外壳 (类似win上的cmd) sh,Bash:#root,$user csh:#root,%user filesystem 文件管理系统 2.优势 ...

  10. 10大排序算法——Java实现

    算法与实现 选择排序 算法思想 从数组中选择最小元素,将它与数组的第一个元素交换位置.再从数组剩下的元素中选择出最小的元素,将它与数组的第二个元素交换位置.不断进行这样的操作,直到将整个数组排序. 动 ...