HTML+CSS制作DNA双螺旋结构
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS制作DNA双螺旋结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML+CSS制作DNA雙螺旋結構
效果圖如下：
HTML部分源代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>雙螺旋結構</title><link rel="stylesheet" href="style.css"> </head><body><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div><div class="item"><div class="line"></div></div> </body></html>CSS部分源代碼如下：
:root {--background-color: #2c3e50;--line-color: slategray; }* {margin: 0;padding: 0; }body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;flex-direction: column; }.item {position: relative;width: 120px;height: 40px;display: flex;justify-content: center;align-items: center;/* background-color: cadetblue; */ }.item .line {width: 120px;height: 3px;background-color: var(--line-color);animation: line_width_change 1s linear infinite; }@keyframes line_width_change {0%, 100% {width: 100%;}50% {width: 0%;} }.item::before, .item::after {position: absolute;content: "";width: 30px;height: 30px;border-radius: 50%;background-color: yellow; }.item::before {background-color: salmon;left: -15px;animation: circle_move1 2s linear infinite;z-index: 100; }.item::after {background-color: seagreen;right: -15px;animation: circle_move2 2s linear infinite;z-index: 200; }@keyframes circle_move1 {0% {left: -15px;width: 30px;height: 30px;z-index: 100;}25% {width: 25px;height: 25px;}50% {left: 105px;width: 30px;height: 30px;}75% {width: 35px;height: 35px;}100% {left: -15px;width: 30px;height: 30px;z-index: 200;} }@keyframes circle_move2 {0% {right: -15px;width: 30px;height: 30px;z-index: 200;}25% {width: 35px;height: 35px;}50% {right: 105px;width: 30px;height: 30px;}75% {width: 25px;height: 25px;}100% {right: -15px;width: 30px;height: 30px;z-index: 100;} }.item:nth-child(1) .line, .item:nth-child(1)::before, .item:nth-child(1)::after {animation-delay: 0.1s; } .item:nth-child(2) .line, .item:nth-child(2)::before, .item:nth-child(2)::after {animation-delay: 0.2s; } .item:nth-child(3) .line, .item:nth-child(3)::before, .item:nth-child(3)::after {animation-delay: 0.3s; } .item:nth-child(4) .line, .item:nth-child(4)::before, .item:nth-child(4)::after {animation-delay: 0.4s; } .item:nth-child(5) .line, .item:nth-child(5)::before, .item:nth-child(5)::after {animation-delay: 0.5s; } .item:nth-child(6) .line, .item:nth-child(6)::before, .item:nth-child(6)::after {animation-delay: 0.6s; } .item:nth-child(7) .line, .item:nth-child(7)::before, .item:nth-child(7)::after {animation-delay: 0.7s; } .item:nth-child(8) .line, .item:nth-child(8)::before, .item:nth-child(8)::after {animation-delay: 0.8s; } .item:nth-child(9) .line, .item:nth-child(9)::before, .item:nth-child(9)::after {animation-delay: 0.9s; } .item:nth-child(10) .line, .item:nth-child(10)::before, .item:nth-child(10)::after {animation-delay: 1s; }總結
以上是生活随笔為你收集整理的HTML+CSS制作DNA双螺旋结构的全部內容，希望文章能夠幫你解決所遇到的問題。
