旋转立方体

强调：

  • 要对外层容器设置 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;
}