.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动画。
鼠标划过调用动画。