Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
css
:root { --rotate: -26deg; /* to make it responsive */ --unit: 1vmin; --zoom: 160; --workspace-min: 768; /* device screen height = 768px */ --upx: calc( var(--zoom) * (var(--unit) / var(--workspace-min)) ); /* upx = units per pixel */ /* DNA Helix loop */ --animation-speed: 1; --helix-duration: 0.5s; --helix-iteration-factor: 0.05s; /* DNA model */ --dna-max-height: calc(140 * var(--upx)); --dna-nitrogenous-base-width: calc(6 * var(--upx)); --dna-nitrogenous-base-margin: calc(8 * var(--upx)); --dna-sugar-diameter: calc(15 * var(--upx)); --dna-sugar-border-size: calc(6 * var(--upx)); /* colors */ --color-background: #151515; --color-sugar: #f2f1d5; --color-A: #ffba36; --color-T: #26f826; --color-C: #439ad9; --color-G: #e96451; } /* rotate the dna container for smart mobile devices */ @media (orientation: portrait) { :root { --rotate: -58deg; } } /* to make things look pretty */ html, body { padding: 0; margin: 0; width: 100%; height: 100%; display: block; } body { background: var(--color-background); overflow: auto; } html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0); } /* align the DNA to middle */ .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--rotate)); transform-origin: 50% 50%; } /* DNA is a flex container with n-double helix */ .dna { display: flex; align-items: center; position: relative; height: var(--dna-max-height); } /* helix (nitrogenous base) */ .dna > div { font-size: 0; position: relative; width: var(--dna-nitrogenous-base-width); height: 0; background: linear-gradient(0deg, var(--color-G) 50%, var(--color-C) 50%); display: inline-block; margin: 0 var(--dna-nitrogenous-base-margin); animation: double-helix ease calc(var(--helix-duration) / var(--animation-speed)) calc((var(--i) * var(--helix-iteration-factor)) / var(--animation-speed)) alternate infinite; } .dna > div:nth-child(2n) { background: linear-gradient(0deg, var(--color-A) 50%, var(--color-T) 50%); } @keyframes double-helix { to { height: var(--dna-max-height); } } /* sugar */ .dna > div::before, .dna > div::after { content: ""; position: absolute; left: 50%; width: var(--dna-sugar-diameter); height: var(--dna-sugar-diameter); display: block; border-radius: 50%; background: var(--color-sugar); border: var(--dna-sugar-border-size) solid var(--color-background); box-sizing: content-box; } .dna > div::before { top: 0; transform: translate(-50%, -50%); } .dna > div::after { bottom: 0; transform: translate(-50%, 50%); }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS DNA-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号