从图形上删除轴
删除图形中的轴：
前端开发
在 HTML、CSS 和 JavaScript 中，删除图形中的轴可以通过以下方式实现：
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除轴示例</title>
<style>
.container {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke-dashoffset="10" d="M3.5,8.5C3.5,6.8 4.2,5.5 5,4.5C5.8,3.5 7,2.5 8.5,2.5C9.2,2.5 10,3.5 10.5,4.5C11.3,5.5 12.1,6.8 12.1,8.5C12.1,10.2 11.3,11.3 10.5,12.1C9.7,12.1 8.5,11.3 8.5,10.2C8.5,9.7 9.7,8.5 10.5,7.8C11.3,6.8 12.1,5.5 12.1,4.5C12.1,3.5 11.3,2.5 10.5,2.5C9.7,2.5 8.5,3.5 8.5,4.5C8.5,5.5 9.2,6.8 10,8.5L10,8.5Z" />
</svg>
</div>
<script>
const svg = document.querySelector('svg');
const path = document.querySelector('path');
path.style.strokeDashoffset = '0';
setTimeout(() => {
path.style.strokeDashoffset = '10';
}, 1000);
</script>
</body>
</html>- CSS:
svg {
width: 100%;
height: 100%;
}
path {
stroke-dasharray: 10;
stroke-dashoffset: 10;
animation: stroke-dashoffset 2s linear forwards;
}
@keyframes stroke-dashoffset {
to {
stroke-dashoffset: 0;
}
}- JavaScript:
document.addEventListener('DOMContentLoaded', () => {
const svg = document.querySelector('svg');
const path = document.querySelector('path');
path.style.strokeDashoffset = '10';
setTimeout(() => {
path.style.strokeDashoffset = '0';
}, 1000);
});以上代码分别演示了如何在 HTML、CSS 和 JavaScript 中实现删除图形中的轴。
相关·内容
10分15秒
09-尚硅谷-主一从复制配置上
390
11分27秒
15.双主双从主从复制上
400
9分21秒
13-尚硅谷-双主双从复制配置上
410
5分43秒
从零玩转Git-版本控制工具 13 删除分支 学习猿地
16
6分23秒
09-尚硅谷-webpack从入门到精通-vue开发环境配置（上）
340
25分31秒
每日互动CTO谈数据中台(上)：从要求、方法论到应用实践
3.2K0
24分44秒
52.Webpack5从入门到原理-项目-ReactCli-开发模式配置-上
350
7分46秒
54.Webpack5从入门到原理-项目-ReactCli-生产模式配置-上
350
8分6秒
30-尚硅谷-webpack从入门到精通-自定义webpack：生成bundle（上）
290
58分40秒
Vue3.x从入门到项目实战 07.webpack工具（上） 学习猿地
1K0
55分16秒
Vue3.x从入门到项目实战 25.状态管理（上） 学习猿地
3840
16分34秒
05-尚硅谷-webpack从入门到精通-webpack核心内容分析（上）
300
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
