CSS3做涟漪的效果

最新推荐文章于 2024-04-22 14:48:45 发布

前端小菜鸟

最新推荐文章于 2024-04-22 14:48:45 发布

阅读量4.6k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/learninginJAVA/article/details/45246191

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>涟漪的效果</title>
	<style>
	@keyframes myfirst
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;}
	}

	@-moz-keyframes myfirst 
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;}
	}

	@-webkit-keyframes myfirst 
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;opacity: 0;}
	}

	@-o-keyframes myfirst 
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;}
	}
	.box {
		background-position: 0 0;
		margin: 300px auto;
		border-radius: 50%;
		width: 86px;
		height: 86px;
		background: url(http://imgcache.qq.com/ac/www_tencent/join/images/icon_post.png) no-repeat 0 0;
		position: rela

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小菜鸟

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3做涟漪的效果

涟漪的效果 @keyframes myfirst { from {border:0 solid #E4684D; left:1px;top: 1px;} to {border:12px solid #E4684D; left:-11px;top: -11px;} } @-moz-keyframes myfirst { from {border:0 solid #E4684D
复制链接

扫一扫