CSS制作舞台聚光灯效果

今天依靠纯CSS来制作一个舞台聚光灯效果，先看效果图

         html{font-size: 15px;}body{background-color: #222;/* 为body设置使我们的h1垂直水平居中 */display: flex;justify-content: center;align-items: center;min-height: 100vh;}h1{color: #333;font-family: Helvetica;margin: 0;padding: 0;font-size: 8rem;position: relative;}h1::after{/* 我们看到的文字其实是h1的伪类内容 */content: "Counter-Strike";color: rgb(204, 0, 0);/* 我们使伪类和原内容保持重叠 */position: absolute;top: 0;right: 0;/* 然后下面这个属性是以一个形状来切割显示部分 我们这里使用圆形 */-webkit-clip-path: ellipse(100px 100px at 0% 50%);clip-path: ellipse(100px 100px at 0% 50%);/* 播放这个spotlight动画5s一次 无限重复 */animation: spotlight 5s infinite;}@keyframes spotlight {/* 然后动画部分可以看做是切割圆形部分从左向右再向左 */0%{-webkit-clip-path: ellipse(100px 100px at 0% 50%);clip-path: ellipse(100px 100px at 0% 50%);}/* 过程动画则是在右边所以我们的圆心改为100% 50% */50%{-webkit-clip-path: ellipse(100px 100px at 100% 50%);clip-path: ellipse(100px 100px at 100% 50%);}/* 所以0和100的动画都是在左边 */100%{-webkit-clip-path: ellipse(100px 100px at 0% 50%);clip-path: ellipse(100px 100px at 0% 50%);}}

注释和思路都写在代码中了 HTML部分就是一个H1标签

CSS制作舞台聚光灯效果相关推荐

CSS 制作烟雾效果文字
CSS 制作烟雾字体 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
使用CSS制作圆角效果
Web2.0中,圆角效果是很常见的,以前都是用图片来模仿,现在直接用css就能实现,例子代码如下 Html代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
HTML+CSS制作翻牌效果
预计效果但鼠标移动到相应的卡牌的时候,卡牌会自动翻转过去:当鼠标移走时,卡牌会自动盖上结构分析正面和背面分别用两个div显示,长度和宽度设置相同,使之完全重叠,这样就可以将position属性设 ...
html磨砂效果,使用css制作磨砂效果
要点:给需要磨砂的div(设rgba的那个元素) => 设置伪元素: 给伪元素content: ''.绝对定位,四处为0,left:0.... 给伪元素一样的背景图,并给z-index: -1 ...
纯css制作“破镜重圆”效果
纯HTML+CSS实战之制作相框效果
效果如图所示主要运用了盒子阴影,图片阴影,边框属性三个要点代码如下: <!DOCTYPE html> <html lang="en"> <head ...
如何用css实现百叶窗效果
1.效果图利用纯css实现百叶窗效果效果如下: 2.代码如下: 1.创建一个div 2.设置无序列表,插入事先准备好的图片 <!DOCTYPE html> <html lan ...
使用 | HTML CSS | 制作精美相框
文章目录使用dw编写精美相框 1,制作魔法动态相册 (1)html源码 (2)css源码 (3)运行效果 2,神奇创意相框 (1)HTML源码 (2)运行结果 3,普通相框 (1)HTML源码 (2 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...

CSS制作舞台聚光灯效果

今天依靠纯CSS来制作一个舞台聚光灯效果，先看效果图

CSS制作舞台聚光灯效果相关推荐

最新文章

热门文章