每天一個jquery外掛-css實現電風扇2

css實現電風扇2

辣眼睛警告，極度敷衍ing

實現效果
在這裡插入圖片描述

程式碼部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css控制動畫</title>
		<style>
			#div {
				border: 1px solid lightgray;
				width: 95%; 

				height: 300px;
				margin: 20px auto;
				position: relative;
			}
			#r1:checked~#fs{
				animation:xz 1s linear infinite;
			}
			#r2:checked~#fs{
				animation:xz 0.5s linear infinite;
			}
			#r3:checked~#fs{
				animation:xz 0.25s linear infinite;
			}
			#tz:checked~fs{
				animation: none;
			} 

			.an{
				opacity: 0;
			}
			.lb{
				display: flex;
				border: 1px solid gray;
				width: 30px;
				height: 30px;
				border-radius:50%;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				z-index: 7;
				position: absolute;
			}
			.an:checked+.lb{
				background-color: 
 lightgray;
			}
			@keyframes xz{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			/* 開始繪製與移動每個部件 */
			#fs{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 5;
			}
			.lb0{
				top: 260px;
				left: 50px;
			}
			.lb1{
				top: 260px;
				left: 90px;
			}
			.lb2{
				top: 260px;
				left: 130px;
			}
			.lb3{
				top: 260px;
				left: 170px;
			}
			#fskz{
				border: 3px solid black;
				width: 190px;
				height: 190px;
				border-radius:50%;
				position: absolute;
				left: 30px;
				top: 30px;
				z-index: 5;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#gz{
				background-color: lightgray;
				width: 50px;
				height: 50px;
				z-index: 9;
				position: absolute;
				border-radius: 50%;
			}
			#gj1{
				width:100%;
				height:10px;
				z-index: 2;
				background-color: lightgray;
				position: absolute;
			}
			#gj2{
				width:100%;
				height:10px;
				z-index: 2;
				background-color: lightgray;
				transform: rotate(120deg);
				position: absolute;
			}
			#gj3{
				width:100%;
				height:10px;
				z-index: 2;
				background-color: lightgray;
				transform: rotate(240deg);
				position: absolute;
			}
			#dz{
				background-color:lightblue;
				width: 260px;
				height: 50px;
				border-radius: 50%;
				position: absolute;
				bottom: 0;
				z-index: 0;
			}
			#zz{
				background-color: lightblue;
				width: 40px;
				height: 160px;
				position: absolute;
				bottom: 0;
				left:110px;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<input type="radio" class="an" id="tz" name="fs" /><label for="tz" class="lb lb0">停止</label>
			<input type="radio" class="an" id="r1" name="fs" /><label for="r1" class="lb lb1">1</label>
			<input type="radio" class="an" id="r2" name="fs" /><label for="r2" class="lb lb2">2</label>
			<input type="radio" class="an" id="r3" name="fs" /><label for="r3" class="lb lb3">3</label>
			<img src="img/風扇.png" id="fs" />
			<div id="fskz">			
				<div id="gz"></div>
				<div id="gj1"></div>
				<div id="gj2"></div>
				<div id="gj3"></div>
			</div>
			<div id="dz"></div>
			<div id="zz"></div>
		</div>
	</body>
</html>

聽我bb

額，感覺我知道的東西好少，之前總是抱著一種我有想法願意去實踐的思想，所以忽視了基礎的學習，像搞這個的時候讓我難受的一匹，因為很多東西並不是你想翻它牌子了就能讓它按照你的意願去行動，無非就是積累的差異了。
這個的技術點就是關注倆個點，第一網上很多說純css實現諸如radio checkbox美化樣式的部落格，我一直以為可以css直接給完成，所以今天折騰半袖發現系統預設的控制元件是沒辦法改的，最多給藏起來，用for來讓其他的空間繼承它的屬性，然後把繼承者的外觀和樣式以及偽類屬性進行修改才能達到諸如此類的效果，我是今天百度才知道for的作用，之前遇見過但是沒有深究，啊QAQ，所以說基礎真的很重要，第二就是在用樣式控制得時候我的補充一下我昨天的發現，其實這些都是歸於一個css選擇器的範疇，並沒有辦法直接達到我描述的效果，就是沒辦法直接不相干的元素互相控制(如果大佬知道咋操作麻煩教教我，我立馬三連上車qwq)
嗯，這個是我搜到的講css選擇器的地址可以去看看

每天學一個jquery外掛-css實現電風扇2

每天一個jquery外掛-css實現電風扇2

css實現電風扇2

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

每天學一個jquery拆件-圖片的預覽

使用Jquery外掛bTabs實現多頁籤開啟效果

jquery結合css實現返回頂部功能

jquery css實現流程進度條

JQuery外掛tablesorter表格排序實現過程解析

每天學一個jquery外掛-css實現電風扇2

每天一個jquery外掛-css實現電風扇2

css實現電風扇2

相關推薦