纯CSS实现BIliBili的轮播图滚动

最新推荐文章于 2024-05-14 21:39:49 发布

balck_one

最新推荐文章于 2024-05-14 21:39:49 发布

阅读量761

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_44561526/article/details/125180954

版权

纯CSS实现BIliBILI的番剧推荐轮播图效果

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

纯CSS实现BIliBili的轮播图滚动

在这里插入图片描述

纯CSS实现BIliBili的轮播图滚动

纯CSS实现BIliBili的轮播图滚动
基础css属性
一、轮播图的思路
二、轮播图的代码
- 1.直接复制即可
总结

基础css属性

提示：用到的基础CSS属性：

flex布局

绝对定位相(relative) 相对定位(absolute)

:hover伪类

animation动画效果

一、轮播图的思路

轮播其实就是来回图片切换，可以借助overflow：hidden这个属性来帮助我们隐藏后面多出来的图片，在用定位来展示，加上动画效果就可以实现滚动的轮播图。

二、轮播图的代码

1.直接复制即可

注意：不要启动vscode的本地服务器，用Alt＋B打开网页，或者直接打开网页，图片是直接复制的网络资源，如果是服务器会被跨域处理掉不展示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎关注</title>

  <style>
    *{
   
      padding: 0;
      margin: 0;
    }