transform
CSStransformThuộc tính cho phép ngươi xoay tròn, súc phóng, nghiêng hoặc bình di cấp định nguyên tố. Đây là thông qua sửa chữa CSS thị giác cách thức hóa mô hình toạ độ không gian tới thực hiện.
Thí dụ mẫu
Cảnh cáo:Chỉ có thể thay đổi từ hộp mô hình định vị nguyên tố. Căn cứ kinh nghiệm, nếu nguyên tố có
display: block,Tắc từ hộp mô hình định vị nguyên tố.
Ngữ pháp
/* vô biến hóa */
transform:none;
/* 2D Ma trận biến hóa */
transform:matrix(1,2,3,4,5,6);
/* duyên X trục bình di 12 độ phân giải, duyên Y trục bình di 50% */
transform:translate(12px,50%);
/* duyên X trục bình di 2em */
transform:translateX(2em);
/* duyên Y trục bình di 3in */
transform:translateY(3in);
/* nằm ngang súc phóng 2 lần, dọc súc phóng 0.5 lần */
transform:scale(2,0.5);
/* nằm ngang súc phóng 2 lần */
transform:scaleX(2);
/* dọc súc phóng 0.5 lần */
transform:scaleY(0.5);
/* xoay tròn 0.5 vòng ( 90 độ ) */
transform:rotate(0.5turn);
/* nằm ngang nghiêng thiết 30 độ, dọc nghiêng thiết 20 độ */
transform:skew(30deg,20deg);
/* nằm ngang nghiêng thiết 30 độ */
transform:skewX(30deg);
/* dọc nghiêng thiết 1.07 độ cung */
transform:skewY(1.07rad);
/* 3D Ma trận biến hóa */
transform:matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
/* 2D bình di */
transform:translate(12px,50%);/* ở X trục thượng bình di 12px, ở Y trục thượng bình chuyển qua 50% vị trí */
transform:translate(12px);/* ở X trục thượng bình di 12px */
transform:translateY(50%);/* ở Y trục thượng bình chuyển qua 50% vị trí */
transform:translateZ(2px);/* ở Z trục thượng bình di 2px */
/* 3D bình di */
transform:translate3d(12px,50%,3em);/* ở X trục thượng bình di 12px, ở Y trục thượng bình chuyển qua 50% vị trí, ở Z trục thượng bình di 3em */
/* 3D súc phóng */
transform:scale3d(2.5,1.2,0.3);/* ở X trục thượng phóng đại 2.5 lần, ở Y trục thượng phóng đại 1.2 lần, ở Z trục thượng phóng đại 0.3 lần */
transform:scaleZ(0.3);/* ở Z trục thượng súc phóng 0.3 lần */
/* 3D xoay tròn */
transform:rotate3d(1,2,3,10deg);/* ở không gian ba chiều trung xoay tròn, vòng X trục 1 cái đơn vị, vòng Y trục 2 cái đơn vị, vòng Z trục 3 cái đơn vị, tổng cộng xoay tròn 10 độ */
transform:rotateX(10deg);/* ở X trục thượng xoay tròn 10 độ */
transform:rotateY(10deg);/* ở Y trục thượng xoay tròn 10 độ */
transform:rotateZ(10deg);/* ở Z trục thượng xoay tròn 10 độ */
/* thấu thị hiệu quả */
transform:perspective(17px);/* thiết trí thấu thị coi cảnh thể khoảng cách, quyết định 3d thay đổi nguyên tố thị giác hiệu quả khoảng cách, nơi này thiết trí vì 17px */
/* nhiều thuộc tính tổ hợp */
transform:translateX(10px)rotate(10deg)translateY(5px);/* trước tiên ở X trục thượng bình di 10px, sau đó xoay tròn 10 độ, cuối cùng ở Y trục thượng bình di 5px */
/* kế thừa cùng cam chịu giá trị */
transform:inherit;/* kế thừa phụ nguyên tố transform thuộc tính */
transform:initial;/* đem transform thuộc tính thiết trí vì này mới bắt đầu giá trị */
transform:unset;/* đem transform thuộc tính thiết trí vì này cam chịu giá trị, nếu kế thừa tắc hủy bỏ kế thừa */
transform-style
CSSThuộc tínhtransform-styleThiết trí nguyên tố tử nguyên tố là ở vào 3D không gian trung vẫn là mặt bằng trung.
Thí dụ mẫu
Nếu lựa chọn mặt bằng, nguyên tố tử nguyên tố đem sẽ không có 3D che đậy quan hệ.
Bởi vì cái này thuộc tính sẽ không bị kế thừa, bởi vậy cần thiết vì nguyên tố sở hữu phi lá cây tử nguyên tố thiết trí nó.
Thiết trí nguyên tố tử nguyên tố ở vào nên nguyên tố mặt bằng trung.
Chỉ thị nguyên tố tử nguyên tố ứng ở vào 3D không gian trung.
transform-origin
transform-originCSS thuộc tính làm ngươi sửa đổi một cái nguyên tố biến hình nguyên điểm.
Thí dụ mẫu
transform-originThuộc tính có thể sử dụng một cái, hai cái hoặc ba cái giá trị tới chỉ định, trong đó mỗi cái giá trị đều tỏ vẻ một cái chếch đi lượng. Không có minh xác định nghĩa chếch đi đem trọng trí vì này đối ứngMới bắt đầu giá trị.
Nếu định nghĩa hai cái hoặc càng nhiều giá trị hơn nữa không có giá trị mấu chốt tự, hoặc là duy nhất sử dụng mấu chốt tự làcenter,Tắc cái thứ nhất giá trị tỏ vẻ trình độ chếch đi lượng, cái thứ hai giá trị tỏ vẻ vuông góc chếch đi lượng.
- Một cái giá trị:
- Cần thiết là
<length>,<percentage>,Hoặcleft,center,right,top,bottomMấu chốt tự trung một cái.
- Cần thiết là
- Hai cái giá trị:
- Trong đó một cái cần thiết là
<length>,<percentage>,Hoặcleft,center,rightMấu chốt tự trung một cái. - Một cái khác cần thiết là
<length>,<percentage>,Hoặctop,center,bottomMấu chốt tự trung một cái.
- Trong đó một cái cần thiết là
- Ba cái giá trị:
- Trước hai cái giá trị cùng chỉ có hai cái giá trị khi cách dùng tương đồng.
- Cái thứ ba giá trị cần thiết là
<length>.Nó trước sau đại biểu Z trục chếch đi lượng.
perspective
CSSThuộc tínhperspectiveChỉ định người quan sát cùng z=0 mặt bằng khoảng cách, sử có 3d vị trí biến hóa nguyên tố sinh ra thấu thị hiệu quả. z>0 3d nguyên tố so bình thường đại, mà z<0 khi tắc so bình thường tiểu, lớn nhỏ trình độ từ nên thuộc tính giá trị quyết định.
Thí dụ mẫu
3d nguyên tố ở người quan sát mặt sau bộ phận sẽ không vẽ ra tới, tức z trục tọa độ giá trị lớn hơnperspectiveThuộc tính giá trị bộ phận.
Cam chịu dưới tình huống,Biến mất điểmỞ vào nguyên tố trung tâm, nhưng là có thể thông qua thiết tríperspective-originThuộc tính tới thay đổi này vị trí.
Đương nên thuộc tính giá trị không vì0CùngnoneKhi, sẽ sáng tạo tânTrùng điệp trên dưới văn.Dưới tình huống như vậy, vật chứa nội nguyên tố trùng điệp quan hệ như là sử dụngposition: fixedGiống nhau.
/* mấu chốt tự giá trị */
perspective:none;/* không thiết trí thấu thị hiệu quả */
/* <length> giá trị */
perspective:20px;/* thiết trí thấu thị coi cảnh thể khoảng cách vì 20 độ phân giải */
perspective:3.5em;/* thiết trí thấu thị coi cảnh thể khoảng cách vì trước mặt tự thể lớn nhỏ 3.5 lần */
/* toàn cục giá trị */
perspective:inherit;/* kế thừa phụ nguyên tố perspective thuộc tính */
perspective:initial;/* đem perspective thuộc tính thiết trí vì này mới bắt đầu giá trị */
perspective:unset;/* đem perspective thuộc tính thiết trí vì này cam chịu giá trị, nếu kế thừa tắc hủy bỏ kế thừa */
Không có ứng dụng perspective hình thức khi cam chịu giá trị.
<length>Chỉ định người quan sát khoảng cách z=0 mặt bằng khoảng cách, vì nguyên tố và nội dung ứng dụng thấu thị biến hóa.Đương trị vì 0 hoặc giá trị âm khi, vô thấu thị biến hóa.
Trường hợp -1- hình lập phương
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.bg{
background-color:#e5e4fa;
}
.cube{
width:300px;
height:300px;
margin:200px auto;
/* border: 2px solid lightgreen; */
/* tương đối định vị */
position:relative;
/* sử tử nguyên tố giữ lại 3D không gian quan hệ */
transform-style:preserve-3d;
transform:rotateX(30deg)rotateY(60deg);
/* coi cự, bình thường giá trị 800px-1000px */
/* perspective: 800px; */
}
div{
width:300px;
height:300px;
position:relative;
top:0;
left:0;
transition:all 4s;
}
.front{
background-color:lightblue;
transform:translateZ(150px);
opacity:0.85;
}
.back{
background-color:lightgreen;
transform:translateZ(-150px)translateY(-300px);
opacity:0.85;
}
.right{
background-color:aquamarine;
transform:rotateY(90deg)translateY(-600px)translateZ(150px);
opacity:0.85;
}
.left{
background-color:mediumpurple;
transform:rotateY(90deg)translateY(-900px)translateZ(-150px);
opacity:0.85;
}
.top{
background-color:darkred;
transform:translateY(-1350px)rotateX(90deg);
opacity:0.85;
}
.bottom{
background-color:royalblue;
/* khống chế di chuyển vị trí cùng xoay tròn */
transform:translateY(-1350px)rotateX(90deg);
/* thiết trí trong suốt độ */
opacity:0.85;
}
.cube:hover{
transform:rotateX(300deg)rotateY(600deg);
}
</style>
</head>
<bodyclass="bg">
<divclass="cube">
<divclass="front">
<imgsrc="../static/avatar/0001.jpg"alt=""style="width:300px;height:300px;"/>
</div>
<divclass="back">
<imgsrc="../static/avatar/0002.jpg"alt=""style="width:300px;height:300px;"/>
</div>
<divclass="right">
<imgsrc="../static/avatar/0003.jpg"alt=""style="width:300px;height:300px;"/>
</div>
<divclass="left">
<imgsrc="../static/avatar/0004.jpg"alt=""style="width:300px;height:300px;"/>
</div>
<divclass="top">
<imgsrc="../static/avatar/0005.jpg"alt=""style="width:300px;height:300px;"/>
</div>
<divclass="bottom">
<imgsrc="../static/avatar/0006.jpg"alt=""style="width:300px;height:300px;"/>
</div>
</div>
</body>
</html>
Trường hợp -2- chong chóng
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Chong chóng</title>
<styletype="text/css">
.bg{
background-color:#e5e4fa;
}
.max{
width:100px;
height:300px;
/* border: 4px solid greenyellow; */
margin:200px auto;
transform-style:preserve-3d;
position:relative;
transform:rotateX(10deg)rotateY(60deg);
}
div{
width:100px;
height:300px;
transition:all 2s;
}
.windmill-1{
background-color:skyblue;
position:absolute;
top:0;
left:0;
}
.windmill-2{
background-color:yellowgreen;
position:absolute;
top:0;
left:0;
transform:rotateX(60deg);
}
.windmill-3{
background-color:darkorange;
position:absolute;
top:0;
left:0;
transform:rotateX(120deg);
}
.max:hover.windmill-1{
transform:rotateX(180deg);
}
.max:hover.windmill-2{
transform:rotateX(240deg);
}
.max:hover.windmill-3{
transform:rotateX(300deg);
}
</style>
</head>
<bodyclass="bg">
<divclass="max">
<divclass="windmill-1"></div>
<divclass="windmill-2"></div>
<divclass="windmill-3"></div>
</div>
</body>
</html>
Trường hợp -3- thực đơn hướng dẫn lan
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Thực đơn hướng dẫn lan</title>
<styletype="text/css">
.max{
width:100px;
height:40px;
transform-style:preserve-3d;
margin:100px auto;
transition:all 1s;
float:left;
/* transform: rotateX(30deg) rotateY(60deg); */
/* border: 0.09px solid greenyellow; */
}
.top-1{
position:absolute;
left:0;
top:0;
width:100px;
height:40px;
background-color:mediumpurple;
transform:translateZ(-20px);
/* transform: rotateZ(-25deg); */
}
.top-2{
position:absolute;
left:0;
top:0;
width:100px;
height:40px;
background-color:royalblue;
transform:translate3d(0,20px,0)rotateX(90deg);
}
.max:hover{
transform:rotateX(-90deg);
}
</style>
</head>
<body>
<divclass="max">
<divclass="top-1"></div>
<divclass="top-2"></div>
</div>
<divclass="max">
<divclass="top-1"></div>
<divclass="top-2"></div>
</div>
<divclass="max">
<divclass="top-1"></div>
<divclass="top-2"></div>
</div>
<divclass="max">
<divclass="top-1"></div>
<divclass="top-2"></div>
</div>
<divclass="max">
<divclass="top-1"></div>
<divclass="top-2"></div>
</div>
</body>
</html>
CSS động họa cơ sở
@keyframes
Mấu chốt bức@keyframesat-ruleQuy tắc thông qua ở động họa danh sách trung định nghĩa mấu chốt bức ( hoặc waypoints ) hình thức tới khống chế CSS động họa danh sách trung trung gian bước đi. CùngThay đổi transitionSo sánh với, mấu chốt bức keyframes có thể khống chế động họa danh sách trung gian bước đi.
@keyframesslidein{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
JavaScript có thể thông qua CSS đối tượng mô hìnhCSSKeyframesRule(en-US)Tiếp lời tới chơi hỏi@keyframes.
Muốn sử dụng mấu chốt bức, trước sáng tạo một cái mang tên@keyframesQuy tắc, để kế tiếp sử dụnganimation-nameThuộc tính đem động họa cùng này mấu chốt bức thanh minh xứng đôi. Mỗi cái@keyframesQuy tắc bao hàm nhiều mấu chốt bức, cũng chính là một đoạn hình thức khối câu nói, mỗi cái mấu chốt bức có một cái tỉ lệ phần trăm giá trị làm tên, đại biểu ở động họa tiến hành trung, ở đâu cái giai đoạn kích phát cái này bức sở bao hàm hình thức.
Có thể ấn tùy ý trình tự liệt xuất quan kiện bức tỉ lệ phần trăm; chúng nó đem dựa theo này hẳn là phát sinh trình tự tới xử lý.
Bức danh sách tên. Tên cần thiết phù hợp CSS ngữ pháp trung đối đánh dấu phù định nghĩa.
Đồng giá với0%.
Đồng giá với100%.
Động họa danh sách trung kích phát mấu chốt bức thời gian điểm, sử dụng phần trăm giá trị tới tỏ vẻ.
Trường hợp -4- mới quen động họa
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.max{
width:200px;
height:200px;
background-color:pink;
animation:a1 5s;
}
/* định nghĩa một cái động họa */
@keyframesa1{
/* từ cái nào vị trí bắt đầu */
/* from{
transform: translate(0px,0px);
} */
/* đến cái gì vị trí */
/* to{
transform: translate(1000px,1000px);
} */
0%{}
25%{
transform:translate(1000px,0px);
}
50%{
transform:translate(1000px,500px);
}
75%{
transform:translate(0px,500px);
}
100%{
transform:translate(0px,0px);
}
}
</style>
</head>
<body>
<divclass="max">
</div>
</body>
</html>
Trường hợp -5- động họa tốc độ đường cong
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
*{
padding:0px;
margin:0px;
text-align:center;
/* thiết trí hành cao vì 100 */
line-height:100px;
}
.qpx{
width:10px;
height:1200px;
background-color:red;
top:0px;
left:100px;
animation:a1 linear 5s forwards;
}
div{
width:100px;
height:100px;
background-color:pink;
position:absolute;
}
.a1{
animation:a1 linear 5s forwards;
}
.a2{
top:150px;
animation:a1 ease 5s forwards;
}
.a3{
top:300px;
animation:a1 ease-in 5s forwards;
}
.a4{
top:450px;
animation:a1 ease-out 5s forwards;
}
.a5{
top:600px;
animation:a1steps(8)5s forwards;
}
@keyframesa1{
100%{
transform:translateX(1000px);
}
}
</style>
</head>
<body>
<!-- động họa tốc độ đường cong -->
<divclass="qpx"></div>
<divclass="a1">Đều tốc</div>
<divclass="a2">Thêm giảm</div>
<divclass="a3">Gia tốc</div>
<divclass="a4">Giảm tốc độ</div>
<divclass="a5">Ếch nhảy</div>
</body>
</html>
animation
CSSanimationThuộc tính làanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-modeCùnganimation-play-stateThuộc tính một cái viết chữ giản thể thuộc tính hình thức.
Thí dụ mẫu
/* mấu chốt bức động họa: Liên tục thời gian | di chuyển chậm hàm số | lùi lại |
Thay đổi số lần | phương hướng | bỏ thêm vào hình thức | truyền phát tin trạng thái | tên */
animation:3s ease-in 1s 2 reverse both paused slidein;
/* mấu chốt bức động họa: Liên tục thời gian | di chuyển chậm hàm số | lùi lại | tên */
animation:3s linear 1s slidein;
/* hai cái động họa */
animation:
3s linear slidein,
3s ease-out 5s slideout;
animationThuộc tính dùng để chỉ định một tổ hoặc nhiều tổ động họa, mỗi tổ chi gian dùng dấu phẩy cách xa nhau.
Trường hợp -6- cưỡi ngựa đồ
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<styletype="text/css">
*{
padding:0;
margin:0;
list-style:none;
}
.max{
height:200px;
width:600px;
border:2px solid skyblue;
margin:100px auto;
overflow:hidden;
}
img{
width:200px;
height:200px;
}
.list{
width:2200px;
height:200px;
display:flex;
animation:lb 4s linear infinite;
}
@keyframeslb{
0%{}
100%{
/* dọc theo x trục di động */
transform:translateX(-1600px);
}
}
</style>
</head>
<body>
<divclass="max">
<ulclass="list">
<li><imgsrc="../static/avatar/0001.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0002.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0003.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0004.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0005.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0006.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0007.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0008.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0001.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0002.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0003.jpg"alt=""></li>
<li><imgsrc="../static/avatar/0004.jpg"alt=""></li>
</ul>
</div>
</body>
</html>
Chú ý: Ta thiết trí mỗi cái ảnh chụp là 200*200 8 trương lặp lại hình ảnh, khung vì 600**200, vì tiêu trừ gián đoạn hiệu quả yêu cầu dựa theo trình tự ở<li>Trung ít nhất bổ 3 trương đồ,<ul>Trung độ rộng thuộc tính muốn thiết trí vì hình ảnh tổng số lượng độ rộng chi cùng.
Trường hợp -7- chạy vội hùng
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color:lightgreen;
}
.max{
width:200px;
height:100px;
background-image:url(../static/bear.png);
animation:dh1 0.7ssteps(7)infinite,dh2 3s linear infinite;
}
@keyframesdh1{
0%{}
100%{
background-position:1400px 0;
}
}
@keyframesdh2{
0%{}
100%{
transform:translateX(1600px);
}
}
</style>
</head>
<body>
<divclass="max"></div>
</body>
</html>
Chú: Nơi này sử dụng chính là một trương hùng chạy vội hình ảnh, nên hình ảnh có hùng chạy vội khi 8 trương động tác đồ, là một tổ trường đồ, hơn nữa là một trương png cách thức hình ảnh
Trường hợp -8- đồng hồ
Thí dụ mẫu ( đồ thị hình chiếu đã làm gia tốc xử lý )
Số hiệu
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.max{
width:400px;
height:400px;
border:4px solid lightsalmon;
margin:200px auto;
background-image:url(../static/avatar/0002.jpg);
border-radius:50%;
background-size:100% 100%;
position:relative;
transform-style:preserve-3d;
}
.a1{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%);
transform-origin:5px 200px;
}
.a2{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(30deg);
transform-origin:5px 200px;
}
.a3{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(60deg);
transform-origin:5px 200px;
}
.a4{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(90deg);
transform-origin:5px 200px;
}
.a5{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(120deg);
transform-origin:5px 200px;
}
.a6{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(150deg);
transform-origin:5px 200px;
}
.a7{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(180deg);
transform-origin:5px 200px;
}
.a8{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(210deg);
transform-origin:5px 200px;
}
.a9{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(240deg);
transform-origin:5px 200px;
}
.a10{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(270deg);
transform-origin:5px 200px;
}
.a11{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(300deg);
transform-origin:5px 200px;
}
.a12{
width:10px;
height:20px;
background-color:yellowgreen;
position:absolute;
left:50%;
top:0%;
transform:translateX(-50%)rotateZ(330deg);
transform-origin:5px 200px;
}
.center{
width:40px;
height:40px;
background-color:orange;
position:absolute;
border-radius:50%;
z-index:99;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.miao{
width:15px;
height:200px;
background-color:#fff;
position:absolute;
top:0px;
left:50%;
transform:translateX(-50%);
border-top-left-radius:50%;
border-top-right-radius:50%;
/* thiết trí xoay tròn trung tâm */
transform-origin:7.5px bottom;
animation:miao 60ssteps(60)infinite;
}
.fen{
width:15px;
height:180px;
background-color:yellowgreen;
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
border-top-left-radius:50%;
border-top-right-radius:50%;
/* thiết trí xoay tròn trung tâm */
transform-origin:7.5px bottom;
animation:miao 3600s linear infinite;
}
.shi{
width:15px;
height:160px;
background-color:royalblue;
position:absolute;
top:40px;
left:50%;
transform:translateX(-50%);
border-top-left-radius:50%;
border-top-right-radius:50%;
/* thiết trí xoay tròn trung tâm */
transform-origin:7.5px bottom;
animation:miao 43200s linear infinite;
}
@keyframesmiao{
0%{
transform:translateX(-50%)rotate(0deg);
}
100%{
transform:translateX(-50%)rotate(360deg);
}
}
</style>
</head>
<body>
<divclass="max">
<divclass="a1"></div>
<divclass="a2"></div>
<divclass="a3"></div>
<divclass="a4"></div>
<divclass="a5"></div>
<divclass="a6"></div>
<divclass="a7"></div>
<divclass="a8"></div>
<divclass="a9"></div>
<divclass="a10"></div>
<divclass="a11"></div>
<divclass="a12"></div>
<divclass="center"></div>
<divclass="miao"></div>
<divclass="fen"></div>
<divclass="shi"></div>
</div>
</body>
</html>
Chú ý: Phút cùng giờ đơn vị đổi.
Trường hợp -9- danh sách huyền phù động họa
Thí dụ mẫu
Số hiệu
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
.max{
width:1226px;
height:614px;
/* background-color: coral; */
margin:100px auto;
display:flex;
}
.left{
width:234px;
height:614px;
background-color:skyblue;
}
.right{
width:992px;
height:614px;
/* background-color: aquamarine; */
}
.biaoge{
width:234px;
height:260px;
padding:20px 0;
margin-left:14px;
justify-content:space-between;
background-color:greenyellow;
float:left;
display:inline;
}
.biaoge:hover{
animation-name:donghua;
animation-duration:2s;
animation-direction:alternate;
animation-fill-mode:forwards;
box-shadow:rgba(0,0,0,.3)0px 0px 15px;
}
.left:hover{
animation-name:donghua;
animation-duration:2s;
animation-direction:alternate;
animation-fill-mode:forwards;
box-shadow:rgba(0,0,0,.3)0px 0px 15px;
}
@keyframesdonghua{
0%{}
25%{
transform:translateY(-10px);
}
75%{
transform:translateY(-10px);
}
100%{
transform:translateY(-10px);
}
}
</style>
</head>
<body>
<divclass="max">
<divclass="left"></div>
<divclass="right">
<divclass="biaoge">
</div>
<divclass="biaoge">
</div>
<divclass="biaoge">
</div>
<divclass="biaoge">
</div>
<divclass="biaoge"style="margin-top:14px;">
</div>
<divclass="biaoge"style="margin-top:14px;">
</div>
<divclass="biaoge"style="margin-top:14px;">
</div>
<divclass="biaoge"style="margin-top:14px;">
</div>
</div>
</div>
</body>
</html>
664
Đến 【 tưới nước nhạc viên 】 lên tiếng
