dw做网站小技巧,郑州企业网站seo,室内设计应该学什么专业,免费工程信息网*事先声明#xff1a;本文章教程教学、文章封面来源自[CSS]聚光灯项目 by CodingStartup起码课#xff0c;且已经CodingStartup起码课授权允许转载#xff01;为了保持原有风格#xff0c;本文始终保持与CodingStartup起码课的视频风格一致*在出现同样的代码块时#xff0… *事先声明本文章教程教学、文章封面来源自[CSS]聚光灯项目 by CodingStartup起码课且已经CodingStartup起码课授权允许转载为了保持原有风格本文始终保持与CodingStartup起码课的视频风格一致*在出现同样的代码块时灰色为原有代码彩色为新增/修改代码HelloEverybody今天我们不讲别的就来讲讲利用CSS做一个聚光灯。先给大家放个例子https://itmanchina.github.io/css-test(复制到浏览器打开)到这里有的小伙伴会问啦这是怎么做到的好神奇其实很简单一层灰色的底层文字顶层文字为彩色套用css的圆形遮罩(Mask)再加上css animation(移动效果)就可以了。OK回归正题项目总共分成两个部分1.html2.css*因为html只占少量内容我们重点把放在css上(以下内容推荐到codepen.io或者其它代码实时预览网站测试)html部分h1TestTexth1css部分html { font-size: 15px; }/*这里把文字【TestText】的大小设定为15px(不懂px的小伙伴请百度Picture Element 【Pixel】) */body{ background-color: #222; /*背景颜色设为灰色*/ display: flex; justify-content: center; align-items: center; min-height: 100vh; } /*这一段css把文字【TestText】固定在html最中间的位置*/h1{ color: #333; /*这里设定字体的颜色为灰黑色*/ font-family: Helvetica; /*这里设置字体为Helvetica(常用于西方语言字母)*/ margin: 0; padding: 0; font-size: 8rem; /*文字大小设定*/ letter-spacing: -0.2rem; /*文字间距设定*/}/*知识点1rem 它是CSS3中新增加的一个尺寸(度量)单位根节点(html)的font-size决定了rem的尺寸也就是说它是一个相对单位相对于(html)。*//*知识点2margin 这个简写属性设置一个元素所有外边距的宽度或者设置各边上外边距的宽度块级元素的垂直相邻外边距会合并而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地浮动元素的外边距也不会合并。允许指定负的外边距值不过使用时要小心。(允许存在负值)*//*知识点3padding 简写属性在一个声明中设置所有内边距属性这个简写属性设置元素所有内边距的宽度或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算因此如果一个元素既有内边距又有背景从视觉上看可能会延伸到其他行有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。*/↓写到这里你的成果应该是这样的哦(底部文字示例)到这里第一步算是完成了(长叹一口气)(接着还是CSS的内容)css部分(敲重点)h1::after{ content: TestText; /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/ color: yellow; /*顶端文字颜色设为“黄色”*/ position: absolute; /*css绝对定位(百度有较详细的介绍这里不多赘述)*/ top: 0; /*顶端文字顶部距离*/ left: 0; /*顶端文字左端距离*/}/*这时候底部文字居中顶部文字被固定在左上角*/要将它(被设黄色的底部文字)与底部文字重叠起来将h1字段(新增)position设定为relative就可以达到(顶部文字和底部文字)重叠的效果了CodingStartup起码课也就是将上面的h1字段变成h1{ /*color: #333;*/ /*font-family: Helvetica;*/ /*margin: 0*/ /*padding: 0;*/ /*font-size: 8rem;*/ /*letter-spacing: -0.2rem;*/ position: relative; }文字重叠完成效果图↓(顶部文字与底部文字结合后示例)紧接着继续修改h1::after部分(套用圆形mask【遮罩】)【也是重点】h1::after{ /*content: TestText;*/ /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/ /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ -webkit-clip-path: ellipse(100px 100px at 0% 50%); /*刻画一个直径为100px的正圆形位置处于重叠文字的最左端、水平垂直的1/2处*/ clip-path: ellipse(100px 100px at 0% 50%); }/*由于浏览器的支援性问题Safari、Chrome等浏览器需要一段前缀【-webkit-】才能支持clip-path的属性*//*使用前缀时一定要保留原来的属性*//*为了防止已经支持clip-path属性的浏览器(FireFox等)出错保留原来的clip-path属性*/到了这一步黄色的小聚光灯应该会出现在最左边的【Te】处这时候尝试把clip-path的0%修改为50%(-webkit-和原来的都修改一下)看看聚光灯是不是被移动到了文字的中间。如果是的话证明代码有效。如果不变的话请检查代码是否有误【记得修改成功后重新把左边的50%改回0%哦】【右边的50%是定值不要动】↓(效果图)↓(聚光灯居中示例)好的接下来继续创建新的区块keyframes spotlight { 0% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); /*这里直接套用完整的clip-path区块下面的100%与0%用同样的数据*/ } 50% { -webkit-clip-path: ellipse(100px 100px at 100% 50%); clip-path: ellipse(100px 100px at 100% 50%); /*50%的clip-path要把原本的0%改为100%让mask(遮罩)到达文字的最右端*/ } 100% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); }}/*keyframes的animation(动画)部分完成*/动画部分完成得差不多啦但还差一个重要的步骤现在让我们继续将animation写入到h1::after中h1::after{ /*content: TestText;*/ /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/ /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形位置处于重叠文字的最左端、水平垂直的1/2处*/ /*clip-path: ellipse(100px 100px at 0% 50%);*/ animation: spotlight 5s infinite; /*让keyframes里的动画5秒循环一次动画永久循环*/ }接下来有两个地方想修饰一下第一黄色的(顶端)文字是直接写在了h1::after里的content内想把值设定在HTML里面CodingStartup起码课①(终于)要对html部分动手了h1 data-spotlightTestTextTestTexth1②继续改h1::after的内容h1::after{ content: attr(data-spotlight); /*这部分直接从h1中读取顶部文字的值而不用在这里设定一个值了*/ /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形位置处于重叠文字的最左端、水平垂直的1/2处*/ /*clip-path: ellipse(100px 100px at 0% 50%);*/ /*animation: spotlight 5s infinite;*/ /*让keyframes里的动画5秒循环一次动画永久循环*/ }第二大家会发制作成品的文字(TestText)是彩色的而不是黄色(纯色)的CodingStartup起码课方法是用上背景图片把文字当做一个mask(遮罩)【彩色图片地址https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg】继续对h1::after动手h1::after{ /*content: attr(data-spotlight);*/ /*这部分直接从h1中读取顶部文字的值而不用在这里设定一个值了*/ color: transparent; /*重中之重顶端文字颜色设为“透明”*/ /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍这里不多赘述)*/ /*top: 0;*/ /*顶端文字顶部距离*/ /*left: 0;*/ /*顶端文字左端距离*/ /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形位置处于重叠文字的最左端、水平垂直的1/2处*/ /*clip-path: ellipse(100px 100px at 0% 50%);*/ /*animation: spotlight 5s infinite;*/ /*让keyframes里的动画5秒循环一次动画永久循环*/ background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg); /*这里把背景设置为url内图片的链接*/ background-size: 150%; /*经背景放大为原来的1.5倍*/ background-position: center center; /*将背景图置中*/ -webkit-background-clip: text; /*详细介绍查看上文有关【-webkit-】的介绍*/ background-clip: text; /*将背景的绘图区域设定在文字中*/ }到了这里总算是搞定聚光灯效果的构建了但是因为这只是预览阶段的内容所以暂时还不能直接发布到网络上Q怎么办A在html加入css的位置就可以了。html部分(记得把这些代码保存到.html文件内)htmlheadtitleCSS 测试title link href1.css relstylesheet typetext/css mediaall / headbodyh1 data-spotlightTestTextTestTexth1bodyhtml来一遍没有注释的完整的csshtml{ font-size15px;}body{ background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh;}h1{ color: #333; font-family: Helvetica; margin: 0; padding: 0; font-size: 8rem; letter-spacing: -0.2rem; position: relative;}h1::after{ content: attr(data-spotlight); color: transparent; position: absolute; left: 0; top: 0; -webkit-clip-path: ellipse(100px 100px at 0% 50%); clip-path: ellipse(100px 100px at 0% 50%); animation: spotlight 6s infinite; background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg); background-size: 150%; background-position: center center; -webkit-background-clip: text; background-clip: text;}keyframes spotlight { 0% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); } 50% { -webkit-clip-path: ellipse(100px 100px at 100% 50%); clip-path: ellipse(100px 100px at 100% 50%); } 100% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%); }}最后将这两个文件放置在服务器(或者Github Pages)的同一个目录下即可发布到网络上啦~\(≧▽≦)/~OK以上就是关于CSS聚光灯项目的全部内容觉得不错的话点个“在看吧”(也要记得关注CodingStartup起码课哦)↓打赏一下关注CodingStartup起码课↓点个“在看”就是对我们最大的支持?
