旋转立方体

强调:

  • 要对外层容器设置 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;
    /* background-color: #bfa; */
    margin: 100px auto;
    /* 设置3d变形效果 */
    transform-style:preserve-3d;
    /* transform: rotateX(45deg) rotateZ(45deg); */
    animation: rotate 20s infinite linear;
    /* transform:rotateY(45deg) scaleZ(2); */
    }

    .cube>div {
    width: 200px;
    height: 200px;
    /*
    为元素设置透明效果
    opacity作用于元素,以及元素内的所有内容元素
    rgba()只作用于元素的颜色或其背景色,元素的子元素不会继承透明效果
    */
    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);
    }
    /*
    这是之前的代码,但我发现可以不用旋转。
    .box5 {
    transform:rotateY(180deg) translateZ(100px);
    }

    .box6 {
    transform: rotateY(0deg) 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%;
/* border: 10px solid black; */
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;
}

/* 2 to{
margin-top: 400px;
animation-timing-function: ease-in;
}

40%{
margin-top: 100px;
}

80%{
margin-top: 200px;
} */

}
</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%;
/*将图片大小设置为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;
/*设置一个宽高都为0的盒子,只剩边框*/
border: 100px/*此值改变三角形大小*/ red solid;
border-top: none;
/*上边框可以没有*/
border-left-width: 50px;
border-right-width: 50px;
/*自由调整这两个值,可以改变三角形形状*/
border-color: transparent transparent blue transparent;
/*设置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;
}