Post Title
In order to better understand how to create your own Vue.js plugins, we will create a very simplified version of a plugin that displays i18n ready strings.
Read More首先我们从结构和样式两个方面来讲解以上动图的实现过程:
Html结构:
Post Title
In order to better understand how to create your own
Vue.js plugins, we will create a very simplified version
of a plugin that displays i18n ready strings.
Read More
最外层类名为square元素包裹着以类名为content里面是文字和按钮,3个span元素组成了水波纹
CSS样式:
以下是效果图的基本样式,设置body黑色背景,高度为浏览器100%高度,body里面的元素垂直居中
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-shadow: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
接下来设置body下最外层元素的样式,长宽为400像素,子元素垂直水平居中
.square {
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
这里的span元素就是效果图中的波纹,有3层,分别相对父元素绝对定位,长宽等于父元素,然后设置宽度为2个像素颜色为白色的的border,之所以为不规则的椭圆,是因为设置了四个角都不相等的角的弧度值。
.square span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}
然后我们要让波纹转动起来,添加animation动画属性,动画持续时间0.5s,线性循环
.square span {
transition: 0.5s;
animation: animate 6s linear infinite;
}
animate动画均匀旋转360度,另一个相反方向旋转
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
三个span元素分别设置不同的动画和持续时间
.square span:nth-child(1) {
animation: animate 6s linear infinite;
}
.square span:nth-child(2) {
animation: animate 4s linear infinite;
}
.square span:nth-child(3) {
animation: animate2 10s linear infinite;
}
设置类名content里面文字样式白色居中,以及设置“Read More”按钮样式,不规则边框
.content {
position: relative;
padding: 40px 60px;
color: #fff;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
.content a {
position: relative;
display: inline-block;
margin-top: 10px;
border: 2px solid #fff;
padding: 6px 18px;
text-decoration: none;
color: #fff;
font-weight: 600;
border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
}
.content a:hover {
background: #fff;
color: #333;
}