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:100%;
	height:30px;
	border-radius:50%;
	position:absolute;
	left:0;
	bottom:-15px;
}
.mobile {
	width:260px;
	height:135px;
	background:#FC617E;
	border:4px solid #705674;
	border-width:4px 10px 4px 10px;
	border-radius:20px;
	position:absolute;
	top:-80px;
	left:80%;
	-webkit-transform:rotate(-5deg) translatex(-50%);
	transform:rotate(-5deg) translatex(-50%);
	z-index:1;
	overflow:hidden;
}
.screensaver {
	width:30px;
	height:30px;
	background:transparent;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	box-shadow:0 0 0 30px #eee,0 0 0 50px #D36868,0 0 0 70px #71D368,0 0 0 100px #68CFD3;
	-webkit-animation:screensaver .5s linear infinite;
	animation:screensaver .5s linear infinite;
}
.mobile-shadow {
	width:100px;
	height:50px;
	background:#C7656C;
	position:absolute;
	bottom:30px;
	left:50%;
	-webkit-transform:rotate(-5deg) translatex(-40%);
	transform:rotate(-5deg) translatex(-40%);
	-webkit-filter:blur(10px);
	filter:blur(10px);
}
.finger {
	position:absolute;
	width:45px;
	background:#FEDCCA;
	border-radius:22px;
	box-shadow:inset 11px -17px 40px #E77F7B;
}
.finger-shadow {
	width:35px;
	height:50px;
	background:#C7656C;
	position:absolute;
	bottom:5px;
	left:50%;
	-webkit-transform:translatex(-50%);
	transform:translatex(-50%);
	-webkit-filter:blur(10px);
	filter:blur(10px);
}
.finger-5 {
	height:115px;
	top:-130px;
	left:-15px;
	-webkit-transform:rotate(2deg);
	transform:rotate(2deg);
}
.finger-4 {
	height:90px;
	top:-100px;
	left:30px;
	-webkit-transform:rotate(-8deg);
	transform:rotate(-8deg);
	z-index:1;
}
.finger-3 {
	height:105px;
	top:-105px;
	left:75px;
	-webkit-transform:rotate(-8deg);
	transform:rotate(-8deg);
	z-index:1;
}
.finger-2 {
	height:120px;
	top:-165px;
	left:120px;
	-webkit-transform:rotate(15deg);
	transform:rotate(15deg);
}
.finger-2 .finger-shadow {
	bottom:-5px;
}
.finger-1 {
	height:100px;
	top:-10px;
	right:-50px;
	-webkit-transform:rotate(-65deg);
	transform:rotate(-65deg);
	z-index:1;
}
.finger-1 .fingernail {
	top:10px;
	bottom:auto;
	-webkit-transform:translatex(-50%) scale(-1);
	transform:translatex(-50%) scale(-1);
}
.thumb-base {
	backg.........完整代码请登录后点击上方下载按钮下载查看