js css 悬浮动画字体

╰+攻爆jí腚メ 2023-09-29 11:00 17阅读 0赞

<!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>
    				
    			</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;
    } */

![4ce034647d504df488a8e82c74422eb7.png][]

[4ce034647d504df488a8e82c74422eb7.png]: https://img-blog.csdnimg.cn/4ce034647d504df488a8e82c74422eb7.png