css3（十一）练习动画轮播图

最新推荐文章于 2021-09-30 09:10:29 发布
最新推荐文章于 2021-09-30 09:10:29 发布
阅读量273 收藏 1
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38904347/article/details/82287902
版权
本文详细讲解如何使用CSS3制作动画效果的轮播图，涵盖关键帧动画、过渡效果和定位技巧，助你掌握现代网页动态展示的核心技术。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>zy075</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        div{
            width:782px;
            height:626px;
            margin:0 auto;
        }
        ul{
            position:relative;
        }
        li{
            list-style:none;
            position:absolute;
            left:0px;
            top:0px;
        }
        li:nth-child(1){
            animation:aa 20s linear infinite;
        }
        li:nth-child(2){
            animation:bb 20s linear infinite;
        }
        li:nth-child(3){
            animation:cc 20s linear infinite;
        }
        li:nth-child(4){
            animation:dd 20s linear infinite;
        }
        li:nth-child(5){
            animation:ee 20s linear infinite;
        }
        li:nth-child(6){
            animation:ff 20s linear infinite;
        }
        li:nth-child(7){
            animation:jj 20s linear infinite;
        }
        li:nth-child(8){
            animation:hh 20s linear infinite;
        }

        @keyframes aa{
            0%{opacity:1;}
            10%{opacity:0;}
            20%{opacity:0;}
            30%{opacity:0;}
            40%{opacity:0;}
            50%{opacity:0;}
            60%{opacity:0;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes bb{
            0%{opacity:0;}
            10%{opacity:1;}
            20%{opacity:0;}
            30%{opacity:0;}
            40%{opacity:0;}
            50%{opacity:0;}
            60%{opacity:0;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes cc{
            0%{opacity:0;}
            10%{opacity:0;}
            20%{opacity:1;}
            30%{opacity:0;}
            40%{opacity:0;}
            50%{opacity:0;}
            60%{opacity:0;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes dd{
            0%{opacity:0;}
            10%{opacity:0;}
            20%{opacity:0;}
            30%{opacity:1;}
            40%{opacity:0;}
            50%{opacity:0;}
            60%{opacity:0;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes ee{
            0%{opacity:0;}
            10%{opacity:0;}
            20%{opacity:0;}
            30%{opacity:0;}
            40%{opacity:1;}
            50%{opacity:0;}
            60%{opacity:0;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes ff{
            0%{opacity:0;}
            10%{opacity:0;}
            20%{opacity:0;}
            30%{opacity:0;}
            40%{opacity:0;}
            50%{opacity:1;}
            60%{opacity:0;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes jj{
            0%{opacity:0;}
            10%{opacity:0;}
            20%{opacity:0;}
            30%{opacity:0;}
            40%{opacity:0;}
            50%{opacity:0;}
            60%{opacity:1;}
            70%{opacity:0;}
            100%{opacity:0;}
        }
        @keyframes hh{
            0%{opacity:0;}
            10%{opacity:0;}
            20%{opacity:0;}
            30%{opacity:0;}
            40%{opacity:0;}
            50%{opacity:0;}
            60%{opacity:0;}
            70%{opacity:1;}
            100%{opacity:1;}
        }

    </style>
</head>
<body>
    <div>
        <ul>

            <li><img src="image/1.png" alt=""></li>
            <li><img src="image/2.png" alt=""></li>
            <li><img src="image/3.png" alt=""></li>
            <li><img src="image/4.png" alt=""></li>
            <li><img src="image/5.png" alt=""></li>
            <li><img src="image/6.png" alt=""></li>
            <li><img src="image/7.png" alt=""></li>
            <li><img src="image/8.png" alt=""></li>
        </ul>
    </div>
</body>
</html>
不许偷苹果
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3动画属性练习-小熊跑跑
angry_rooster的博客
06-06 748
小熊跑跑 通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果 图片素材见文末 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
css3练习——动画练习
lqh的博客
07-31 276
用css3动画，仿照千寻浏览器气球的动画效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
练习 css3动画
fantasy_geek的博客
04-16 544
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习 CSS3动画</title> <style type="text/css"> body { background-color : grey; ...
CSS3 animation 练习
weixin_34223655的博客
01-03 204
css3 的动画让 html 页面变得生机勃勃，但是如何用好动画是一门艺术，接下来我来以一个demo为例，来练习css3 animation。 我们先详细了解一下animation 这个属性。 animation-name 这是一个必填的选项，否则无法指定要执行哪一个动画。 animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计，如果...
css3动画 简单轮播图
weixin_43352942的博客
07-07 517
效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <style> * { padding: 0; margi
美食介绍网页，html+css,包括tabs切换，css轮播图
12-24
通过CSS，可以控制轮播图的动画效果，如自动切换、左右滑动等，同时也可以添加控制按钮，让用户手动切换图片。 这个项目被描述为“大一的期末作业”，这暗示了它可能是计算机科学或相关专业学生的初级实践任务，...
网页期末作业【html + css +js+轮播图】
08-12
这个“网页期末作业【html + css + js + 轮播图】”项目就是一个很好的实例，它涵盖了网页制作的几个关键元素，让我们来详细了解一下。 首先，HTML（HyperText Markup Language）是网页的基础，它定义了网页的结构...
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画.rar
12-20
描述可以看博客 https://blog.csdn.net/qq_43757282/article/details/111463274 【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画
CSS动画学习实现轮播图及3D骰子
zxh996的博客
07-04 431
CSS动画学习实现轮播图及3D骰子前言一、CSS动画元素认识1.animation属性2.transition属性二、案例1.轮播图2.3D骰子总结 前言 CSS功能非常强大，可以通过纯CSS实现轮播图功能和3D骰子，在此之前需要先了解CSS是如何实现动画功能的，所以我整理了CSS动画的知识点，帮助大家理解，仅供参考学习。 一、CSS动画元素认识 1.animation属性 代码如下（示例）： <style> div { width: 100
html+css+jQuery实现无缝轮播图（带左右按钮和小圆点）
EricYep的博客
09-30 1674
无缝轮播图是本人在学习jQuery时练习的一个小项目。 本人是利用在第一张之前放最后一张，在最后一张后放上第一张，然后利用浮动将这些图片并排放在一个大的容器中，在jQuery动画中判断当前图片是否是第一张或者是最后一张，然后通过css选择器来改变当前包裹图片的大的div的left值。 以下是代码部分。 HTML部分： <div id="slider"> <div id="imgs" class="clearfix"> <a h
css3 操作练习
03-01
css3 操作练习
CSS动画的练习案列
weixin_46421045的博客
03-14 412
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} .con1{width: 116px;height:19...
关于对CSS动画的练习
谦谦的博客
08-20 300
今天我们使用css3 animation 做一个3D立方图。 CSS样式结构： <title>魔方</title> <link rel="icon" href="./img/logo_32.ico"> <!-- 引入网页标题的图标 --> <style> /* 设置的目前网页背景颜色 */ html{ background-color: black;
css3 动画 简单实现轮播图
weixin_30878361的博客
05-31 149
在这之前，先来看一边animation的属性： @keyframes 创建一个动画 animation 属性是一个简写属性，用于设置动画属性 html代码： <div class="div"></div> css代码： .div{ width: 100%; height: 460px; animation: xm 25s infinite;} @key...
css3动画实现轮播图效果
GongWei_的博客
01-04 786
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <style> *{ margin: 0; padding: 0; } .lunbo{ width: 720px; height: 896px; margin: 100px auto; overflow:
简单css3动画效果练习
伪伪的喵喵。。
03-03 1874
简单css3动画效果练习知识点 简单伪元素的使用 布局练习 动画效果练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="../reset.css"> <!-- <link
css3 html5 3D动画练习
小甜甜专栏
01-10 1874
New Document div{ margin-bottom:10px; width:200px; height:100px; } @keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background:
纯css3animation写一个轮播图
huashenty的博客
11-21 706
纯css动画写一个轮播图 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css动画写轮播图</title> <style> ul,li{ list-style: none; } .box{ ...
CSS动画实现轮播图
MorningDuGe
08-19 2902
关键是将外面的container设置成为相对定位且其width为一个子元素的width，里面的子元素长度设置为count*width，且绝对定位，利用animation实现动画效果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="t
使用JavaScript实现自动轮播图及光标暂停功能
"js实现自动轮播图选项卡效果（光标移入暂停）" ...总结起来，这个项目涵盖了JavaScript基础、DOM操作、事件监听以及CSS动画的基础知识，是学习前端开发时常见的一个练习，有助于理解网页动态效果的实现原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值