采用CSS3的动态元素（动画）设计div块的层级式展现

最新推荐文章于 2022-07-01 10:20:20 发布

xuyongsky1234

最新推荐文章于 2022-07-01 10:20:20 发布

阅读量1k

点赞数 1

分类专栏： web前端-学习随记 HTML5+CSS3学习随记文章标签：动画 css3 keyframes animation transform

本文链接：https://blog.csdn.net/u012688910/article/details/41868845

版权

这篇博客介绍了如何运用CSS3的@keyframes规则设计动态效果，当点击页面上的绿色块时，其他元素会从中出现并进行旋转、伸缩和渐变。通过点击这些元素，可以实现颜色模块的替换和消失效果，详细阐述了动画定义、div移动、伸缩、旋转和渐变的实现方法，并附带了代码示例和效果展示。

摘要由CSDN通过智能技术生成

此练习作品是为学习HTML5+CSS3而设计的（如有不好请大家批评指教~~~）。

操作：当页面加载时，点击网页中的绿色块（一层），则有其他几块（二层）从其中央出现并向外延伸并旋转，点击这几块中任意一个颜色模块，则被点击的颜色模块将“逐渐”取代原先一层绿色模块，其余模块将渐变消失！

采用了CSS3的动画@keyframes规则设计div块的移动、伸缩、旋转和渐变：

动画定义：animation:animationName;

div块的移动：

@keyframes keyframeName{

　　from{divInitialLocation:value}

　　to{divEndLocation:value}

}

div块的伸缩:

@keyframes keyframeName{

　　from{transform:scale(multipleValue,multipleValue)}

　　to{transform:scale(multipleValue,multipleValue)}

}

div块的旋转:

@keyframes keyframeName{

　　from{transform:rotateY(angleValue)}

　　to{transform:rotateY(angleValue)}

}

div块的渐变（也是利用动画规则@keyframes和标签元素属性opacity来实现的）:

@keyframes keyframeName{

　　from{opacity:InitialValue}

　　to{opacity:Endvalue}

}

具体代码实现如下：

body部分代码：

<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
</body>

View Code

script部分代码:

关注

专栏目录