css+div模拟动物尾部缩成一团扭曲动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div模拟动物尾部缩成一团扭曲动画效果代码
代码标签: css div 模拟 动物 尾部 缩成 一团 动画 扭曲
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: relative; } body { background: #8bb326; } .container { position: fixed; width: 100%; min-width: 100%; max-width: 100%; height: 100%; margin: 0; } .clip { width: 420px; height: 420px; position: absolute; left: 50%; top: 50%; margin-left: -210px; margin-top: -210px; } .clip:after { z-index: 99; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 126px #8bb326; } .circle { display: block; margin: 0 auto; width: 120%; height: 120%; left: -10%; top: -10%; border-radius: 50%; } .circle > b { position: absolute; top: 0; left: 0; } b { font-size: .8em; display: block; width: 100%; height: 100%; border-radius: 50%; margin: 0; padding: 7px 7px; -webkit-animation: spin 15s ease-in-out infinite alternate; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(139, 179, 38, 0)), color-stop(30%, rgba(205, 230, 140, 0)), color-stop(70%, rgba(205, 230, 140, 0.5)), color-stop(80%, rgba(139, 179, 38, 0)), color-stop(80%, #8bb326), color-stop(90%, rgba(139, 179, 38, 0.5)), color-stop(100%, rgba(139, 179, 38, 0.5))); background: -webkit-linear-gradient(top, rgba(139, 179, 38, 0) 0%, rgba(205, 230, 140, 0) 30%, rgba(205, 230, 140, 0.5) 70%, rgba(139, 179, 38, 0) 80%, #8bb326 80%, rgba(139, 179, 38, 0.5) 90%, rgba(139, 179, 38, 0.5) 100%); background: -moz-linear-gradient(top, rgba(139, 179, 38, 0) 0%, rgba(205, 230, 140, 0) 30%, rgba(205, 230, 140.........完整代码请登录后点击上方下载按钮下载查看
网友评论0