卡片翻转动画

css PV:

css实现图片的翻转效果

实现效果如下
翻转动画

1
2
3
4
<div class="pos-box img-style" style="background-image: url('https://hl-blog.oss-cn-shanghai.aliyuncs.com/%E5%A4%B4%E5%83%8F.jpg');">
</div>
<div class="neg-box img-style" style="background-image: url('https://hl-blog.oss-cn-shanghai.aliyuncs.com/%E5%96%9D%E8%8C%B6.jpg');">
</div>
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<style>
    .img-style {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .pos-box {
        z-index: 1;
    }
    .neg-box {
        z-index: -1;
    }
    .pos-box, .neg-box {
        position: absolute;
        left: 50%;
        top: 0;
        width: 60vw;
        height: 120vw;
        margin-left: -30vw;
    }
    /* 正面 */
    .reverse1 {
        -webkit-animation: flipOutYtest 0.75s linear;
        animation: flipOutYtest 0.75s linear;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        z-index: -1;
    }
    @keyframes flipOutYtest {
        from {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
        }

        40% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        opacity: 1;
        }

        50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
        }

        to {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        opacity: 0;
        }
    }
    @-webkit-keyframes flipOutYtest {
        from {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
        }

        40% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        opacity: 1;
        }

        50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
        }

        to {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        opacity: 0;
        }
    }
    /* 反面 */
    .reverse2 {
        -webkit-animation: flipInYtest 0.75s linear;
        animation: flipInYtest 0.75s linear;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        z-index: 1;
    }
    @keyframes flipInYtest {
        from {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        opacity: 0;
        }

        50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        opacity: 0;
        }

        60% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        opacity: 1;
        }

        to {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
        opacity: 1;
        }
    }
    @-webkit-keyframes flipInYtest {
        from {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        opacity: 0;
        }

        50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        opacity: 0;
        }

        60% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        opacity: 1;
        }

        to {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
        opacity: 1;
        }
    }
    /* 掉落效果 */
    .drop {
        -webkit-animation: tobottom 1.5s ease;
        animation: tobottom 1.5s ease;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    @keyframes tobottom{
        from{
        top: -100vh;
        }
        to{
        top: 6vw;
        }
    }
    @-webkit-keyframes tobottom{
        from{
        top: -100vh;
        }
        to{
        top: 6vw;
        }
    }
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var posDiv = document.getElementsByClassName('pos-box')[0]
var negDiv = document.getElementsByClassName('neg-box')[0]
posDiv.addEventListener('click', function () {
    // posDiv.removeAttribute('class', 'reverse2')
    // negDiv.removeAttribute('class', 'reverse1')
    posDiv.classList.remove("reverse2")
    negDiv.classList.remove("reverse1")
    posDiv.setAttribute('class', posDiv.getAttribute('class') + " " + "reverse1")
    negDiv.setAttribute('class', negDiv.getAttribute('class') + " " + "reverse2")
})
negDiv.addEventListener('click', function () {
    // posDiv.removeAttribute('class', 'reverse1')
    // negDiv.removeAttribute('class', 'reverse2')
    posDiv.classList.remove("reverse1")
    negDiv.classList.remove("reverse2")
    posDiv.setAttribute('class', posDiv.getAttribute('class') + " " + "reverse2")
    negDiv.setAttribute('class', negDiv.getAttribute('class') + " " + "reverse1")
})

用原生js给DOM元素添加、删除一个类名

  • 方法一：

    1
    2
    DOM.setAttribute("class", "类名")
    DOM.removeAttribute("class", "类名")

  • 方法二：

    1
    2
    3
    DOM.classList.add('类名'); //添加类名
    DOM.classList.remove('类名'); //删除类名
    DOM.classList.toggle('类名'); //切换类名

  • setAttribute和add的区别

  1. setAttribute用于创建或改变某个新属性。
    如果指定属性已经存在，则只设置该值并且会替换原来的值。
  2. add方法是添加某个类，不会替换属性中的值，并且需要跟classList使用，因为它是classList的方法。

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2025 HL's Blog All Rights Reserved.

UV : | PV :