html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
代码解读
定义dom,设置3层容器:
居中显示:
html,
body,
.loader {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定义容器尺寸:
.loader {
width: 200px;
height: 200px;
position: relative;
}
.loader .face {
position: absolute;
width:100%;
height: 100%;
border: 2px solid white;
border-radius: 50%;
}
画出半圆弧:
.loader .face {
--color: gold;
border-top-color: var(--color);
border-left-color: var(--color);
}
画出弧线的端点:
.loader .face .circle {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 1px;
background-color: white;
transform-origin: left;
transform: rotate(-45deg);
}
.loader .face .circle::before {
position: absolute;
top: -5px;
right: -5px;
content: '';
background-color: var(--color);
width: 10px;
height: 10px;
border-radius: 50%;
}
给端点增加光晕效果:
.loader .face .circle::before {
box-shadow: 0 0 20px var(--color),
0 0 40px var(--color),
0 0 60px var(--color),
0 0 80px var(--color),
0 0 100px var(--color),
0 0 0 5px rgba(255,255,0,0.1);
}
隐藏掉辅助线:
.loader .face {
border: 2px solid transparent;
}
.loader .face .circle {
background-color: transparent;
}
在 dom 中再增加一条弧线:
调整2条弧线的直径,变成同心弧:
.loader .face:nth-child(1) {
width:100%;
height: 100%;
}
.loader .face:nth-child(2) {
width:70%;
height: 70%;
}
调整2条弧线的颜色:
.loader .face:nth-child(1) {
--color: gold;
}
.loader .face:nth-child(2) {
--color: lime;
}
调整2条弧线的端点位置:
.loader .face:nth-child(1) {
--deg: 0deg;
}
.loader .face:nth-child(2) {
--deg: 180deg;
}
.loader .face .circle {
transform: rotate(calc(var(--deg) - 45deg));
}
定义动画效果:
.loader .face {
animation: animate 3s linear infinite;
}
@keyframes animate
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
最后,让第 2 条弧线反向旋转:
.loader .face:nth-child(2) {
animation-direction: reverse;
}
大功告成!
html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...相关推荐
- 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- python绘制图形沙漏_前端每日实战:118# 视频演示如何用纯 CSS 创作一个沙漏 loader...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, saf ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
最新文章
- 利用NVIDIA-NGC中的MATLAB容器加速语义分割
- AI科学家王怀清:机器视觉识别领域 或将出现AI独角兽
- 合并报表编制采用的理论_合并报表操作的整体思路梳理
- Gradient Boosting, Decision Trees and XGBoost with CUDA ——GPU加速5-6倍
- Dos命令控制Mysql语句(自己老记不住)
- 原来这些元器件最容易引发电路故障。。。
- LinuxC高级编程——线程间同步
- 送书 | 获得诺贝尔奖之后影响力会下降?绘制精英科学家的职业生涯路线图
- LibcarePlus用户态程序热补丁
- Linux下服务器搭建(5)——CentOS下Redis的安装
- win7建立服务器文件夹权限,win7 ftp服务器 文件夹权限
- 删除java速度变慢_Java正则表达式运行速度很慢
- SQL删除重复数据,仅保留(最新/有效的)一条数据
- Websphere9.0的安装
- ppt如何替换其他mo ban_一次性解决PPT初学者的20个常见问题,赶紧收藏
- git的基本使用[远程库库操作 - GitHub]
- 2017车载后市场年终回顾:天下武功,唯快不破
- C/C++使用ODBC连接MSSQL数据库
- 在Java中计算一元线性回归
- Win7 IE11、Flash插件、.NET Framework组件 安装教程
热门文章
- 银行核心业务系统全盘西化成功与否都是警钟
- 全方位理解「元宇宙」:一切才刚刚开始
- sd和sem啥区别_SD与SEM区别
- 魔百盒M301A免拆机线刷固件-九联代工-S905L2(附教程)
- 自动售货机软件工程课设_软件工程 自动售货机
- 云南师范大学文理学院计算机科学与技术,2020-2021学年云南师范大学文理学院 “数据达人秀”专业文化月...
- MWC 2017小结:各家新机缺乏创新,5G落地尚需时日
- shell 十三问:
- 模拟a标签实现带header的下载
- php删除七牛云文件