css动画绘制12星座
2020-04-05 18:19
1491 查看
最近要做一个关于星座的网站，需要美观，搜了一下绘制线性12星座的方法，没有找到，自己写的记录一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="donghua.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
.tick {
stroke-dasharray: 810;
stroke-dashoffset: 810;
}
ul.checked1+div>svg .tick {
animation: tick 2s ease-out;
animation-fill-mode: forwards;
/* animation-delay: .95s; */
}
ul.checked2+div>svg .tick {
animation: tick 2s ease-out;
animation-fill-mode: forwards;
/* animation-delay: .95s; */
}
@keyframes tick {
from {
stroke-dashoffset: 810;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<body>
<input style="top: 70px;" type="text" value="" id="thisStar_index">
<input type="text" value="" id="thisStar_id">
<input style="top:130px" type="text" value="" id="thisStar_name">
<ul id="checkStar">
</ul>
<div id="svgBox"></div>
</body>
<script>
let startArr = [{
"id": "Aries",
"name": "白羊座",
"point": [
[0.3, 0.78],
[0.34, 0.66],
[0.28, 0.48],
[0.6, 0.26],
[0.65, 0.2],
[0.71, 0.23],
[0.7, 0.32],
[0.72, 0.36]
],
"line": [
[0, 1, 2, 3, 4, 5],
[3, 6, 7]
]
}, {
"id": "Libra",
"name": "天秤座",
"point": [
[0.16, 0.67],
[0.34, 0.6],
[0.6, 0.27],
[0.75, 0.23],
[0.84, 0.47],
[0.63, 0.74],
[0.51, 0.78]
],
"line": [
[0, 1, 2, 3, 4, 5, 6]
]
}, {
"id": "Capricorn",
"name": "魔羯座",
"point": [
[0.78, 0.21],
[0.78, 0.34],
[0.75, 0.45],
[0.75, 0.7],
[0.69, 0.78],
[0.31, 0.66],
[0.22, 0.49],
[0.3, 0.53],
[0.53, 0.54]
],
"line": [
[0, 1, 2, 3, 4, 5, 6, 7, 8, 1]
]
}, {
"id": "Aquarius",
"name": "水瓶座",
"point": [
[0.45, 0.21],
[0.37, 0.35],
[0.27, 0.51],
[0.3, 0.58],
[0.29, 0.64],
[0.48, 0.79],
[0.51, 0.71],
[0.58, 0.68],
[0.73, 0.74],
[0.43, 0.53],
[0.53, 0.47]
],
"line": [
[0, 1, 2, 3, 4, 5, 6, 7, 8],
[2, 9, 10]
]
}, {
"id": "Pisces",
"name": "双鱼座",
"point": [
[0.28, 0.43],
[0.28, 0.53],
[0.36, 0.73],
[0.43, 0.78],
[0.5, 0.7],
[0.53, 0.62],
[0.57, 0.58],
[0.63, 0.43],
[0.67, 0.39],
[0.74, 0.39],
[0.77, 0.34],
[0.72, 0.3],
[0.75, 0.22],
[0.23, 0.5],
[0.66, 0.33]
],
"line": [
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
[0, 13, 1],
[8, 14, 11]
]
}, {
"id": "Taurus",
"name": "金牛座",
"point": [
[0.29, 0.21],
[0.39, 0.36],
[0.5, 0.51],
[0.5, 0.57],
[0.61, 0.63],
[0.77, 0.71],
[0.79, 0.79],
[0.22, 0.43],
[0.39, 0.57],
[0.6, 0.71],
[0.67, 0.76]
],
"line": [
[0, 1, 2, 3, 4, 5, 6],
[7, 8, 3],
[4, 9, 10]
]
}, {
"id": "Gemini",
"name": "双子座",
"point": [
[0.18, 0.37],
[0.25, 0.45],
[0.35, 0.55],
[0.39, 0.68],
[0.49, 0.77],
[0.51, 0.63],
[0.57, 0.78],
[0.28, 0.29],
[0.42, 0.32],
[0.61, 0.49],
[0.72, 0.6],
[0.83, 0.59],
[0.69, 0.75],
[0.22, 0.54],
[0.35, 0.43],
[0.48, 0.21]
],
"line": [
[0, 1, 2, 3, 4],
[2, 5, 6],
[7, 8, 9, 10, 11],
[9, 12],
[13, 1, 14, 8, 15]
]
}, {
"id": "Cancer",
"name": "巨蟹座",
"point": [
[0.16, 0.39],
[0.27, 0.36],
[0.52, 0.49],
[0.57, 0.65],
[0.83, 0.78],
[0.44, 0.21]
],
"line": [
[0, 1, 2, 3, 4],
[2, 5]
]
}, {
"id": "Leo",
"name": "狮子座",
"point": [
[0.16, 0.75],
[0.23, 0.67],
[0.39, 0.77],
[0.71, 0.53],
[0.64, 0.39],
[0.55, 0.37],
[0.47, 0.27],
[0.54, 0.24],
[0.6, 0.27],
[0.85, 0.56]
],
"line": [
[0, 1, 2, 3, 4, 5, 6, 7, 8],
[3, 9]
]
}, {
"id": "Virgo",
"name": "处女座",
"point": [
[0.16, 0.59],
[0.35, 0.63],
[0.44, 0.7],
[0.62, 0.51],
[0.77, 0.46],
[0.84, 0.37],
[0.6, 0.42],
[0.65, 0.26],
[0.34, 0.75]
],
"line": [
[0, 1, 2, 3, 4, 5],
[3, 6, 7],
[2, 8]
]
}, {
"id": "Scorpio",
"name": "天蝎座",
"point": [
[0.17, 0.5],
[0.28, 0.63],
[0.19, 0.7],
[0.28, 0.78],
[0.41, 0.77],
[0.49, 0.72],
[0.57, 0.55],
[0.59, 0.44],
[0.69, 0.31],
[0.74, 0.21],
[0.82, 0.29],
[0.79, 0.44],
[0.73, 0.5],
[0.38, 0.47]
],
"line": [
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
[1, 13],
[8, 11]
]
}, {
"id": "Sagittarius",
"name": "射手座",
"point": [
[0.22, 0.66],
[0.24, 0.51],
[0.45, 0.4],
[0.54, 0.37],
[0.59, 0.43],
[0.66, 0.5],
[0.63, 0.6],
[0.66, 0.67],
[0.74, 0.53],
[0.77, 0.39],
[0.49, 0.47],
[0.29, 0.68],
[0.3, 0.78],
[0.48, 0.21],
[0.52, 0.27],
[0.59, 0.29]
],
"line": [
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
[2, 10, 11, 12],
[10, 4],
[13, 14, 15, 3],
[14, 3]
]
}]
</script>
<script>
$(function () {
// 加载列表
loadMenu()
})
function loadMenu() {
let ulHtml = ''
startArr.forEach((item, i) => {
ulHtml += `<li data-index="` + i + `" ><input type="radio" name="star">` + item.name + `</li>`
})
$("#checkStar").empty().append(ulHtml)
$("#checkStar li").on("click", function () {
$(this).find("input").prop("checked", "checked");
$("#thisStar_index").val($(this).data("index"))
let thisStar = startArr[$(this).data("index")]
$("#thisStar_id").val(thisStar.id)
$("#thisStar_name").val(thisStar.name)
if ($("#checkStar").hasClass("checked1")) {
$("#checkStar").removeClass("checked1").addClass("checked2")
} else {
$("#checkStar").removeClass("checked2").addClass("checked1")
}
// 加载绘图事件
loadSvg()
})
}
function loadSvg() {
let starIndex = $("#thisStar_index").val()
let starId = $("#thisStar_id").val()
let starName = $("#thisStar_name").val()
let html = ''
html += `<svg width="400" height="400">`
let polylineArr = startArr[starIndex].line
let pointArr = startArr[starIndex].point
polylineArr.forEach(element => {
html += `<polyline fill="none" stroke="#68E534" stroke-width="8" points="`
element.forEach((i, item) => {
html += parseInt(pointArr[i][0] * 400) + `,` + parseInt(pointArr[i][1] * 400) + ' '
})
html += `" stroke-linecap="round" stroke-linejoin="round" class="tick" />`
});
html += `</svg>`
$("#svgBox").empty().append(html)
}
</script>
<style>
ul#checkStar {
margin: 0;
padding: 0;
position: fixed;
left: 10%;
}
input[type="text"] {
position: fixed;
left: 10%;
top: 100px;
}
ul#checkStar li {
padding: 10px;
cursor: pointer;
user-select: none;
}
</style>
</html>
- 点赞
- 收藏
- 分享
- 文章举报
Yunluo_orz
发布了3 篇原创文章 · 获赞 0 · 访问量 27
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画
- CSS 绘制三角形原理演示（动画）
- HTML+CSS绘制表格
- css绘制基本图形
- IOS绘制动画颜色渐变折线条
- 关于vue动画与animate.css的使用
- CSS动画之硬件加速
- swift 绘制、动画基础 （CAShapeLayer、CABasicAnimation）
- css动画之按钮放大缩小动态效果
- 纯css绘制三角形
- Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）
- css中的3D动画属性
- CSS动画效果——transition之渐变方块
- css动画翻转效果
- css动画性能优化
- CSS通过transition 实现的鼠标滑过边框线条动画特效原理
- css过渡和动画初学
- 使用Animate.css和wow.js，实现各大网站常用的页面加载动画
- CSS 动画指南： 原理和实战（二）
- css动画