css实现手机摇摆摇晃摇一摇动画效果代码-html代码-BFW代码库

css实现手机摇摆摇晃摇一摇动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现手机摇摆摇晃摇一摇动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        * {
	box-sizing:border-box;
}
body {
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	background:#EB4F5C;
}
.rock {
	font-family:'Montserrat',sans-serif;
	font-size:200px;
	margin:0;
	color:#D4304B;
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.hand {
	position:relative;
	width:100px;
	height:100px;
	-webkit-animation:rockit .8s ease infinite alternate;
	animation:rockit .8s ease infinite alternate;
}
.palm {
	width:125px;
	height:140px;
	background:#FEDCCA;
	-webkit-transform:rotate(26deg);
	transform:rotate(26deg);
	box-shadow:inset 0 0 50px #E77F7B;
}
.palm:after {
	content:'';
	background:#F2ADA1;
	width:20px;
	height:30px;
	border-radius:0 0 0 100% / 50%;
	position:absolute;
	left:-20px;
	bottom:25px;
	z-index:5;
}
.palm:before {
	content:'';
	background-image:linear-gradient(-180deg,#E56C4C 0,#F68E60 100%);
	width:.........完整代码请登录后点击上方下载按钮下载查看