2021-6-10 前端達人
-
旋轉正方形
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<meta charset="utf-8">
-
<title>旋轉立方體</title>
-
<style type="text/css">
-
.stage{
-
position: relative;
-
perspective: 800px;
-
}
-
@keyframes rotate-frame{ /* 設置動畫效果 */
-
0% {
-
transform: rotateX(0deg) rotateY(0deg);
-
}
-
-
50% {
-
transform: rotateX(360deg) rotateY(0deg);
-
}
-
100% {
-
transform: rotateX(360deg) rotateY(360deg);
-
}
-
}
-
.container{
-
width: 450px;
-
height: 450px;
-
margin: 0 auto;
-
transform-style:preserve-3d;
-
animation: rotate-frame 8s infinite linear;
-
animation-timing-function: all;
-
animation-direction: normal;
-
-
animation-fill-mode: backwards;
-
-
transform-origin: 50% 50% 75px;
-
-
/*background: yellow; 容器屏幕背景色*/
-
}
-
.container:hover{
-
/*覆蓋時暫停動畫*/
-
animation-play-state: paused;
-
}
-
.side{
-
width: 150px;
-
height: 150px;
-
position: absolute;
-
text-align: center;
-
line-height: 150px;
-
font-size: 50px;
-
}
-
.top{
-
left: 150px;
-
top: 0;
-
transform: rotateX(-90deg); /* 設置角度 */
-
transform-origin: bottom;
-
background-color: rgba(0,0,255,0.5);
-
}
-
.bottom{
-
left: 150px;
-
top: 300px;
-
transform: rotateX(90deg);
-
transform-origin: top;
-
background-color: rgba(0,255,0,0.5);
-
}
-
.left{
-
left: 0;
-
top: 150px;
-
transform: rotateY(90deg);
-
transform-origin: right;
-
background-color: rgba(255,0,0,0.5);
-
}
-
.right{
-
left: 300px;
-
top: 150px;
-
transform: rotateY(-90deg);
-
transform-origin: left;
-
background-color: rgba(0,0,100,0.5);
-
}
-
.front{
-
left: 150px;
-
top: 150px;
-
transform: translateZ(150px);
-
background-color: rgba(0,100,0,0.5);
-
}
-
.back{
-
left: 150px;
-
top: 150px;
-
background-color: rgba(100,0,0,0.5);
-
}
-
.rotateX180{
-
/*讓倒置的數字倒置回正常狀態*/
-
transform: rotateX(180deg);
-
}
-
-
</style>
-
-
</head>
-
<body>
-
<div class="stage">
-
<div class="container">
-
<div class="side top" >1</div>
-
<div class="side bottom">2</div>
-
<div class="side left">3</div>
-
<div class="side right">4</div>
-
<div class="side front">5</div>
-
<div class="side back">6</div>
-
</div>
-
</div>
-
</body>
-
</html>
-
紙片旋轉
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
.zpbox{
-
/*設置3D視角*/
-
perspective: 800px;
-
perspective-origin: bottom right;
-
}
-
.box{
-
height: 200px;
-
width: 100px;
-
margin: 50px auto;
-
-
/*preserve-3d 指定子元素定位在三維空間內 */
-
transform-style: preserve-3d;
-
/*指定變換為：linear-線性過渡*/
-
transition-timing-function：linear;
-
-
/*指定旋轉動畫*/
-
animation-name: action_b1;
-
animation-duration: 4s;
-
animation-timing-function: all;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
animation-fill-mode: backwards;
-
-
position: relative;
-
}
-
.box:hover{
-
/*覆蓋時暫停動畫*/
-
animation-play-state: paused;
-
}
-
-
.b1{
-
/*聲明第一個卡片為浮動，使得兩個卡片能重疊*/
-
float: left;
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
}
-
.b2{
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
-
/*第二個卡片旋轉90度*/
-
transform: rotateX(90deg);
-
-
/*第二個卡片位于中間位置*/
-
position: absolute;
-
margin-left: 0;
-
margin-top: 0;
-
}
-
.rotateX180{
-
/*讓倒置的2、4數字倒置回正常狀態*/
-
transform: rotateX(180deg);
-
}
-
-
@keyframes action_b1{
-
100%{
-
transform: rotateX(-360deg);
-
}
-
}
-
-
-
-
-
</style>
-
</head>
-
<body>
-
<div class="zpbox">
-
<div class="box">
-
<div class="b1">
-
<div>1</div>
-
<div class="rotateX180">3</div>
-
</div>
-
<div class="b2">
-
<div>2</div>
-
<div class="rotateX180">4</div>
-
</div>
-
</div>
-
</div>
-
-
-
</body>
-
</html>
-
輪播圖3D
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } /*去掉多余的像素*/
-
body{
-
perspective: 800px;
-
}
-
.box{
-
width: 800px;
-
height: 360px;
-
margin: 100px auto;
-
text-align:center;
-
position: relative;
-
left: 50%;
-
margin-left: -400px;
-
/*background-color: #eee;*/
-
transform-style: preserve-3d; /*設置為3D模式*/
-
/*transform: rotateY(-30deg) rotateX(57deg);*/
-
/*transition:5s ease;*/
-
animation-name: animate;
-
animation-duration: 10s;
-
animation-iteration-count: infinite;
-
}
-
-
.box>div{
-
width: 800px;
-
height: 360px;
-
position: absolute;
-
}
-
.box>.up{
-
background: url(flower.jpg); /*引入照片*/
-
transform: rotateX(90deg) translateZ(180px); /* 設置角度 */
-
}
-
.box>.down{
-
background: url(flower.jpg);
-
transform: rotateX(90deg) rotateZ(180deg)translateZ(-180px);
-
}
-
.box>.before{
-
background: url(flower.jpg);
-
transform: translateZ(180px);
-
}
-
.box>.after{
-
background: url(flower.jpg);
-
transform: translateZ(-180px) rotateX(180deg);
-
}
-
.box:hover{
-
animation-play-state: paused; /* 當鼠標懸停的時候停止 */
-
}
-
@keyframes animate{
-
0%{
-
-
}
-
25%{
-
transform: rotateX(90deg);
-
}
-
50%{
-
transform: rotateX(180deg);
-
}
-
75%{
-
transform: rotateX(270deg);
-
}
-
100%{
-
transform: rotateX(360deg);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<div class="up"></div>
-
<div class="down"></div>
-
<div class="before"></div>
-
<div class="after"></div>
-
</div>
-
</body>
-
</html>
-
輪播
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>輪播</title>
-
<style>
-
.frame{
-
position:absolute;
-
margin: 50px 200px;
-
width:280px;
-
height:200px;
-
overflow:hidden;
-
border-radius:6px;
-
background-color: #000;
-
}
-
.imgdiv img{
-
float:left;
-
width:280px;
-
height:200px;
-
}
-
.imgdiv {
-
position: absolute;
-
width: 1500px;
-
}
-
.play{
-
animation: lbt 10s ;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
}
-
.play:hover{
-
animation-play-state: paused;
-
}
-
-
@keyframes lbt {
-
0%,20% {
-
margin-left: 0px;
-
}
-
20%,40% {
-
margin-left: -300px;
-
}
-
40%,60% {
-
margin-left: -600px;
-
}
-
60%,80% {
-
margin-left: -900px;
-
}
-
80%,100% {
-
margin-left: -1200px;
-
}
-
}
-
-
</style>
-
</head>
-
<body>
-
<div class="frame" >
-
<div class="imgdiv play">
-
<img src="lunbo.jpg" > <!-- 引入照片 -->
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
</div>
-
</div>
-
</body>
-
</html>
-
1
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：csdn
原文鏈接：
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.skdbbs.com