Css3示例

最新推荐文章于 2024-09-30 08:51:48 发布

浪漫の收藏家

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量72

点赞数

分类专栏： css 文章标签： css3 css html javascript

本文链接：https://blog.csdn.net/m0_73287366/article/details/129814803

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

编译器VScode

1.旋转木马

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 3d视角的值越小-远小近大效果越明显 */
            perspective: 1000px;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            /* 3d视角 */
            transform-style: preserve-3d;
            /* 沿着x轴旋转-10度 */
            transform: rotateX(-10deg);
            /* 调用dh1动画 10s完成 线性过度 无限循环 */
            animation: dh1 10s linear infinite;
        }
        @keyframes dh1{
            0%{
                /*         x轴旋转-10度    y轴旋转0度     缩放倍数 */
                transform: rotateX(-10deg) rotateY(0deg) scale(1);
            }
            50%{
                transform: rotateX(10deg) rotateY(180deg) scale(0.5);
            }
            0%{
                transform: rotateX(-10deg) rotateY(360deg) scale(1);
            }
        }
        .box > div{
            width: 100px;
            height: 100px;
            background-image: url(img/bb.jpg);
            /* 图片与div大小相同 */
            background-size: 100%;
            left: 200px;
            top: 200px;
            position: absolute;
            /*         先旋转后位移                   沿着z轴移动400px */
            transform: rotateY(calc(var(--i)*18deg)) translateZ(400px);
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- div[style="--i:$"]*20 -->
        <div style="--i:1"></div>
        <div style="--i:2"></div>
        <div style="--i:3"></div>
        <div style="--i:4"></div>
        <div style="--i:5"></div>
        <div style="--i:6"></div>
        <div style="--i:7"></div>
        <div style="--i:8"></div>
        <div style="--i:9"></div>
        <div style="--i:10"></div>
        <div style="--i:11"></div>
        <div style="--i:12"></div>
        <div style="--i:13"></div>
        <div style="--i:14"></div>
        <div style="--i:15"></div>
        <div style="--i:16"></div>
        <div style="--i:17"></div>
        <div style="--i:18"></div>
        <div style="--i:19"></div>
        <div style="--i:20"></div>
    </div>
</body>
</html>

2.立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       body{
         /* 3d视角的值越小-远小近大效果越明显 */
        perspective: 800px;
       }
       .box{
        width: 300px;
        height: 300px;
        margin: 200px auto;
        position: relative;
        /* 外部大盒子设置3d视角 */
        transform-style: preserve-3d;
        /* 沿着x轴旋转-30度 */
        transform: rotateX(-30deg);
        animation: dh1 3s linear infinite;
       }
       @keyframes dh1{
        0%{
            transform: rotateX(-30deg) rotateY(0deg);
        }
        100%{
            transform: rotateX(-30deg) rotateY(360deg);
        }
       }
       .box > div{
        width: 200px;
        height: 200px;
        background-image: url(img/bb.jpg);
        background-size: 100%;
        position: absolute;
        left: 50px;
        top: 50px;
       /* 透明度 越小越透明 */
        opacity: 0.8;
       }
       #qian{
        /* 沿着z轴移动100px */
        transform: translateZ(100px);
       }
       #hou{
        transform: translateZ(-100px) rotateY(180deg);
       }
       #left{
        /* 沿着y轴旋转 */
        transform: rotateY(-90deg) translateZ(100px);
       }
       #right{
        transform: rotateY(90deg) translateZ(100px);
       }
       #top{
        transform: rotateX(90deg) translateZ(100px);
       }
       #bottom{
        transform: rotateX(-90deg) translateZ(100px);
       }
    </style>
</head>
<body>
    <div class="box">
        <div id="qian"></div>
        <div id="hou"></div>
        <div id="left"></div>
        <div id="right"></div>
        <div id="top"></div>
        <div id="bottom"></div>
    </div>
</body>
</html>

3.时钟(Css动画)实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 500px;
            height: 500px;
            border: 30px solid aqua;
            border-radius: 50%;
            position: relative;
            margin: 100px auto;
        }
        .inter{
            width: 510px;
            height: 510px;
            border: 10px solid green;
            border-radius: 50%;
            position: absolute;
            /* 绝对居中 */
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .mark{
            width: 14px;
            height: 30px;
            position: absolute;
            background: black;
            left: 50%;
            top: 10px;
            /*         x轴居中          每次沿着z轴旋转30度 */
            transform: translateX(-50%) rotateZ(calc(var(--i)*30deg));
            /* 旋转轴心        x轴 y轴 */
            transform-origin: 7px 245px;
        }
        .number{
            width: 30px;
            height: 30px;
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 30px;
            left: 50%;
            top: 50px;
            transform: translateX(-50%) rotateZ(calc(var(--i)*30deg));
            /* 旋转轴心 */
             /* 510 / 2 - top */
            transform-origin: 15px 205px;
        }
        .number > span{
            /* 转为块级标签 */
            display: block;
            transform: rotateZ(calc(var(--i)*-30deg));
        }
        .line{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            border-radius: 50% 50% 0 0;
            transform-origin: center bottom;
        }
        .hour{
            width: 12px;
            height: 130px;
            background: black;
            /* 转一圈12*60*60 */
            animation: hou 43200s linear infinite;
        }
       
        .minute{
            width: 8px;
            height: 160px;
            background: teal;
            /* 转一圈60*60 */
            animation: hou 3600s linear infinite;
        }
        /* 分针和时针的动画 */
        @keyframes hou{
            0%{
                transform: translate(-50%,-100%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-100%) rotateZ(360deg);
            }
        }
        .second{
            width: 4px;
            height: 240px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-200px);
            border-radius: 50% 50% 0 0;
            transform-origin: 2px 200px;
            /*                 分60次完成 */
            animation: sec 60s steps(60) infinite;
        }
        /* 秒针的动画 */
        @keyframes sec{
            0%{
                transform: translate(-50%,-200px) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-200px) rotateZ(360deg);
            }
        }
        .center{
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .black{
            width: 40px;
            height: 40px;
            background: black;
        }
        .green{
            width: 20px;
            height: 20px;
            background: greenyellow;
        }
    </style>
</head>
<body>
    <!-- 外圈 -->
    <div class="outer">
        <div class="inter">
            <!-- 小黑块 -->
            <!-- div.mark[style="--i:$"]*12 -->
            <div class="mark" style="--i:1"></div>
            <div class="mark" style="--i:2"></div>
            <div class="mark" style="--i:3"></div>
            <div class="mark" style="--i:4"></div>
            <div class="mark" style="--i:5"></div>
            <div class="mark" style="--i:6"></div>
            <div class="mark" style="--i:7"></div>
            <div class="mark" style="--i:8"></div>
            <div class="mark" style="--i:9"></div>
            <div class="mark" style="--i:10"></div>
            <div class="mark" style="--i:11"></div>
            <div class="mark" style="--i:12"></div>
            <!-- 数字 -->
            <div class="number" style="--i:1"><span style="--i:1">1</span></div>
            <div class="number" style="--i:2"><span style="--i:2">2</span></div>
            <div class="number" style="--i:3"><span style="--i:3">3</span></div>
            <div class="number" style="--i:4"><span style="--i:4">4</span></div>
            <div class="number" style="--i:5"><span style="--i:5">5</span></div>
            <div class="number" style="--i:6"><span style="--i:6">6</span></div>
            <div class="number" style="--i:7"><span style="--i:7">7</span></div>
            <div class="number" style="--i:8"><span style="--i:8">8</span></div>
            <div class="number" style="--i:9"><span style="--i:9">9</span></div>
            <div class="number" style="--i:10"><span style="--i:10">10</span></div>
            <div class="number" style="--i:11"><span style="--i:11">11</span></div>
            <div class="number" style="--i:12"><span style="--i:12">12</span></div>
            <!-- 时针、分针、秒针 -->
            <div class="line hour"></div>
            <div class="line minute"></div>
            <div class="second"></div>
            <!-- 中心圆 -->
            <div class="center black"></div>
            <div class="center green"></div>
        </div>
    </div>
</body>
</html>

4.时钟(Js实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 500px;
            height: 500px;
            border: 30px solid aqua;
            border-radius: 50%;
            position: relative;
            margin: 100px auto;
        }
        .inter{
            width: 510px;
            height: 510px;
            border: 10px solid green;
            border-radius: 50%;
            position: absolute;
            /* 绝对居中 */
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .mark{
            width: 6px;
            height: 30px;
            position: absolute;
            background: black;
            left: 50%;
            top: 10px;
            
            /* 旋转轴心        x轴 y轴 */
            transform-origin: 50% 245px;
        }
		.mark-bold{
			width: 14px;
		}
        .number{
            width: 30px;
            height: 30px;
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 30px;
            left: 50%;
            top: 50px;
           
            /* 旋转轴心 */
             /* 510 / 2 - top */
            transform-origin: 15px 205px;
        }
        .number > span{
            /* 转为块级标签 */
            display: block;
            
        }
        .line{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            border-radius: 50% 50% 0 0;
            transform-origin: center bottom;
        }
        .hour{
            width: 12px;
            height: 130px;
            background: black;
            
        }
       
        .minute{
            width: 8px;
            height: 160px;
            background: teal;
            
        }
        
        .second{
            width: 4px;
            height: 240px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-200px);
            border-radius: 50% 50% 0 0;
            transform-origin: 2px 200px;
            
        }
        
        .center{
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .black{
            width: 40px;
            height: 40px;
            background: black;
        }
        .green{
            width: 20px;
            height: 20px;
            background: greenyellow;
        }
    </style>
</head>
<body>
    <!-- 外圈 -->
    <div class="outer">
        <div class="inter">
            <!-- 小黑块 通过JS生成 -->
            
            <!-- 数字 通过JS生成 -->
            
            <!-- 时针、分针、秒针 -->
            <div class="line hour"></div>
            <div class="line minute"></div>
            <div class="second"></div>
            <!-- 中心圆 -->
            <div class="center black"></div>
            <div class="center green"></div>
        </div>
    </div>
	<script>
		//1.生成标签
		//获取父标签
		var inter=document.querySelector(".inter")
		//通过for循环在父标签中生成60个小黑块
		for(var i=0;i<60;i++){
			//通过循环创建60个div
			var div=document.createElement("div")
			//设置div的class属性值为mark
			div.className="mark"
			//每隔5次生成一个粗标签
			if(i%5==0){
				div.className="mark mark-bold"
			}
			//将每个div都添加到父标签中
			inter.appendChild(div)
			//每个div之间的角度差是6度  360/60
			div.style.transform=`translateX(-50%) rotateZ(${i*6}deg)`
		}
		//通过for循环在父标签中生成12个数字
		for(var i=1;i<13;i++){
			var divDom=document.createElement("div")//<div></div>
			//<div class="number"></div>
		    divDom.className="number"
			//<div class="number"><span></span></div>
			var span=document.createElement("span")
			span.innerHTML=i
			divDom.appendChild(span)
			inter.appendChild(divDom)
			//每个div之间的角度差是30度  360/12
			divDom.style.transform=`translateX(-50%) rotateZ(${i*30}deg)`
			//调正数字 反方向旋转30度
			span.style.transform=`rotateZ(${i*-30}deg)`
		}
		//2.完成时钟动画效果，并且要和当前时间进行同步
        //获取时针、分针、秒针
		var hour=document.querySelector(".hour")
		var minute=document.querySelector(".minute")
		var second=document.querySelector(".second")
		function timer(){
			//创建一个日期对象
			var now=new Date()
			//获取小时、分钟、秒数
			var h=now.getHours()%12 //小时数对12取余
			var m=now.getMinutes()
			var s=now.getSeconds()
			//计算每个针的旋转角度
            //秒针的旋转角度=s*6
			second.style.transform=`translate(-50%,-200px) rotateZ(${s*6}deg)`
			//分针的旋转角度=m*6
			minute.style.transform=`translate(-50%,-100%) rotateZ(${m*6}deg)`
			//小时的旋转角度=hour*30+minute*0.5  360/12 分针走60次 时针旋转30度 一分钟旋转0.5（60/30）度
			hour.style.transform=`translate(-50%,-100%) rotateZ(${h*30+(m*0.5)}deg)`
		}
		timer()
		//设置一个定时器，每隔一秒和当前时间同步一次，重新设置三个指针的旋转角度
		setInterval(timer,1000)
// 		setInterval(function(){
// 			var now=new Date()
// 			var h=now.getHours()
// 			var m=now.getMinutes()
// 			var s=now.getSeconds()
// 			second.style.transform=`translate(-50%,-200px) rotateZ(${s*6}deg)`
// 			minute.style.transform=`translate(-50%,-100%) rotateZ(${m*6}deg)`
// 			hour.style.transform=`translate(-50%,-100%) rotateZ(${h*30+(m*0.5)}deg)`
// 		},1000)
	</script>
</body>
</html>