Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
.wrapper { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } .wrapper .pole { position: absolute; width: 5px; height: 250px; left: 50%; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: translateX(-50%) rotate(-25deg); transform: translateX(-50%) rotate(-25deg); color: silver; background: currentColor; } .wrapper .pole.two { -webkit-transform: translateX(-50%) rotateY(-180deg) rotate(-25deg); transform: translateX(-50%) rotateY(-180deg) rotate(-25deg); } .wrapper .pole:before { content: ""; position: absolute; top: -10px; left: -7px; width: 20px; height: 20px; border-radius: 100%; background: currentColor; } .wrapper .pole:after { content: ""; position: absolute; left: 0; bottom: 0; width: 20px; height: 5px; -webkit-transform: translateX(-50%) rotate(25deg); transform: translateX(-50%) rotate(25deg); background: currentColor; } .wrapper .swing { position: absolute; width: 40px; height: 100%; left: calc(50% - 20px); -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .wrapper .swing .human { position: absolute; width: 40px; height: 80px; bottom: 5px; z-index: -1; } .wrapper .swing .human .top-part { position: absolute; width: 40px; height: 80px; bottom: 5px; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-name: body-animation; animation-name: body-animation; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .wrapper .swing .human .top-part .head { position: absolute; bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 20px; background: #d59e7b; border-radius: 100%; z-index: 2; } .wrapper .swing .human .top-part .head .hair { position: absolute; top: -5px; left: -10px; background: black; width: 22px; height: 44px; border-top-right-radius: 0%; border-top-left-radius: 100%; border-bottom-right-radius: 75%; border-bottom-left-radius: 10%; z-index: 2; } .wrapper .swing .human .top-part .head .fringe { position: absolute; top: -5px; left: 0; width: 0px; height: 0px; border-top: 10px solid black; border-bottom: 10px solid black; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 100%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .wrapper .swing .human .top-part .head .eye { content: ""; position: absolute; top: 6px; right: 2px; width: 2px; height: 2px; background: black; border-radius: 100%; } .wrapper .swing .human .top-part .head .mouth { position: absolute; top: 10px; right: 0px; width: 0px; height: 0px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid white; border-radius: 100%; -webkit-transform: rotate(28deg); transform: rotate(28deg); } .wrapper .swing .human .top-part .body { position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #ee5130; width: 20px; height: 40px; border-top-left-radius: 20px; border-top-right-radius: 20px; } .wrapper .swing .human .top-part .body .hand { position: absolute; top: 20%; left: 10%; } .wrapper .swing .human .top-part .body .hand .hand-one { position: absolute; -webkit-transform: rotate(30deg); transform: rotate(30deg); width: 5px; height: 15px; background: #ee5130; box-shadow: 0 -1px 0px 1px rgba(0, 0, 0, 0.2); border-top-right-radius: 100%; border-top-left-radius: 100%; } .wrapper .swing .human .top-part .body .hand .hand-two { background: #d59e7b; position: absolute; top: 14px; left: -6px; width: 4px; height: 15px; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); border-top-left-radius: 15px; } .wrapper .swing .human .leg-one { position: absolute; bottom: 0; left: 10px; width: 40px; height: 10px; background: #1973ad; border-bottom-left-radius: 20px; border-top-right-radius: 20px; z-index: -1; } .wrapper .swing .human .leg-two { position: absolute; width: 40px; height: 10px; bottom: 5px; right: -5px; border-top-right-radius: 50%; border-bottom-right-radius: 20px; background: #1973ad; -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-animation-name: leg-animation; animation-name: leg-animation; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-direction: alternate; } .wrapper .swing .human .leg-two:after { content: ""; position: absolute; left: -5px; top: -1px; background: silver; height: 18px; width: 5px; border-top-left-radius: 3px; border-bottom-right-radius: 50%; } .wrapper .swing .swing-rod { position: absolute; width: 5px; height: 200px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #323232; } .wrapper .swing .bottom { position: absolute; width: 100%; height: 5px; bottom: 0; background: saddlebrown; } .wrapper .swing:nth-of-type(1) { -webkit-animation-name: swing-1; animation-name: swing-1; } .wrapper .swing:nth-of-type(4) { -webkit-animation-name: swing-2; animation-name: swing-2; } @-webkit-keyframes swing-1 { from { -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } to { -webkit-transform: rotate(35deg); transform: rotate(35deg); } } @keyframes swing-1 { from { -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } to { -webkit-transform: rotate(35deg); transform: rotate(35deg); } } @-webkit-keyframes body-animation { from { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } to { -webkit-transform: rotate(20deg); transform: rotate(20deg); } } @keyframes body-animation { from { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } to { -webkit-transform: rotate(20deg); transform: rotate(20deg); } } @-webkit-keyframes leg-animation { from { bottom: 2px; right: -8px; -webkit-transform: rotate(-55deg); transform: rotate(-55deg); } to { bottom: 2px; right: 5px; -webkit-transform: rotate(-170deg); transform: rotate(-170deg); } } @keyframes leg-animation { from { bottom: 2px; right: -8px; -webkit-transform: rotate(-55deg); transform: rotate(-55deg); } to { bottom: 2px; right: 5px; -webkit-transform: rotate(-170deg); transform: rotate(-170deg); } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS摇摆的女孩-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号