HTML-CSS（六十六）CSS于JS结合

最新推荐文章于 2023-05-20 16:21:52 发布

每天进步一大步

最新推荐文章于 2023-05-20 16:21:52 发布

阅读量176

点赞数

分类专栏： css3 HTML CSS

本文链接：https://blog.csdn.net/weixin_44730244/article/details/116779356

版权

HTML 同时被 3 个专栏收录

67 篇文章 2 订阅

订阅专栏

CSS

65 篇文章 3 订阅

订阅专栏

css3

30 篇文章 1 订阅

订阅专栏

CSS配合javascript可以发挥更大的威力，实现一些更加复杂的交互效果。

案例：时钟
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				
			}
			li{
				width: 5px;
				height: 20px;
				background-color: black;
				margin: 0 auto;
				position: absolute;
				left: 50%;
				transform-origin: 0px 200px;
				transform: translateX(-50%);
			}
			#item{
				width: 400px;
				height: 400px;
				border: 1px solid #000000;
				margin: 200px auto;
				position: relative;
				border-radius: 200px;
			}
			.active{
				height: 30px;
				
			}
			
			.ball{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 10px;
				height: 10px;
				background-color: red;
				border-radius: 5px;
			}
			.hour,.minute,.second{
				position: absolute;
				left: 50%;
				top: 50%;
				
				transform-origin:bottom center ;
				
			}
			.hour{
				width: 10px;
				height: 40px;
				background-color: gold;
			}
			.minute{
				width: 8px;
				height: 60px;
				background-color: green;
			}
			.second{
				width: 6px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="item">
			<ul></ul>
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="ball"></div>
		</div>
		<script type="text/javascript">
			var angle=0
			var oul=document.getElementsByTagName('ul')[0];
			var oH=document.getElementsByClassName('hour')[0];
			var oM=document.getElementsByClassName('minute')[0];
			var oS=document.getElementsByClassName('second')[0];
			let timer=new Date()
			// 初始时针、分针、秒针的位置
			oH.style.transform=' translate(-50%,-100%) rotate('+(30*timer.getHours()+timer.getMinutes()/2)+'deg)'
			oM.style.transform='translate(-50%,-100%) rotate('+6*timer.getMinutes() +'deg)'
			oS.style.transform='translate(-50%,-100%) rotate('+6*timer.getHours() +'deg)'
			
			// 表盘布局
			for(let i=0;i<12;i++){ /* 分为12个小时 */
				for(let j=0;j<5;j++){  /* 每次生成5个li*/
					if(j==0){
						// 首个li加个类，给它独立设置样式  使用反引号包裹
						oul.innerHTML+=`<li class='active' style='transform:rotate(${angle}deg)'></li>`
					}
					else{
						oul.innerHTML+=`<li style='transform:rotate(${angle}deg)'></li>`
					}
					angle+=6
				}
			}
			// 时钟转动
			// 利用定时器每隔一秒，秒针、分针、时针都会进行重新运算。秒针转动6度，分针会根据现在的分钟进行运算，时针也是
			setInterval(function(){
				let timer=new Date()
				oH.style.transform=' translate(-50%,-100%) rotate('+(30*timer.getHours()+timer.getMinutes()/2) +'deg)'
				oM.style.transform='translate(-50%,-100%) rotate('+6*timer.getMinutes() +'deg)'
				oS.style.transform='translate(-50%,-100%) rotate('+6*timer.getSeconds() +'deg)'
			},1000)
		</script>
	</body>
</html>

案例：折叠菜单
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#menu{
				margin: 0 auto;
				width: 300px;
				height: 300px;
				border: 1px solid black;
				/* display: none; */
				display: block;
				transition:3s all ease ;
				perspective: 400px;
			}
			#btn{
				margin: 0 auto;
				width: 100px;
				height: 50px;
				background-image: linear-gradient(to right,yellow,pink);
				border:0 ;
				border-radius: 5px;
				display: block;
				font: italic bold 20px "楷体";
				
			}
			#list{
				width: 200px;
				height: 50px;
				
				margin: 50px auto 10px;
				transform-style: preserve-3d;
				transform: rotateY(-30deg) ;
				color: white;
				font-size: 30px;
				text-align: center;
				line-height: 50px;
				
			}
			#list div{
				width:100%;
				height: 100%;
				text-align: center;
				line-height: 50px;
				background-color: #008000;
				transform-style: preserve-3d;
				transform: rotateX(180deg);
				transform-origin: top center;
				transition: 2.5s all ease;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">展开</button>
		<div id="menu">
			<div id="list">
				
				<div>
					菜单栏
					<div>
						菜单栏
						<div>
							菜单栏
							<div>
								菜单栏
							</div>
						</div>
					</div>
				</div>
				
			</div>
			
		</div>
		<script type="text/javascript">
			var obt=document.querySelector('#btn')
			var omnu=document.querySelector('#menu')
			var adiv=document.getElementById('list').getElementsByTagName('div')
			console.log(adiv)
			
			var show=false
			obt.onclick=function(){
				show=!show
				if(show)
				{
					obt.innerText='收起'
					for(let i=0;i<4;i++){
						/* 利用每一个元素执行时间延迟，产生连续效果 */
						adiv[i].style.transitionDelay=i*0.5+'s'
						adiv[i].style.transform='rotateX(0deg)'
						
					}
				}
				else{
					obt.innerText='展开'
					for(let i=0;i<4;i++){
						// 应该从最后一个收起，所以最后一个延迟时间最短
						adiv[i].style.transitionDelay=(3-i)*0.5+'s'
						adiv[i].style.transform='rotateX(180deg)'
						
					}
				}
			}
		</script>
	</body>
</html>

每天进步一大步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS（六十六）CSS于JS结合

CSS配合javascript可以发挥更大的威力，实现一些更加复杂的交互效果。案例：时钟<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: no
复制链接

扫一扫