花环与动态图片旋转效果。 代码： ＜div align="center"＞
＜style type="text/css"＞.背景图{
border-radius: 50%;
background- image:url(http://img1.oldkids.cn/upload/260811000/u260810070/2015/11/
19/blog_20151119095423533407.gif);
box-shadow: 5px 20px 20px 30px rgba(100,100,0,1);
width: 430px; height: 430px;
}
.花环旋转{
width: 520px; height: 520px;
border-radius: 50%;
position:absolute; left:465px; top:870px;
animation: linear 转动 10s infinite;
}
@keyframes 转动{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
} ＜/style＞
＜div class="背景图"＞
＜div class="花环旋转"＞
＜img src="http://image109.360doc.com/DownloadImg/2022/09/1622/252180997_1_20220916100949588.gif" style="width: 250px; height:150px;" /＞
＜/div＞ ＜/div＞
＜/div＞ 代码解析： border-radius: 50%;......背景图片的轮廓形状。 width: 430px; height: 430px;......背景图片的宽高。
box-shadow: 5px 20px 20px 30px rgba(100,0,0,1);......背景图片的边框。 其中： box-shadow: 属性是规定边框厚度和阴影的，5px 20px 20px 30px 的前三个值表示阴影宽度，后一个值表示边框宽度。当前三个值都为 0px 时，边框则无阴影。rgba(100,100,0,1) 的括号中有四个值，前三个值表示边框颜色，后一个值是表示边框有无的，若后一个值为 0 则边框不存在。 |
