Css3 双螺旋

DNA

双螺旋

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72

实现分解

<div class="helix">
	<ul class="b">
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
		<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
		<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
		<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
		<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
		<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li>
		<li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li>
		<li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
		<li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li>
		<li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li>
		<li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li>
		<li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li>
	</ul>
</div>

主要布局样式

/* 光点主体 */
.helix > ul li::after {
  content: '';
  display: block;
  height: 2vmin;
  width: 2vmin;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  
  -webkit-animation: helix 2s linear infinite;
  animation: helix 2s linear infinite;
}

/* 1-36 旋转间隔 10deg 背景色 #fff 动画延迟 0.3s */
.helix > ul li:nth-of-type(1) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.helix > ul li:nth-of-type(1)::after {
  background: #fff;
}
.helix > ul li:nth-of-type(1),
.helix > ul li:nth-of-type(1)::after {
  -webkit-animation-delay: -0.33333333s;
          animation-delay: -0.33333333s;
}

/* 37-72 旋转间隔 10deg 背景色 #66c7f4 动画延迟 0.3s */
.helix > ul li:nth-of-type(37) {
  -webkit-transform: rotate(410deg);
          transform: rotate(410deg);
}
.helix > ul li:nth-of-type(37)::after {
  background: #66c7f4;
}
.helix > ul li:nth-of-type(37),
.helix > ul li:nth-of-type(37)::after {
  -webkit-animation-delay: -12.33333333s;
          animation-delay: -12.33333333s;
}

• 注意事项

  1-36 旋转间隔 10deg, 第36个 li 旋转角度是 360deg, 第37个 li 旋转角度应该是 370deg,
  为什么现在样式布局，第37个 li 旋转角度是 410deg ？

  答案：错位，偏移量

主要动画样式

/*白色、蓝色光点交替时的遮罩问题*/
@keyframes update-z-index {
  0% {
    z-index: 1;
  }
  49% {
    z-index: 1;
  }
  50% {
    z-index: -1;
  }
  100% {
    z-index: -1;
  }
}

/*螺旋动画*/
@keyframes helix{
	0% {
	-webkit-transform: translateY(-50%) translateX(0) scale(1);
	        transform: translateY(-50%) translateX(0) scale(1);
	-webkit-animation-timing-function: ease-in;
	        animation-timing-function: ease-in;
  }
  25% {
    -webkit-transform: translateY(-50%) translateX(3.75vmin) scale(1.3);
            transform: translateY(-50%) translateX(3.75vmin) scale(1.3);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: translateY(-50%) translateX(7.5vmin) scale(1);
            transform: translateY(-50%) translateX(7.5vmin) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  75% {
    -webkit-transform: translateY(-50%) translateX(3.75vmin) scale(0.5);
            transform: translateY(-50%) translateX(3.75vmin) scale(0.5);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(0) scale(1);
            transform: translateY(-50%) translateX(0) scale(1);
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

对比布局

<div class="helix">
	<ul class="c">
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
		<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
		<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
		<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
		<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
		<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li>
	</ul>
	<ul class="d">
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
		<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
		<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
		<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
		<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
		<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li>
	</ul>
</div>

优缺点分析

.helix ul.d{
	transform:translate(-50%, -50%) rotateZ(30deg);
	
	top:50%;
	left:50%;
}
.helix ul.d li:after{
	background:#66c7f4;
}

• 对比布局，上面这一段样式，可以减少第37-72个 li 的旋转，颜色，延迟样式，减少几百行样式代码。
• 错位，偏移量通过调整 transform:translate(-50%, -50%) rotateZ(30deg) 即可实现。无需修改第37-72个 li 的旋转角度。

但是也发现了一个问题：光点交替时候的遮罩问题

关于CSS3 动画

值	描述
animation:	name duration timing-function delay iteration-count direction;
name	选择器的 keyframe 名称
duration	完成动画所花费的时间，以秒或毫秒计
timing-function	动画的速度曲线
delay	动画开始之前的延迟
iteration-count	动画应该播放的次数
direction	是否应该轮流反向播放动画

值	描述
transform:	none transform-functions
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵
translate(x,y)	2D 位移
translate(x,y,z)	3D 位移
scale(x,y)	2D 缩放
scale(x,y,z)	3D 缩放
rotate(x,y)	2D 旋转
rotate(x,y,z)	3D 旋转
transform-origin	改变被转换元素的位置
transform-style	被嵌套元素如何在 3D 空间中显示
perspective	为 3D 转换元素定义透视视图
perspective-origin	规定 3D 元素的底部位置
backface-visibility	元素在不面对屏幕时是否可见