CSS特效023:文字聚光灯效果

news2025/1/12 1:09:22

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享,希望能给您带来帮助。

文章目录

    • 效果图
    • 源代码
    • CSS基础知识点
    • 结尾语

css实战中,怎么绘制文字聚光灯效果呢?这里利用linear-gradient给文字不同的颜色,同时background-clip: text;
clip-path: circle(100px at 0% 50%); 将背景做一个剪切。动画上不断的切换着clip-path 圆心的位置,就像手电在扫描一样。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-01
*/
<template>
	<div class="container">
		<div class="top">
			<h3>文字聚光灯效果</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
		</div>
		<div class="dajianshi">
              大剑师兰特
		</div>
	</div>
</template>

<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: slateblue;
		color: #fff;
	}

   .dajianshi{
	   width: 780px;
	   height: 200px;
	   margin:100px auto 0;
        position: relative;
        color: #6b6868;
        font-size: 150px; 
		background-color: black;
    }
    .dajianshi::after{
        content: '大剑师兰特';
        top: 0;
        left: 20px;
        position: absolute;
        color: transparent;
        background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
        background-clip: text;
        -webkit-background-clip: text;
        clip-path: circle(100px at 0% 50%);
        animation: movebg 3s linear alternate infinite;
    }
    @keyframes movebg{
        0%{
            clip-path: circle(100px at 0% 50%);
        }
        100%{
            clip-path: circle(100px at 100% 50%);
        }
    }

</style>



CSS基础知识点

1.CSS样式表
2.基础选择器:(1)标签选择器,(2)类选择器,(3)id选择器,(4)通配符选择器
3.复合选择器:(1)后代选择器,(2)子选择器,(3)并集选择器,(4)交集选择器,(5)伪类选择器。
4.字体样式属性:(1)字体大小font-size,(2)字体类型font-family,(3)字体粗细font-weight,(4)字体风格font-style
5.文本外观样式:(1)设置文本颜色color,(2)word-spacing,(3)letter-spacing,(4)line-height,(5)text-transform,(6)text-decoration,(7)text-align,(8)text-indent,(9)white-space
6.文本外观属性:(1)text-shadow,(2)overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性:(1)border-style,(2)border-width,(3)border-color,(4)border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片:(1)background-repeat,(2)background-position,(3)background-attachment,(4)background-size,(5)background-origin,(6)background-clip,(7)复合写法,(8)不透明
10.元素的类型
11.span标签
12.display
13.表格标签:(1)table标签,(2)tr标签,(3)td标签,(4)th标签,(5)表格边框,(6)折叠边框,(7)表格宽度和高度,(8)表格边框间距border-spacing,(9)表格标题位置caption-side
14.表单
14.1创建表单:(1)标签
14.2表单控件:(1)input控件,(2)input/标签的type属性,(3)textarea控件,(4)select控件
15.CSS盒子模型:(1)边框(border),(2)内边距(padding),(3)外边距(margin),(4)清除内外边距,(5)盒子模型
16.浮动布局:(1)传统网页布局,(2)浮动简介,(3)浮动特性,(4)清除浮动
17.定位布局:(1)定位组成,(2)相对定位relative,(3)绝对定位absolute,(4)子绝父相,(5)固定定位fixed,(6)定位叠放次序z-index,(7)定位拓展
三.其他
1.圆角边框:(1)圆形,(2)圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式:(1)鼠标样式 cursor,(2)轮廓线 outline,(3)防止拖拽文本域 resize,
5.过渡 transition

结尾语

CSS的应用无处不在,希望某个片段就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。

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

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

相关文章

LoadRunner性能测试从零开始

目录 第1章 软件性能测试 1.1 什么是软件的性能 1.1.1 软件 1.1.2 软件性能的产生 1.1.3 功能与性能的关系 1.1.4 用户眼里的软件性能 1.1.5 软件人员眼里的软件性能 1.1.6 以空间换时间 1.1.7&#xff0e;以时间换空间 1.2 软件性能测试 1.2.1 性能测试在软…

EI级 | Matlab实现TCN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 EI级 | Matlab实现TCN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.【EI级】Matlab实现TCN-LSTM-Multihead-Attent…

解决错误代号0x80240438丢失的全面指南,分析0x80240438错误问题

在使用电脑的过程中&#xff0c;我们常常遇到一些复杂的问题&#xff0c;并期待找到最佳解决方案。其中&#xff0c;与“0x80240438”相关的问题是一个值得深入探讨的主题。今天就和大家探讨错误代码0x80240438的问题&#xff0c;都有什么解决办法有效的解决错误代码0x80240438…

Everything结合内网穿透搭建在线资料库并实现随时随地远程访问

Everythingcpolar搭建在线资料库&#xff0c;实现随时随地访问 文章目录 Everythingcpolar搭建在线资料库&#xff0c;实现随时随地访问前言1.软件安装完成后&#xff0c;打开Everything2.登录cpolar官网 设置空白数据隧道3.将空白数据隧道与本地Everything软件结合起来总结 前…

必须收藏!十五个设计灵感网站

设计师必备的灵感网站是每个设计师都应该关注的一部分。它们是设计师在设计过程中获得灵感和创造力的好地方。 在这里&#xff0c;我将介绍一些值得关注的灵感网站&#xff0c;涵盖不同类型的设计&#xff0c;包括UI设计、平面设计、网站设计等。我希望这些网站能给你带来一些…

【Android】使用intent.putExtra()方法在启动Activity时传递数据

食用方法 在Android中&#xff0c;你可以使用Intent对象来在启动Activity时传递数据。以下是一个示例&#xff0c;展示了如何在startActivity时传递数据到被启动的Activity&#xff1a; 在启动Activity的地方&#xff0c;创建一个Intent对象&#xff0c;并使用putExtra()方法…

【HTTP协议】简述HTTP协议的概念和特点

&#x1f38a;专栏【网络编程】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出小吉的问题 文章目录 &#x1f33a;概念&#x1f33a;特点&#x1f384;请求协议&#x1f384;响应协议…

Spinnaker 基于 jenkins 触发部署

jenkins job 触发部署 将 Jenkins 设置为 Spinnaker 中的持续集成 (CI) 系统可让您使用 Jenkins 触发管道、向管道添加 Jenkins 阶段或向管道添加脚本阶段。 前置要求&#xff1a; 已在kubernetes中部署spinnaker已准备可用的jenkins实例 启用 jenkins触发器 官方文档&…

洛谷 [AGC032B] Balanced Neighbors

分析 首先明确图的定义&#xff0c;图点集边集&#xff0c;其中点必须要有一个&#xff0c;图不可以是空图。&#xff08;虽然和这道题没关系&#xff09; 正着想不明白那就反着来&#xff08;正难则反&#xff09;。 假设目前所有边都是连上的&#xff0c;可以发现每个点的…

【渗透】记录阿里云CentOS被渗透攻击

文章目录 发现排查安装Nethogs查询情况 最终方案 发现 流量异常&#xff0c;出现大流量&#xff0c;网络贷带宽占满情况 排查 安装Nethogs 1.1 Nethogs介绍 NetHogs是一个开源的命令行工具&#xff08;类似于Linux的top命令&#xff09;&#xff0c;用来按进程或程序实时统…

C语言-指针讲解(4)

在上一篇博客中&#xff1a; C语言-指针讲解(3) 我们给大家介绍了指针进阶的用法 让下面我们来回顾一下讲了什么吧&#xff1a; 1.字符指针变量类型以及用法 2.数组指针本质上是一个指针&#xff0c;里面存放数组的地址。而指针数组本质上是个数组&#xff0c;里面存放的是指针…

【带头学C++】----- 九、类和对象 ---- 9.1 类和对象的基本概念----(9.1.1---9.1.3)

目录 9.1 类和对象的基本概念 9.1.1 类的封装性 9.1.2 定义类的步骤和方法 9.1.3 设计一个学生类 Student 9.1 类和对象的基本概念 9.1.1 类的封装性 类是一种用户自定义的数据类型&#xff0c;它定义了一组数据成员和成员函数。类可以看作是一个模板或者蓝图&#xff0c;用…

党建引领·和谐共建——赤岗街首届微型社区养老服务公益博览会开幕

服务咨询平台&#xff0c;让社区长者更便捷地了解到养老相关政策、信息。 本次活动由赤岗街公共卫生委员会、赤岗街道办事处、中国老龄事业发展基金会老年维权基金管理委员会主办&#xff0c;珠影社区居委会、广州市穗星社会工作服务中心、广州市盈泽信息科技有限公司承办&…

生成对抗网络(DCGAN)手写数字生成

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09; 二、什么是生成对抗网络1. 简单介绍2. 应用领域 三、创建模型1. 生成器2. 判别器 四、定义损失函数和优化器1. 判别器损失2. 生成器损失 五、定义训练循环六、训练模型七、创建 G…

Amazon CodeWhisperer 使用体验

文章作者&#xff1a;STRIVE Amazon CodeWhisperer 是最新的代码生成工具&#xff0c;支持多种编程语言&#xff0c;如 java,js,Python 等&#xff0c;能减少开发人员手敲代码时间&#xff0c;提升工作效率。PS:本人是一名 CodeWhisperer 业余爱好者 亚马逊云科技开发者社区为开…

Spring Cloud 配置 Nacos

一&#xff0c;下载Nacos 下载地址&#xff1a;https://github.com/alibaba/nacos/releases 二&#xff0c;启动Nacos 安装Nacos的bin目录下&#xff0c; 执行&#xff1a;startup.cmd -m standalone 然后打开上图红框的地址 三&#xff0c;配置服务 1 配置Nacos 创建命名…

【C++】异常抛出变量的生命周期

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。搜…

[Android] c++ 通过 JNI 调用 JAVA函数

如何使用&#xff1a; Calling Java from C with JNI - CodeProject c里的 JNI 类型 和 JAVA 类型的映射关系&#xff1a; JNI Types and Data Structures Primitive Types and Native Equivalents Java TypeNative TypeDescriptionbooleanjbooleanunsigned 8 bitsbytejbyt…

高级java工程师手把手教你解决内存不足引起JVM奔溃真实生产事故案例实战

高级java工程师手把手教你解决内存不足引起JVM奔溃案例实战 一、真实事故描述&#xff1a; 生产环境的Java程序进程&#xff0c;直接宕掉&#xff0c;进程都没有了&#xff0c;JVM奔溃了。生产事故&#xff0c;生产直接停止了&#xff0c;甲方爸爸客户着急了&#xff0c;公司…

使用yolov7进行多图像视频识别

1.yolov7你可以让你简单的部署,比起前几代来说特别简单 #下面是我转换老友记的测试视频,可以看到几乎可以准确预测 2.步骤 1.在github官网下载代码 https://github.com/WongKinYiu/yolov7 2.点击下载权重文件放到项目中 3.安装依赖,我的python版本是3.6的 pip install -r requ…