.event {
width:500px;
height:100px;
position:absolute;
border-radius:5%;
left:-103px;
top:-208px;
background:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0.7),rgba(255,255,255,0.4),rgba(255,255,255,0));
transform:rotate(-45deg);
}
@keyframes fade {
from {
position:absolute;
left:-114px;
top:-228px;
}
to {
position:absolute;
left:-75px;
top:320px;
}
}.box {
width:200px;
height:150px;
margin:20px auto;
background: #1dd2af;
position:relative;
overflow:hidden;
}
更新时间:2019-08-29 00:05:23
效果实现思路
p标签实现透明度渐变效果,background:linear-gradient
并将p标签相对父及标签定位于左上角并旋转45度角,
给父盒子添加overflow: hidden;
定位位置与盒子大小有关,自行调试。
编写animatio动画。
鼠标划过调用动画。