style
vertical-align默认baseline
显示全部
<div class="box">
<div class="item">和所有以梦为马的诗人一样<br></div>
<div class="item">和所有以梦为马的诗人一样<br>和所有以梦为马的诗人一样<br></div>
<div class="item">和所有以梦为马的诗人一样<br>和所有以梦为马的诗人一样<br></div>
<div class="item">和所有以梦为马的诗人一样<br>和所有以梦为马的诗人一样<br></div>
<div class="item">和所有以梦为马的诗人一样<br>和所有以梦为马的诗人一样<br>和所有以梦为马的诗人一样<br></div>
大家能看到
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.box{
height: 100px;
}
.item{
/* vertical-align: top; */
vertical-align: middle;
display: inline-block;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
css3
transform rotate translate
查看代码
- polariod.vue
<template>
<div class="polariod">
<section class="polaroid-gallery">
<h1 class="title">polariod card </h1>
<figure class="polaroid-card">
<img
src="https://picsum.photos/200/200?random=1"
width="200px"
height="200px"
alt="swan">
<figcaption
class="polaroid-card-caption">
swan</figcaption>
</figure>
<figure class="polaroid-card">
<img
src="https://picsum.photos/200/200?random=2"
width="200px"
height="200px"
alt="swan">
<figcaption
class="polaroid-card-caption">
swan</figcaption>
</figure>
<figure class="polaroid-card">
<img
src="https://picsum.photos/200/200/?random=3"
width="200px"
height="200px"
alt="swan">
<figcaption
class="polaroid-card-caption">
swan</figcaption>
</figure>
<figure class="polaroid-card">
<img
src="https://picsum.photos/200/200?random=4"
width="200px"
height="200px"
alt="swan">
<figcaption
class="polaroid-card-caption">
swan</figcaption>
</figure>
</section>
</div>
</template>
<style scoped>
.polariod{
background-image: url('https://picsum.photos/id/119/1980/1080');
background-position: center;
background-repeat: no-repeat;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
padding: 50px 0;
/*min-height: 100vh;*/
}
.polaroid-gallery{
text-align: center;
}
.title{
font-size: 2em;
font-weight: 400;
color: #333;
}
.polaroid-card{
display: inline-block;
background-color: #ffffff;
padding: 10px;
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .8);
}
.polaroid-card:hover{
transform: scale(1.3) !important;
}
.polaroid-card-caption{
text-align: center;
font-family: "Maker Felt",sans-serif;
font-size: 14px;
margin-top: 8px;
letter-spacing: 2px;
}
.polaroid-card:nth-of-type(even){
transform:rotate(-8deg)
}
.polaroid-card:nth-of-type(even)::before{
content: '';
display: block;
background-color:rgba(222, 220, 200, .66) ;
width: 80px;
height: 25px;
transform:rotate(-25deg) translate(-30px,-25px);
}
.polaroid-card:nth-of-type(odd){
transform:rotate(9deg)
}
.polaroid-card:nth-of-type(odd)::before{
content: '';
display: block;
background-color:rgba(222, 220, 200, .66) ;
width: 80px;
height: 25px;
transform:translate(140px,-18px) rotate(25deg) ;
}
</style>
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
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
transition
transition-timing-functionopen in new window
查看详情
<template>
<div class="box">
<el-button @click="handelClick">触发</el-button>
<div class="items" @click="handelClick">
<div
class="item"
:class="showTransition"
v-for="(item,index) in new Array(8)"
:key="index"
>
<span class="fixed">{{functionName[index]}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "transition_timing_function",
data() {
return {
showTransition: '',
functionName:['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear','step-start','step-end','cubic-bezier(0,-1.5,1,1.5)']
}
},
methods: {
handelClick() {
this.showTransition = this.showTransition ? '' : 'transition'
}
}
}
</script>
<style scoped lang="scss">
@import "~element-plus/dist/index.css";
.box {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
margin-top: 2vh;
}
.items {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 2em;
color: #fff;
position: relative;
.item {
width: 5em;
height: 5em;
line-height: 5em;
text-align: center;
vertical-align: middle;
transition-property: margin-left;
transition-duration: 2s;
white-space: nowrap;
span.fixed{
position: absolute;
left: 0;
text-align: center;
width: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 2em;
opacity: .5;
}
//transition-delay: 2s;
&.transition {
margin-left: 50vw;
}
}
//下面两个可以写在一起，练习一下scss嘛
$list: ease, ease-in, ease-out, ease-in-out, linear,step-start,step-end,cubic-bezier(0,-1.5,1,2.5);
@for $i from 1 through 8 {
.item:nth-child(#{$i}) {
background-color: rgb(random(235), random(235), random(235));
}
}
@each $c in $list {
$i: index($list, $c);
.item:nth-child(#{$i}) {
transition-timing-function: $c;
}
}
}
</style>
setup cubic_bezier
提示
初次使用setup的template,很nice
查看详情
<template>
<div class="cubic_bizier">
<span>
{{ data }}
</span>
<canvas width="340" height="220" ref="canvas_custom"></canvas>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const data = ref();
return {
data,
};
},
mounted() {
let canvas = this.$refs.canvas_custom;
let context = canvas.getContext("2d", { colorSpace: "display-p3" });
let position = 0;
// 所谓对称
for (let green of [255, 0]) {
for (let blue of [255, 0]) {
for (let red of [255, 0]) {
context.fillStyle = `rgba(${red},${green},${blue})`;
context.fillRect(position, position, 40, 40);
position += 20;
}
}
}
position -= 20;
let positionx = position;
positionx += 20;
for (let green of [0, 255]) {
for (let blue of [0, 255]) {
for (let red of [0, 255]) {
context.fillStyle = `rgba(${red},${green},${blue})`;
context.fillRect(positionx, position, 40, 40);
position -= 20;
positionx += 20;
}
}
}
// 所谓对称
},
};
</script>
<style scoped lang="scss">
.cubic_bizier {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
</style>