【聊代码】第一一三集 css样式（之八十三）音画《东方中国龙》

pfm 2022-09-22 发布于广东

展开全文

聊代码（第一一三集）css样式（之八十三）

下面是《东方中国龙》图，在本帖，我们把前面聊过的移动标签融入到了css动画中，同时还添加了隐形音乐播放器，朋友们从中可以看到，要制作动画，让画面具有动感，会牵扯到许多方面，可能用到flash，用到ps，用到在线制作，用到美图看看等其它处理图片的软件，要对各种素材进行处理，我们制作音画是一种综合性的工作。通过本帖，朋友们还会看到，如果会制作动画，制作音画就是易如反掌的事了，你只需要注意音与画的统一，加个隐形音乐播放器就大功告成。请看下图效果。

聊代码已过百集，仅css样式本集就已是八十三集了，可见css样式的内容是多么的丰富，用css样式制作动画，不仅快捷，而且花样繁多，千姿百态。当我们掌握了css样式，我们的音画就不会总是千篇一律的老面孔了，因为逐帧动画规则会大显身手，可以呈现出五穷尽的艺术效果。从本集开始，我就搞些有代表性的音画展示给朋友，以期抛砖引玉。

东方中国龙

代码：

＜style type="text/css"＞.背景图{
width: 540px; height: 540px;
border-radius: 50%;
background-image:url(http://www.oldkids.cn/upload/2018/12/09/blog_
20181209220258467.jpg);
}
.转环及旋转龙{
width: 540px; height: 540px;
box-shadow: 0px 0px 80px 40px rgba(200,130,0,1);
border-radius: 50%;
transform-origin: 50% ;
animation: linear mymove 20s infinite;
}
@keyframes mymove{
from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}
}
.中国龙{
position: absolute;
height: 120px; width: 600px; /*文字范围*/
left:420px; top:1370px; /*文字定位*/
font-size:40px; /*文字大小*/
color:#ff00ff; /*文字颜色*/
font-weight:bold; /*文字粗体*/
animation-delay: 0.2s; /*延迟时间*/
animation-iteration-count:infinite ; /*循环次数*/
animation-duration: 20s; /*动画一个周期的持续时间*/ }
＜/style＞
＜div class="背景图"＞
＜div class="转环及旋转龙"＞
＜img src="http://www.oldkids.cn/upload/2018/12/09/blog_
20181209213628759.png" /＞＜/div＞
＜div class="中国龙"＞
＜div＞＜marquee scrollamount="4"＞东方中国龙＜/marquee＞＜/div＞
＜/div＞
＜/div＞
＜/div＞