css 布局实现一个金锁摆动动画效果代码-html代码-BFW代码库

css 布局实现一个金锁摆动动画效果代码

代码语言：html

所属分类：动画

代码描述：css 布局实现一个金锁摆动动画效果代码

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

<html>

<head>
    <style>
        * {
        	border: 0;
        	box-sizing: border-box;
        	margin: 0;
        	padding: 0;
        }
        body {
        	background: hsl(143,90%,20%);
        	font: 16px/1.5 sans-serif;
        	height: 100vh;
        	display: grid;
        	place-items: center;
        	overflow: hidden;
        }
        input {
        	position: fixed;
        	top: -1.5em;
        	left: -1.5em;
        }
        input:not(:checked):focus + .padlock,
        input:not(:checked):hover + .padlock {
        	animation: 0.5s swing ease-in-out;
        }
        input:checked + .padlock {
        	animation: fall 2s ease-in-out forwards;
        	transform-origin: 17.5em -3em;
        }
        input:checked + .padlock .padlock__top {
        	animation:
        		unlockA 0.5s ease-in,
        		unlockB 0.25s 0.5s ease-out forwards;
        }
        input:checked + .padlock .padlock__top-a {
        	animation:
        		hookA 0.5s ease-in,
        		hookB 0.25s 0.5s ease-out forwards;
        }
        input:checked + .padlock .padlock__top-b {
        	animation: boxShadowSwap 0.75s steps(1,start) forwards;
        }
.........完整代码请登录后点击上方下载按钮下载查看