Html
    Css
    Js

    
                        
.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; 
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css对角渐变效果

更新时间:2019-08-29 00:05:23

效果实现思路
p标签实现透明度渐变效果,background:linear-gradient
并将p标签相对父及标签定位于左上角并旋转45度角,
给父盒子添加overflow: hidden;
定位位置与盒子大小有关,自行调试。
编写animatio动画。
鼠标划过调用动画。

0