【闲来无聊写个几个小特效——五角星，小光圈，探照灯】
五角星，见过吧，如果是你，你如何使用代码写一个五角星呢？思考一下，你会说，先这样在那样就好啦，可是真正上手的时候却修修改改磕磕绊绊来看一下今天的五角星如何用几行代码实现
1.绘制五角星
四行代码实现五角星，首先我们需要写一个div给他一个class，然后再写五角星的样式，这里使用的是clip-path属性。那啥是clip-path啊？clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。polygon多边形的意思，里面有10对数值，分对应的是五角星的十条边，有的小伙伴说，你这也忒麻烦了，还要自己找边找点。确实自己找的话有点麻烦，于是出现了这样一个好东西
bennettfeely，这里面有许许多多的形状供你选择，光介绍没意思，来看一下如何使用吧。
第一步：
进入之后会看到这样一个页面点击Clippy…clip-paths
第二步：根据自己需要的图形来进行相应的调整，下方也会随着你的更改进行数值的变化，红色箭头所指的就是各种图形，蓝色箭头所指的是该图形的大小尺寸，绿色箭头指的是该裁剪图形的背景，调好后直接把下面的数值复制过来就行了
<style>.star {width: 100px;height: 100px;background: plum;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}</style>
</head><body><div class="star"></div>
</body>
效果展示
2.炫酷加载光圈
第一步：去隔壁王叔叔家拿来一个div盒子和四个span，给盒子一个class，再设置盒子的属性，让它变成圆形，加个伪元素选择器，实现圆形到圆圈的一个变化。
第二步：给span也加上为元素选择器，使用linear-gradient实现渐变效果颜色可以设置自己喜欢的颜色。
第三步：使用filter过滤函数的blur属性来给span设置模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
第四步：设置动画使用@keyframes，然后给div添加上动画就完成了。
<style>body {background: rgb(16, 1, 29);}.load {margin: 0 auto;margin-top: 200px;position: relative;width: 100px;height: 100px;border-radius: 50%;background: linear-gradient(rgb(200, 255, 0), rgb(0, 119, 255), rgb(51, 255, 51));animation: animate 0.8s linear infinite;}.load::after {content: '';position: absolute;top: 10px;left: 10px;right: 10px;bottom: 10px;background: black;border-radius: 50%;}.load span {position: absolute;width: 100%;height: 100%;border-radius: 50%;background: linear-gradient(rgb(200, 255, 0), rgb(0, 119, 255), rgb(51, 255, 51));animation: animate 0.8s linear infinite;}.load span:nth-child(1) {filter: blur(5px)}.load span:nth-child(2) {filter: blur(10px)}.load span:nth-child(3) {filter: blur(25px)}.load span:nth-child(4) {filter: blur(50px)}@keyframes animate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
</head><body><div class="load"><span></span><span></span><span></span><span></span></div>
</body>
效果展示
3.探照灯
第一步：从王叔叔家拿来一个h1，在里面写上自己的名字，设置该h1的伪元素，这里的内容就不能为空了，而是attr（title）获取咱们设置的title文字，之后会使用到。
第二步：设置探照灯动画 ，还是使用clip-path，探照灯一般都是圆形的所以这里设置的就是一个圆形，设置动画内容就好了，可以根据自己喜欢的形状设置动画效果，将该动画设置到h1里面就能实现探照灯效果啦
<style>body {text-align: center;background: rgb(66, 66, 66);}.spotlight {position: relative;display: inline-block;font-size: 48px;}.spotlight::after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;content: attr(title);color: white;animation: spotlight 3s ease-in-out infinite alternate;}/* 设置探照灯动画 */@keyframes spotlight {0% {clip-path: ellipse(32px 32px at 0% 50%)}100% {clip-path: ellipse(32px 32px at 100% 50%)}}</style>
</head><body><h1 title="你好，我是山鱼君" class="spotlight">你好，我是山鱼君</h1>
</body>
效果展示
点赞：您的赞赏是我前进的动力！
【闲来无聊写个几个小特效——五角星，小光圈，探照灯】相关推荐
- 今天无聊写了个自定义动态特效烟雾PHP源码
自定义设置的动态烟雾特效源码,很耐玩,,左侧可以暂停 保存图片,挺有视觉感觉! ## 今天无聊写了个自定义动态特效烟雾PHP源码##蓝奏网盘下载**动态特效烟雾PHP源码.rar - 蓝奏云
- 闲得无聊？不如用Python设计一个经典小游戏
前言 想不想在闲得无聊的时候,用自己学过的Python基础知识,来做一个非常简单的猜大小的游戏,里面囊括许多非常基础的知识点,函数设计,条件控制和循环等等,在做的过程中其实也是在不断的复习,提高你的基 ...
- 【闲得无聊】写个web版功德无量附代码+静态资源
[闲得无聊]写个web版功德无量附代码+静态资源 Vue2环境开发 web版无量功德 <template> <div class="merits">< ...
- 分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理 就是页面加载完毕的时候 请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码 我是改的 onload ...
- python测试开发自学教程-Web开发哪家强？看我用 Python 写一个颜值测试小工具
我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 简介 要实现颜值测试功能,大致有两种方式:一种是自己 ...
- python恶搞小程序-知道了这个，你也能写出 Python 趣味小程序
原标题:知道了这个,你也能写出 Python 趣味小程序 前两天在 51CTO 看见某篇推荐博文,大概是一个 豆子比较感兴趣,在知乎和 github 上搜索了相关的源代码,发现原来实现起来非常的简单, ...
- python文件分发_python 写一个文件分发小程序
一.概述 该小程序实现从源端到目标端的文件一键拷贝,源端和目标段都在一台电脑上面,只是目录不同而已 二.参数文件说明 1. settings.txt的说明 a. 通过配置settings.txt,填源 ...
- 无聊写的一个PHP Socket类
无聊写的一个PHP Socket类,功能还比较简单,不完善. <?php /** *//*** * @project:socket类 * @license:GPL ...
- python的pygame库使用方法_python基础教程使用Python第三方库pygame写个贪吃蛇小游戏...
今天看到几个关于pygame模块的博客和视频,感觉非常有趣,这里照猫画虎写了一个贪吃蛇小游戏,目前还有待完善,但是基本游戏功能已经实现,下面是代码: # 导入模块 import pygame impo ...
最新文章
- LeetCode简单题之最少操作使数组递增
- 重大BUG：你的淘宝双十一订单可能多付钱了！
- 能用来写安卓吗_石粉能否用来制砂生产？能代替沙子使用吗?Z95
- 前端学习（2937）：vue对象之间的实例属性
- 神经网络与深度学习——TensorFlow2.0实战(笔记)(三)(python运算符和表达式)
- 源码安装mysql数据库_Linux下源码安装mysql数据库
- 抖音“市长带你看湖北”首场直播：总成交额1793万元
- xcode Cornerstone 拷贝项目 提示框架头文件找不到的问题
- Anaconda中安装pygame
- 服务器搬迁方案_网站服务器迁移方案
- App Store 付款方式被拒绝
- 如何给Digspark ATTINY85下载程序
- android代码 qq语音,Android仿QQ语音变声功能实现（二）---移植到android studio 并
- 开源集锦（五）开源框架和快速开发工具类
- TCP/IP第四章笔记ARP协议
- nn.Flatten()函数详解及示例
- ecshop添加多国货币
- Ball in Berland
- ElasticSearch底层实现原理
- 英语软件那些好玩的功能你知道吗
热门文章