It was another week full of hope. Most of the time this week was spent on final review. I didn’t dare to go to bed during early reading. I was always studying English (I was very afraid of losing my English subject). We have said that if you drop a subject once, it will affect your four years of university. More than that, after you drop a subject, there will be corresponding penalties for both the student union and the group. Next step into the topic, talk about this week.
The group study
page has been assessed, and I feel that when I put my page on my own page, I am fine. Fortunately, I am not nervous at all (I was very nervous before). Effective.
Because the recent learning is CSS3 animation learning, but I chose to imitate the official website of Huawei, which has relatively few animation effects, so I found a 3D background on the Internet. The code and comments are as follows:
CSS part
*{
margin:0;padding:0;
}
background {
position: fixed;/*让他绝对定位,让子类始终在窗口的中间*/
width: 100%;
height: 100%;
overflow: hidden;
}
.background .rotate {
position: absolute;/*绝对定位,让旋转的东西始终在页面正中间*/
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 400px;
transform-style: preserve-3d;
/*让子元素位于3D空间中,这个元素是设置在父级元素中的*/
animation: rotate 20s linear infinite;
zoom: 4.2;
/*放大为原来的4倍*/
}
@keyframes rotate {/*动画效果,让3个DIV旋转360度*/
0% {
transform: rotateX(0deg)rotateY(0deg);
}
100% {
transform: rotateX(360deg)rotateY(360deg);
}
}
.background .rotate .sphere {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.background .rotate .sphere span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
background: radial-gradient(#ccc, #fff);/*径向渐变,从灰色到白色*/
border-radius: 50%;/*变圆*/
}
/*形成一个类似于雪花的形状*/
.background .rotate .sphere:nth-child(2) {
transform: rotate(90deg);
}
.background .rotate .sphere:nth-child(1) {
transform: rotate(45deg);
}
.background .rotate .sphere:nth-child(3) {
transform: rotate(-45deg);
}
//让六个span有着不同的角度
.background .rotate .sphere span:nth-child(1) {
transform: rotateY(0deg);
}
.background .rotate .sphere span:nth-child(2) {
transform: rotateY(30deg);
}
.background .rotate .sphere span:nth-child(3) {
transform: rotateY(60deg);
}
.background .rotate .sphere span:nth-child(4) {
transform: rotateY(90deg);
}
.background .rotate .sphere span:nth-child(5) {
transform: rotateY(120deg);
}
.background .rotate .sphere span:nth-child(6) {
transform: rotateY(150deg);
}
html part
<div class="background">
<div class="rotate">
<div class="sphere">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="sphere">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="sphere">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
As the work of the department is preparing for the end of the period, there is very little work in the department recently, and it has been a long time since I saw the seniors in the department. I miss you, it's cold, pay attention to your health, and don't get sick like me.
The study time in the
last part of the study is almost given to the C language. Because there was a mock exam before, I did not take it very badly, so I want to make up for it through these few days. As for English, I recently read the translation exercises that have been behind me (I heard that Uehara will come out, hehe). There is also a modern history, which will still be memorized at that time. I just finished the off-campus practical activities of the modern history class today and I have gained a lot of it.
Ma Yun once said that people must think clearly about three questions: "One, what do you have;" two, "what do you want;" "three, what can you give up". Hope your choice is right.