2021-06-26 使用animation动画与CSS3d变形属性设置一个万花筒相册

最新推荐文章于 2024-07-15 16:36:52 发布

原创最新推荐文章于 2024-07-15 16:36:52 发布 · 362 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #animation #html #js #css3

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS创建动态万花筒效果的方法。通过设置图片的旋转角度和利用CSS动画，使得图片组合成的图形能够进行旋转。同时，当鼠标悬停在图片上时，可以暂停旋转。

<!--设置图片的div属性-->
<div class="box">
    <div style="transform: rotateY(0deg) translateZ(275px);"><img src="1.jpg"></div>
    <div style="transform: rotateY(40deg) translateZ(275px);"><img src="2.jpg"></div>
    <div style="transform: rotateY(80deg) translateZ(275px);"><img src="3.jpg"></div>
    <div style="transform: rotateY(120deg) translateZ(275px);"><img src="4.jpg"></div>
    <div style="transform: rotateY(160deg) translateZ(275px);"><img src="5.jpg"></div>
    <div style="transform: rotateY(200deg) translateZ(275px);"><img src="6.jpg"></div>
    <div style="transform: rotateY(240deg) translateZ(275px);"><img src="7.jpg"></div>
    <div style="transform: rotateY(280deg) translateZ(275px);"><img src="8.jpg"></div>
    <div style="transform: rotateY(320deg) translateZ(275px);"><img src="9.jpg"></div>
</div>

css:

* {padding: 0;margin: 0;}
img {width: 200px;height: 300px;}
body {background-color: #333333;}
/* 设置动画效果 */
@-webkit-keyframes fn {
    /* 开始时的角度 */
    0% {transform: rotateX(-15deg) rotateY(0deg);}
    /* 结束时的角度 */
    100% {transform: rotateX(-15deg) rotateY(360deg);}
}
/* 设置box的属性，动画效果定义等 */
.box {
    width: 200px;
    height: 300px;
    position: relative;
    margin: auto;
    margin-top: 150px;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    /* 动画名称为fn，动画时间为10s */
    animation: fn 10s;
    /* 动画效果无限循环 */
    animation-iteration-count: infinite;
    /* 线性动画 */
    animation-timing-function: linear;
    /* 相对布局 */
    position: relative;
}
/* 鼠标移动到图片，停止旋转 */
.box:hover { animation-play-state: paused;}
/* 设置图片div的属性 */
.box div {width: 200px;height: 300px;position: absolute;left: 0;top: 0;}