效果图

<div id="deviceready" class="box">
    <p class="event received">dong</p>
</div>

css

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

js

$(".box").hover(function() {

    $('.event').css({
        "animation": "fade 3s infinite ease-in-out"
    });
})

• 点赞 1
• 收藏
• 分享
• • 文章举报

Dr_W 发布了167 篇原创文章 · 获赞 52 · 访问量 6846 私信 关注