动态radio切换动画效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/feather-icons.js"></script> <style> @import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900"); html > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { display: flex; justify-content: center; align-items: center; background: #f1f3f9; height: 100vh; font-family: 'Muli', Arial, sans-serif; } #dribbble { position: fixed; display: block; right: 70px; bottom: 16px; } #dribbble svg { display: block; width: 76px; height: 24px; fill: rgba(146, 156, 208, 0.8); } #twitter { position: fixed; display: block; right: 25px; bottom: 11px; } #twitter svg { width: 24px; height: 24px; fill: rgba(146, 156, 208, 0.8); } .container, .ul, .cr, .cr-wrap { display: flex; justify-content: center; align-items: center; } .container { width: auto; height: auto; box-sizing: border-box; padding: 30px 20px; background: #fff; box-shadow: 0 8px 22px -6px rgba(213, 219, 237, 0.9); border-radius: 12px; } .ul { flex-direction: column; width: 125px; height: auto; padding: 0; } .ul > .li:nth-child(2) { margin: 20px 0; } .li { display: flex; justify-content: space-between; align-items: center; width: 111.1111111111px; height: 30px; cursor: pointer; position: relative; } .li .text { font-size: 1.1em; } .cr { width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 2px solid rgba(20, 98, 255, 0.8); overflow: hidden; position: relative; z-index: 3; } .crx { width: 12px; height: 12px; border-radius: 50%; background: rgba(20, 98, 255, 0.8); transform: translatex(-19px); } .crx-top-in { animation: fromTopIn 479ms linea.........完整代码请登录后点击上方下载按钮下载查看
网友评论0