css实现鼠标点击开锁关锁动画效果代码-html代码-BFW代码库

css实现鼠标点击开锁关锁动画效果代码

代码语言：html

所属分类：其他

代码描述：css实现鼠标点击开锁关锁动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');
	body {
	background:black;
}
.container {
	display:flex;
	align-items:center;
	justify-content:center;
	background:black;
	flex-direction:column;
}
.lock {
	width:200px;
	height:300px;
	display:flex;
	flex-direction:column;
	align-items:center;
}
*:before,*:after {
	content:"";
	position:absolute;
	display:block;
}
@keyframes lock {
	80% {
	transform:translatey(60px);
}
100% {
	transform:translatey(55px);
}
}.head {
	width:150px;
	height:150px;
	border-radius:50% 50% 4px 4px;
	background:radial-gradient(#B0BEC5,#78909C,#37474F);
	position:absolute;
	z-index:1;
	animation:lock 1s forwards;
}
.head:before {
	width:100px;
	height:135px;
	border-radius:50% 50% 10% 10%;
	background:black;
	margin:23px 25px;
	box-shadow:-2px -8px 8px 2px #ccc;
}
.head:after {
	width:40px;
	height:30px;
	background:black;
	margin:120px 122px;
}
.notch {
	position:absolute;
	width:15px;
	height:15px;
	background:black;
	margin:95px 125px;
	border-radius:0 30% 30% 0;
	box-shadow:inset -4px 2px 2px 0px #bbb;
}
.body {
	width:190px;
	height:160px;
	background:linear-gradient(to right,goldenrod,gold,#ff5,gold,goldenrod);
	position:absolute;
	z-index:3;
	margin-top:145px;
	border-radius:10px;
	box-shadow:inset 0px 5px 10px 1px #550,inset 0px -5px 10px 1px #550;
}
@keyframes locked {
	50% {
	opacity:0;
}
60% {
	opacity:0;
	content:"LOCKED";
}
100% {
	opacity:1;
	content:"LOCKED";
	margin:30% 25%;
}
}.body:before {
	content:"UNLOCKED";
	font-size:1.6em;
	margin:30% 15%;
	font-family:'Allerta Stencil',sans-serif;
	color:#500;
	animation:locked 1s forwards;
}
.key {
	width:90px;
	height:150px;
}
.key .top {
	width:20px;
	height:80px;
	background:linear-gradient(to right,#CCCCCC,#444 30%,#CCCCCC 40%);
	border-radius:30% 70% 0 0;
	margin:-40px 35px;
	box-shadow:-4px 0px 2px 1px grey;
}
.key .top:after {
	width:5px;
	height:12px;
	border-radius:70% 0 0 30%;
	background:black;.........完整代码请登录后点击上方下载按钮下载查看