旋转立方体
强调:
- 要对外层容器设置 transform-style:preserve-3d; 否则不能显示3d效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style> html { perspective: 800px }
.cube { width: 200px; height: 200px; margin: 100px auto; transform-style:preserve-3d; animation: rotate 20s infinite linear; }
.cube>div { width: 200px; height: 200px;
opacity: .8; position: absolute; }
img { vertical-align: top; }
.box1 { transform: rotateY(90deg) translateZ(100px); }
.box2 { transform: rotateY(-90deg) translateZ(100px); }
.box3 { transform: rotateX(90deg) translateZ(100px); }
.box4 { transform: rotateX(-90deg) translateZ(100px); }
.box5 { transform: translateZ(-100px); }
.box6 { transform: translateZ(100px); }
@keyframes rotate { form{ transform:rotateX(0) rotateZ(0) }
to{ transform:rotateX(1turn) rotateZ(1turn) } } </style> </head>
<body>
<div class="cube"> <div class="box1"> <img src="./img/14/1.jpg"> </div>
<div class="box2"> <img src="./img/14/2.jpg"> </div>
<div class="box3"> <img src="./img/14/3.jpg"> </div>
<div class="box4"> <img src="./img/14/4.jpg"> </div>
<div class="box5"> <img src="./img/14/5.jpg"> </div>
<div class="box6"> <img src="./img/14/6.jpg"> </div> </div> </body>
</html>
|
钟表
关键在于:不要设置指针的旋转,应该把指针放进wrapper内,让wrapper旋转,同时指针跟着转,设置容器无背景颜色,即可以做出正确的指针旋转效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; }
.clock { width: 500px; height: 500px; margin: 0 auto; margin-top: 100px; border-radius: 50%; position: relative; background-image: url(./img/13/bg3.jpg); background-size: cover; }
.clock>div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
.hour-wrapper { height: 70%; width: 70%; animation: run 7200s linear infinite; }
.hour { height: 50%; width: 6px; background-color: #000; margin: 0 auto;
}
.min-wrapper { height: 80%; width: 80%; animation: run 600s steps(60) infinite; }
.min { height: 50%; width: 4px; background-color: #000; margin: 0 auto }
.sec-wrapper { height: 90%; width: 90%; animation: run 10s steps(60) infinite; }
.sec { height: 50%; width: 2px; background-color: #f00; margin: 0 auto }
@keyframes run { from { transform: rotateZ(0); }
to { transform: rotateZ(360deg); } } </style> </head>
<body>
<div class="clock"> <div class="hour-wrapper"> <div class="hour"></div> </div>
<div class="min-wrapper"> <div class="min"></div> </div>
<div class="sec-wrapper"> <div class="sec"></div> </div>
</div>
</body>
</html>
|
改进: transform-origin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .box{ width: 6px; height: 300px; background-color: #f00; margin: 100px auto; animation: rotate 10s infinite linear;
transform-origin: 0 300px; } @keyframes rotate{ from{ transform:rotateZ(0deg); }
to{ transform:rotateZ(360deg); } }
|
鼠标移入后浮起的效果

1 2 3 4 5 6 7 8 9 10 11
| .box{ width:230px; height:300px; background-color:#fff; transition:all .3s (同时对平移和影子设置过渡效果) } .box:hover{ transform:translateY(-4px); box-shadow:0 0 10px rgba(0,0,0,.3) }
|
小球下落动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style>
.outer{ height: 500px; border-bottom: 10px black solid; margin: 50px auto; overflow: hidden; } .outer div{ float: left; width: 100px; height: 100px; border-radius: 50%; background-color: #bfa; animation: ball .5s forwards linear infinite alternate; }
div.box2{ background-color: orange; animation-delay: .1s; }
div.box3{ background-color: yellow; animation-delay: .2s; }
div.box4{ background-color: yellowgreen; animation-delay: .3s; }
div.box5{ background-color: blue; animation-delay: .4s; } div.box6{ background-color: pink; animation-delay: .5s; } div.box7{ background-color: tomato; animation-delay: .6s; } div.box8{ background-color: skyblue; animation-delay: .7s; } div.box9{ background-color: chocolate; animation-delay: .8s; }
@keyframes ball { from{ margin-top: 0; }
to{ margin-top: 400px; }
} </style> </head> <body>
<div class="outer"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> <div class="box9"></div> </div> </body> </html>
|
鼠标移入后图片放大
网易新闻的效果:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .img-wrapper{ width: 200px; height: 200px; border: 1px red solid; overflow: hidden; }
img{ transition: .2s; width:100%; }
.img-wrapper:hover img{ transform:scale(1.2); }
|
图形
三角形
思路:用边框实现三角形效果。
原理:边框交界处是斜的。
1 2 3 4 5 6 7 8 9 10 11 12 13
| .box1{ width: 0px; height: 0px; border: 100px/*此值改变三角形大小*/ red solid; border-top: none; border-left-width: 50px; border-right-width: 50px; border-color: transparent transparent blue transparent; }
|
clip-path
圆
1 2 3 4 5 6
| .circle{ width:100px; height:100px; clip-path:circle(50%); background-color:red; }
|
任意多边形
以三角形为例:
1 2 3 4 5 6 7 8
| .triangle{ width:100px; height:100px; clip-path:polygon(0% 0%,100% 0%,50% 50%);
background-color:red; }
|