WEB前端教程：利用 CSS animation 制作一个炫酷的 Slider - 好学星城学习论坛

page contents

WEB前端教程：利用 CSS animation 制作一个炫酷的 Slider

学习 CSS animation keyframes,理解动画中关键帧的概念

课程目标

学习 CSS animation keyframes
理解动画中关键帧的概念
掌握 CSS transform 3D 变形

阅读

编码

观看视频 demo (opens new window)中的效果，通过纯 CSS 实现一个立方体翻转的效果。

hover 的时候，立方体绕着「通过其中心的纵轴」旋转
主区域照片全屏显示，通过底部的缩略图来控制不同的图片切入画面
借助我们提供给你的动效标注 (opens new window)，百分百还原该动效

要求

注意 CSS animation 属性在不同浏览器中的兼容性
请注意代码风格的整齐、优雅
HTML 及 CSS 代码结构清晰、规范
代码中含有必要的注释

作者有话说

Slider 中的图片资源都是我的猫：）学前端是有好处的，可以为你的宠物制作一个在线展示页面

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-31 16:13
阅读 ( 307 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1470 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章