js css 悬浮动画字体

江城开朗的豌豆
98 阅读2分钟 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="./myStyle.css">
		<link rel="stylesheet" href="animate.min.css">
		<script src="./jquery-3.1.1.min.js"></script>
		<script src="./wow.min.js"></script>
	</head>
	<body>
		<div class="sidbar">
			<!-- 挂件 -->
			<details class="open">
				<summary>
					<span></span>
					<span></span>
					<span></span>
				</summary>
			</details>
			<ul class="menu tupCass">
				<li class="htmlspan">

				</li>
				<!-- <li class="htmlspan">
					
				</li>
				<li class="htmlspan">
					
				</li>
				<li class="htmlspan">
					
				</li> -->
			</ul>
		</div>
		<script type="text/javascript">
			var wow = new WOW({
				boxClass: 'wow',
				animateClass: 'animated',
				offset: 0,
				mobile: true,
				live: true
			});
			
			let open = document.querySelector(".open")
			let sidbar = document.querySelector(".sidbar")
			let isOpen = false
			open.onclick = () => {
				wow.init();
				if (isOpen == true) {
					sidbar.classList.remove('sidbar-avtive')
					open.classList.remove('active')
				} else {
					sidbar.classList.add('sidbar-avtive')
					open.classList.add('active')
				}
				isOpen = !isOpen
				var span_text = "abcdepoijhtydqq"
				dongHua(span_text)
			}


			function dongHua(span_text) {
				let l = span_text.length
				let sz = 0
				let init = 0
				if (l % 2) { //奇数
					sz = Math.floor(l / 2) //商
					init = 0
				} else { //偶数
					sz = l / 2
					init = 1
				}
				let arr = []
				let span_html = '';
				for (let i = init; i <= sz; i++) {
					//奇数
					let zarr = []
					if (l % 2) {
						if (i == init) {
							span_html = `<span class="id${i}">${span_text[sz]}</span>`
							console.log("span_html", span_html)
							zarr.push(span_html)
							// zarr.push({
							// 	htmlName:a[sz],
							// 	id:`id${i}`
							// })
							// `id${i}`

						} else {
							span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
							zarr.push(span_html)
							span_html = `<span class="id${i}">${span_text[sz+i]}</span>`
							zarr.push(span_html)
							// $(".htmlspan").html(span_html)
							// $(".htmlspan").html(span_html1)
							// zarr.push({
							// 	htmlName:[sz-i],
							// 	id:`id${i}`
							// })
							// zarr.push({
							// 	htmlName:a[sz+i],
							// 	id:`id${i}`
							// })
						}
					} else {
						if (i == init) {
							// zarr.push({
							// 	htmlName:a[(sz-i)],
							// 	id:`id${i-1}`
							// })
							// zarr.push({
							// 	htmlName:a[(sz)],
							// 	id:`id${i-1}`
							// })
							span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
							zarr.push(span_html)
							span_html = `<span class="id${i}">${span_text[sz]}</span>`
							zarr.push(span_html)
						} else {
							// zarr.push({
							// 	htmlName:a[(sz-i)],
							// 	id:`id${i-1}`
							// })
							// zarr.push({
							// 	htmlName:a[(sz+i-1)],
							// 	id:`id${i-1}`
							// })
							span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
							zarr.push(span_html)
							span_html = `<span class="id${i}">${span_text[sz+i-1]}</span>`
							zarr.push(span_html)
						}
					}
					arr.push(zarr)

					// arr.push(zarr)
				}
				console.log("arr", arr)
				var newArr = []
				for (let index = 0; index < arr.length; index++) {
					if (index == 0) {
						newArr.push(arr[index][0])
					} else {
						newArr.unshift(arr[index][0])
						newArr.push(arr[index][1])
					}
				}
				console.log("newArr", newArr)
				// for (let j = 0; j < newArr.length; j++) {
				// 	span_html += newArr[j]
				// 	console.log("span_html",span_html)
				// }
				span_html = newArr.join('')
				$(".htmlspan").html(span_html)
				setTimeout(() => {
					for (let i = 0; i <= sz; i++) {
						console.log("i", i)
						setTimeout(() => {
							let a = document.querySelectorAll(`.id${i}`)
							console.log(a)
							if (i == 0) {
								a[0].style.transform = "translateY(-150px)"
								a[0].style.transition = "all 1s"
							} else {
								a[0].style.transform = "translateY(-150px)"
								a[0].style.transition = "all 1s"
								a[1].style.transform = "translateY(-150px)"
								a[1].style.transition = "all 1s"
							}

						}, 50 * i)
					}
				}, 100)
			}
			$(".menu >li").hover(function() {
				var span_text = "abcdepoijhtydqq"
				let l = span_text.length
				let sz = 0
				let init = 0
				sz = Math.floor(l / 2) //商
				for (let i = 0; i <= sz; i++) {
					console.log("i", i)
					setTimeout(() => {
						let a = document.querySelectorAll(`.id${i}`)
						console.log(a)
						if (i == 0) {
							a[0].style.transform = "translateY(-300px)"
							a[0].style.transition = "all 1s"
						} else {
							a[0].style.transform = "translateY(-300px)"
							a[0].style.transition = "all 1s"
							a[1].style.transform = "translateY(-300px)"
							a[1].style.transition = "all 1s"
						}

					}, 50 * i)
				}
			}, function() {
				var span_text = "abcdepoijhtydqq"
				let l = span_text.length
				let sz = 0
				let init = 0
				sz = Math.floor(l / 2) //商
				for (let i = 0; i <= sz; i++) {
					console.log("i", i)
					setTimeout(() => {
						let a = document.querySelectorAll(`.id${i}`)
						console.log(a)
						if (i == 0) {
							a[0].style.transform = "translateY(-150px)"
							a[0].style.transition = "all 1s"
						} else {
							a[0].style.transform = "translateY(-150px)"
							a[0].style.transition = "all 1s"
							a[1].style.transform = "translateY(-150px)"
							a[1].style.transition = "all 1s"
						}

					}, 50 * i)
				}
			})


			// $(".menu >li").mouseleave(function(){
			// 	var span_text = "abcdepoijhtydqq"
			// 	let l = span_text.length
			// 	let sz = 0
			// 	let init = 0
			// 	sz = Math.floor(l/2) //商
			// 	for (let i = 0; i <= sz; i++) {
			// 				console.log("i",i)
			// 				setTimeout(()=>{
			// 					let a = document.querySelectorAll(`.id${i}`)
			// 					console.log(a)
			// 					if(i == 0){
			// 						a[0].style.transform = "translateY(-300px)"
			// 						a[0].style.transition = "all 1s"
			// 					}else{
			// 						a[0].style.transform = "translateY(-300px)"
			// 						a[0].style.transition = "all 1s"
			// 						a[1].style.transform = "translateY(-300px)"
			// 						a[1].style.transition = "all 1s"
			// 					}

			// 				},50*i)
			// 			}
			// })
		</script>
	</body>
</html>

body,//myStyle 文件夹
div,
dl,
dt,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

* {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
}

/*                            图片居中显示 */
img,
input,
button {
	border: none;
	vertical-align: middle;
}

/* 单行省略 */
.row {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

}

/* 2行省略 */
.row2 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 3行省略 */
.row3 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* 4行省略 */
.row4 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* 3行省略 */
.row5 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

/* 3行省略 */
.row6 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
}

/* 7行省略 */
.row7 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
}

.font15 {
	font-size: 0.9375rem !important;
}

.font18 {
	font-size: 1.125rem !important;
}

.font20 {
	font-size: 1.25rem !important;
}

.font25 {
	font-size: 1.5625rem !important;
}

/* 转大写 */
.tupCass {
	text-transform: uppercase;
}




.min1200 {
	min-width: 1200px;
}

details {
	width: 25px !important;
	height: 20px !important;
	margin-right: 20px;
}

details summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	width: 100%;
	height: 100%;
}

summary span {
	display: block;
	width: 100%;
	height: 5px;
	background-color: #FFFFFF;
	transition: 0.3s;
	position: absolute;
}

summary span:first-child {
	top: 0;
}

summary span:nth-child(2) {
	top: calc(50% - 2.5px);
}

summary span:last-child {
	bottom: 0;
}

details[open] span:nth-child(2) {
	display: none;
}

details[open] span:first-child {
	top: calc(50% - 2.5px);
	transform: rotate(-45deg);
	transform-origin: center;
}

details[open] span:last-child {
	bottom: calc(50% - 2.5px);
	transform: rotate(45deg);
	transform-origin: center;
}

header {
	position: relative;
}

datalist[open]+nav {

	overflow: auto;
}




body,html{
	width: 100vw;
	height: 100vh;
	background-color: #272822;
}
.sidbar{
	width: 100%;
	height: 100%;
	background: #ffc324;
	position: fixed;
	top: 0;
	display: flex;
	justify-content: center;
	padding-top: 100px;
	transition: all .5s;
	left: 100%;
	/* left: 0; */
}
.sidbar-avtive{
	left: 0;
}
.open{
	position: fixed;
	right: 15px;
	top: 15px;
}
.active{
	color: #007AFF;
}
.menu li{
	/* width: 500px; */
	height: 100px;
	overflow: hidden;
	border: 1px solid #000000;
	position: relative;

	color: #000000;
	display: flex;
	font-weight: bold;
	font-size: 7.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	/* margin-bottom: 8px; */
	transition: all .3s;
	line-height: 80px;
}
.menu li span{
	
	margin-top: 300px;
	
	/* transform: translateY(-150px); */
}


.curts{
	background-color: #FFFFFF;
	color: #000000;
	
	cursor: pointer;
}
/* .menu >.curts,
.menu >li:hover{
	color: #FFFFFF;
	font-size: 6.875rem;
	cursor: pointer;
} */

 

avatar
文章
阅读
粉丝