devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js css 悬浮动画字体_前端悬浮显示字 cursor

作者：你好赵伟 | 2024-05-07 09:34:47

赞

踩

前端悬浮显示字 cursor
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="./myStyle.css">
  7. 		<link rel="stylesheet" href="animate.min.css">
  8. 		<script src="./jquery-3.1.1.min.js"></script>
  9. 		<script src="./wow.min.js"></script>
  10. 	</head>
  11. 	<body>
  12. 		<div class="sidbar">
  13. 			<!-- 挂件 -->
  14. 			<details class="open">
  15. 				<summary>
  16. 					<span></span>
  17. 					<span></span>
  18. 					<span></span>
  19. 				</summary>
  20. 			</details>
  21. 			<ul class="menu tupCass">
  22. 				<li class="htmlspan">
  23.  
  24. 				</li>
  25. 				<!-- <li class="htmlspan">
  26. 					
  27. 				</li>
  28. 				<li class="htmlspan">
  29. 					
  30. 				</li>
  31. 				<li class="htmlspan">
  32. 					
  33. 				</li> -->
  34. 			</ul>
  35. 		</div>
  36. 		<script type="text/javascript">
  37. 			var wow = new WOW({
  38. 				boxClass: 'wow',
  39. 				animateClass: 'animated',
  40. 				offset: 0,
  41. 				mobile: true,
  42. 				live: true
  43. 			});
  44. 			
  45. 			let open = document.querySelector(".open")
  46. 			let sidbar = document.querySelector(".sidbar")
  47. 			let isOpen = false
  48. 			open.onclick = () => {
  49. 				wow.init();
  50. 				if (isOpen == true) {
  51. 					sidbar.classList.remove('sidbar-avtive')
  52. 					open.classList.remove('active')
  53. 				} else {
  54. 					sidbar.classList.add('sidbar-avtive')
  55. 					open.classList.add('active')
  56. 				}
  57. 				isOpen = !isOpen
  58. 				var span_text = "abcdepoijhtydqq"
  59. 				dongHua(span_text)
  60. 			}
  61.  
  62.  
  63. 			function dongHua(span_text) {
  64. 				let l = span_text.length
  65. 				let sz = 0
  66. 				let init = 0
  67. 				if (l % 2) { //奇数
  68. 					sz = Math.floor(l / 2) //商
  69. 					init = 0
  70. 				} else { //偶数
  71. 					sz = l / 2
  72. 					init = 1
  73. 				}
  74. 				let arr = []
  75. 				let span_html = '';
  76. 				for (let i = init; i <= sz; i++) {
  77. 					//奇数
  78. 					let zarr = []
  79. 					if (l % 2) {
  80. 						if (i == init) {
  81. 							span_html = `<span class="id${i}">${span_text[sz]}</span>`
  82. 							console.log("span_html", span_html)
  83. 							zarr.push(span_html)
  84. 							// zarr.push({
  85. 							// 	htmlName:a[sz],
  86. 							// 	id:`id${i}`
  87. 							// })
  88. 							// `id${i}`
  89.  
  90. 						} else {
  91. 							span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
  92. 							zarr.push(span_html)
  93. 							span_html = `<span class="id${i}">${span_text[sz+i]}</span>`
  94. 							zarr.push(span_html)
  95. 							// $(".htmlspan").html(span_html)
  96. 							// $(".htmlspan").html(span_html1)
  97. 							// zarr.push({
  98. 							// 	htmlName:[sz-i],
  99. 							// 	id:`id${i}`
  100. 							// })
  101. 							// zarr.push({
  102. 							// 	htmlName:a[sz+i],
  103. 							// 	id:`id${i}`
  104. 							// })
  105. 						}
  106. 					} else {
  107. 						if (i == init) {
  108. 							// zarr.push({
  109. 							// 	htmlName:a[(sz-i)],
  110. 							// 	id:`id${i-1}`
  111. 							// })
  112. 							// zarr.push({
  113. 							// 	htmlName:a[(sz)],
  114. 							// 	id:`id${i-1}`
  115. 							// })
  116. 							span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
  117. 							zarr.push(span_html)
  118. 							span_html = `<span class="id${i}">${span_text[sz]}</span>`
  119. 							zarr.push(span_html)
  120. 						} else {
  121. 							// zarr.push({
  122. 							// 	htmlName:a[(sz-i)],
  123. 							// 	id:`id${i-1}`
  124. 							// })
  125. 							// zarr.push({
  126. 							// 	htmlName:a[(sz+i-1)],
  127. 							// 	id:`id${i-1}`
  128. 							// })
  129. 							span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
  130. 							zarr.push(span_html)
  131. 							span_html = `<span class="id${i}">${span_text[sz+i-1]}</span>`
  132. 							zarr.push(span_html)
  133. 						}
  134. 					}
  135. 					arr.push(zarr)
  136.  
  137. 					// arr.push(zarr)
  138. 				}
  139. 				console.log("arr", arr)
  140. 				var newArr = []
  141. 				for (let index = 0; index < arr.length; index++) {
  142. 					if (index == 0) {
  143. 						newArr.push(arr[index][0])
  144. 					} else {
  145. 						newArr.unshift(arr[index][0])
  146. 						newArr.push(arr[index][1])
  147. 					}
  148. 				}
  149. 				console.log("newArr", newArr)
  150. 				// for (let j = 0; j < newArr.length; j++) {
  151. 				// 	span_html += newArr[j]
  152. 				// 	console.log("span_html",span_html)
  153. 				// }
  154. 				span_html = newArr.join('')
  155. 				$(".htmlspan").html(span_html)
  156. 				setTimeout(() => {
  157. 					for (let i = 0; i <= sz; i++) {
  158. 						console.log("i", i)
  159. 						setTimeout(() => {
  160. 							let a = document.querySelectorAll(`.id${i}`)
  161. 							console.log(a)
  162. 							if (i == 0) {
  163. 								a[0].style.transform = "translateY(-150px)"
  164. 								a[0].style.transition = "all 1s"
  165. 							} else {
  166. 								a[0].style.transform = "translateY(-150px)"
  167. 								a[0].style.transition = "all 1s"
  168. 								a[1].style.transform = "translateY(-150px)"
  169. 								a[1].style.transition = "all 1s"
  170. 							}
  171.  
  172. 						}, 50 * i)
  173. 					}
  174. 				}, 100)
  175. 			}
  176. 			$(".menu >li").hover(function() {
  177. 				var span_text = "abcdepoijhtydqq"
  178. 				let l = span_text.length
  179. 				let sz = 0
  180. 				let init = 0
  181. 				sz = Math.floor(l / 2) //商
  182. 				for (let i = 0; i <= sz; i++) {
  183. 					console.log("i", i)
  184. 					setTimeout(() => {
  185. 						let a = document.querySelectorAll(`.id${i}`)
  186. 						console.log(a)
  187. 						if (i == 0) {
  188. 							a[0].style.transform = "translateY(-300px)"
  189. 							a[0].style.transition = "all 1s"
  190. 						} else {
  191. 							a[0].style.transform = "translateY(-300px)"
  192. 							a[0].style.transition = "all 1s"
  193. 							a[1].style.transform = "translateY(-300px)"
  194. 							a[1].style.transition = "all 1s"
  195. 						}
  196.  
  197. 					}, 50 * i)
  198. 				}
  199. 			}, function() {
  200. 				var span_text = "abcdepoijhtydqq"
  201. 				let l = span_text.length
  202. 				let sz = 0
  203. 				let init = 0
  204. 				sz = Math.floor(l / 2) //商
  205. 				for (let i = 0; i <= sz; i++) {
  206. 					console.log("i", i)
  207. 					setTimeout(() => {
  208. 						let a = document.querySelectorAll(`.id${i}`)
  209. 						console.log(a)
  210. 						if (i == 0) {
  211. 							a[0].style.transform = "translateY(-150px)"
  212. 							a[0].style.transition = "all 1s"
  213. 						} else {
  214. 							a[0].style.transform = "translateY(-150px)"
  215. 							a[0].style.transition = "all 1s"
  216. 							a[1].style.transform = "translateY(-150px)"
  217. 							a[1].style.transition = "all 1s"
  218. 						}
  219.  
  220. 					}, 50 * i)
  221. 				}
  222. 			})
  223.  
  224.  
  225. 			// $(".menu >li").mouseleave(function(){
  226. 			// 	var span_text = "abcdepoijhtydqq"
  227. 			// 	let l = span_text.length
  228. 			// 	let sz = 0
  229. 			// 	let init = 0
  230. 			// 	sz = Math.floor(l/2) //商
  231. 			// 	for (let i = 0; i <= sz; i++) {
  232. 			// 				console.log("i",i)
  233. 			// 				setTimeout(()=>{
  234. 			// 					let a = document.querySelectorAll(`.id${i}`)
  235. 			// 					console.log(a)
  236. 			// 					if(i == 0){
  237. 			// 						a[0].style.transform = "translateY(-300px)"
  238. 			// 						a[0].style.transition = "all 1s"
  239. 			// 					}else{
  240. 			// 						a[0].style.transform = "translateY(-300px)"
  241. 			// 						a[0].style.transition = "all 1s"
  242. 			// 						a[1].style.transform = "translateY(-300px)"
  243. 			// 						a[1].style.transition = "all 1s"
  244. 			// 					}
  245.  
  246. 			// 				},50*i)
  247. 			// 			}
  248. 			// })
  249. 		</script>
  250. 	</body>
  251. </html>
  1. body,//myStyle 文件夹
  2. div,
  3. dl,
  4. dt,
  5. ul,
  6. li,
  7. h1,
  8. h2,
  9. h3,
  10. h4,
  11. h5,
  12. h6,
  13. pre,
  14. form,
  15. fieldset,
  16. legend,
  17. input,
  18. textarea,
  19. button,
  20. p,
  21. blockquote,
  22. th,
  23. td {
  24. 	margin: 0;
  25. 	padding: 0;
  26. }
  27.  
  28. * {
  29. 	margin: 0;
  30. 	padding: 0;
  31. }
  32.  
  33. li {
  34. 	list-style-type: none;
  35. }
  36.  
  37. a {
  38. 	text-decoration: none;
  39. }
  40.  
  41. /*                            图片居中显示 */
  42. img,
  43. input,
  44. button {
  45. 	border: none;
  46. 	vertical-align: middle;
  47. }
  48.  
  49. /* 单行省略 */
  50. .row {
  51. 	overflow: hidden;
  52. 	text-overflow: ellipsis;
  53. 	white-space: nowrap;
  54.  
  55. }
  56.  
  57. /* 2行省略 */
  58. .row2 {
  59. 	display: -webkit-box;
  60. 	overflow: hidden;
  61. 	text-overflow: ellipsis;
  62. 	word-wrap: break-word;
  63. 	white-space: normal !important;
  64. 	-webkit-line-clamp: 2;
  65. 	-webkit-box-orient: vertical;
  66. }
  67.  
  68. /* 3行省略 */
  69. .row3 {
  70. 	display: -webkit-box;
  71. 	overflow: hidden;
  72. 	text-overflow: ellipsis;
  73. 	word-wrap: break-word;
  74. 	white-space: normal !important;
  75. 	-webkit-line-clamp: 3;
  76. 	-webkit-box-orient: vertical;
  77. }
  78.  
  79. /* 4行省略 */
  80. .row4 {
  81. 	display: -webkit-box;
  82. 	overflow: hidden;
  83. 	text-overflow: ellipsis;
  84. 	word-wrap: break-word;
  85. 	white-space: normal !important;
  86. 	-webkit-line-clamp: 4;
  87. 	-webkit-box-orient: vertical;
  88. }
  89.  
  90. /* 3行省略 */
  91. .row5 {
  92. 	display: -webkit-box;
  93. 	overflow: hidden;
  94. 	text-overflow: ellipsis;
  95. 	word-wrap: break-word;
  96. 	white-space: normal !important;
  97. 	-webkit-line-clamp: 5;
  98. 	-webkit-box-orient: vertical;
  99. }
  100.  
  101. /* 3行省略 */
  102. .row6 {
  103. 	display: -webkit-box;
  104. 	overflow: hidden;
  105. 	text-overflow: ellipsis;
  106. 	word-wrap: break-word;
  107. 	white-space: normal !important;
  108. 	-webkit-line-clamp: 6;
  109. 	-webkit-box-orient: vertical;
  110. }
  111.  
  112. /* 7行省略 */
  113. .row7 {
  114. 	display: -webkit-box;
  115. 	overflow: hidden;
  116. 	text-overflow: ellipsis;
  117. 	word-wrap: break-word;
  118. 	white-space: normal !important;
  119. 	-webkit-line-clamp: 7;
  120. 	-webkit-box-orient: vertical;
  121. }
  122.  
  123. .font15 {
  124. 	font-size: 0.9375rem !important;
  125. }
  126.  
  127. .font18 {
  128. 	font-size: 1.125rem !important;
  129. }
  130.  
  131. .font20 {
  132. 	font-size: 1.25rem !important;
  133. }
  134.  
  135. .font25 {
  136. 	font-size: 1.5625rem !important;
  137. }
  138.  
  139. /* 转大写 */
  140. .tupCass {
  141. 	text-transform: uppercase;
  142. }
  143.  
  144.  
  145.  
  146.  
  147. .min1200 {
  148. 	min-width: 1200px;
  149. }
  150.  
  151. details {
  152. 	width: 25px !important;
  153. 	height: 20px !important;
  154. 	margin-right: 20px;
  155. }
  156.  
  157. details summary {
  158. 	position: relative;
  159. 	cursor: pointer;
  160. 	list-style: none;
  161. 	width: 100%;
  162. 	height: 100%;
  163. }
  164.  
  165. summary span {
  166. 	display: block;
  167. 	width: 100%;
  168. 	height: 5px;
  169. 	background-color: #FFFFFF;
  170. 	transition: 0.3s;
  171. 	position: absolute;
  172. }
  173.  
  174. summary span:first-child {
  175. 	top: 0;
  176. }
  177.  
  178. summary span:nth-child(2) {
  179. 	top: calc(50% - 2.5px);
  180. }
  181.  
  182. summary span:last-child {
  183. 	bottom: 0;
  184. }
  185.  
  186. details[open] span:nth-child(2) {
  187. 	display: none;
  188. }
  189.  
  190. details[open] span:first-child {
  191. 	top: calc(50% - 2.5px);
  192. 	transform: rotate(-45deg);
  193. 	transform-origin: center;
  194. }
  195.  
  196. details[open] span:last-child {
  197. 	bottom: calc(50% - 2.5px);
  198. 	transform: rotate(45deg);
  199. 	transform-origin: center;
  200. }
  201.  
  202. header {
  203. 	position: relative;
  204. }
  205.  
  206. datalist[open]+nav {
  207.  
  208. 	overflow: auto;
  209. }
  210.  
  211.  
  212.  
  213.  
  214. body,html{
  215. 	width: 100vw;
  216. 	height: 100vh;
  217. 	background-color: #272822;
  218. }
  219. .sidbar{
  220. 	width: 100%;
  221. 	height: 100%;
  222. 	background: #ffc324;
  223. 	position: fixed;
  224. 	top: 0;
  225. 	display: flex;
  226. 	justify-content: center;
  227. 	padding-top: 100px;
  228. 	transition: all .5s;
  229. 	left: 100%;
  230. 	/* left: 0; */
  231. }
  232. .sidbar-avtive{
  233. 	left: 0;
  234. }
  235. .open{
  236. 	position: fixed;
  237. 	right: 15px;
  238. 	top: 15px;
  239. }
  240. .active{
  241. 	color: #007AFF;
  242. }
  243. .menu li{
  244. 	/* width: 500px; */
  245. 	height: 100px;
  246. 	overflow: hidden;
  247. 	border: 1px solid #000000;
  248. 	position: relative;
  249.  
  250. 	color: #000000;
  251. 	display: flex;
  252. 	font-weight: bold;
  253. 	font-size: 7.25rem;
  254. 	align-items: center;
  255. 	justify-content: center;
  256. 	border-radius: 5px;
  257. 	/* margin-bottom: 8px; */
  258. 	transition: all .3s;
  259. 	line-height: 80px;
  260. }
  261. .menu li span{
  262. 	
  263. 	margin-top: 300px;
  264. 	
  265. 	/* transform: translateY(-150px); */
  266. }
  267.  
  268.  
  269. .curts{
  270. 	background-color: #FFFFFF;
  271. 	color: #000000;
  272. 	
  273. 	cursor: pointer;
  274. }
  275. /* .menu >.curts,
  276. .menu >li:hover{
  277. 	color: #FFFFFF;
  278. 	font-size: 6.875rem;
  279. 	cursor: pointer;
  280. } */

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/548497?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号