百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言
题目地址
利用 CSS animation 制作一个炫酷的 Slider
思路整理
首先页面包含三种东西
- 一个是type为radio的input其实就是单选框
- 二是每个单选框对应的label
- 三是你要用作背景的每个图片
然后具体实现思路是你点击每个label然后出现对应的图片
基本布局
首先是对界面进行布局
<div class="page">
<div class="slider">
<input id="img1" name="img" type="radio" class="view" checked>
<input id="img2" name="img" type="radio" class="view">
<input id="img3" name="img" type="radio" class="view">
<input id="img4" name="img" type="radio" class="view">
<input id="img5" name="img" type="radio" class="view">
<label for="img1" class="img1"></label>
<label for="img2" class="img2"></label>
<label for="img3" class="img3"></label>
<label for="img4" class="img4"></label>
<label for="img5" class="img5"></label>
<div class="image">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.page {
height: 100%;
width: 100%;
background-color: yellow;
}
.slider {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.image img {
height: 100%;
width: 100%;
position: fixed;
left:0;
top: 0;
}
label {
width: 15%;
height: 130px;
background-color: red;
margin-bottom: 50px;
margin-left: 10px;
margin-right: 10px;
filter: brightness(0.8);
cursor: pointer;
z-index: 10;
}
/*去除单选框*/
.view{
display: none;
}
布局没什么要说的,主要是注意一下几点
- html设置成100%使整个页面全屏
- 下面那些窗口我用的是flex布局
- 然后所有的图片都是100%然后相对浏览器定位一下
- label作为我们的选择窗口,对input要设置display:none把他隐藏掉
然后大概的效果是
添加下面label的图片
label.img1 {
background-image: url("001.jpg");
background-size: 100% 100%;
}
label.img2 { }
label.img3 { }
label.img4 { }
label.img5 { }
很简单就是作为背景图片添加到label上面
效果
然后需要鼠标放上去的效果,很简单
label:hover{
filter: brightness(1);
}
加动画
开始重点了首先写keyframes,这个根据excel表来写就可以了,篇幅太大,我只展示一个
@keyframes img1 {
from {
left: -500px;
}
to {
left: 0;
}
}
@keyframes img2 { }
@keyframes img3 { }
@keyframes img4 { }
@keyframes img5 { }
然后就是加checked效果,就是选择了后就产生动画
.view:nth-child(1):checked ~ .image img:nth-child(1) {
animation: img1 .5s ease-out;
display:block;
opacity: 1;
z-index: 4;
}
.view:nth-child(2):checked ~ .image img:nth-child(2) { }
.view:nth-child(3):checked ~ .image img:nth-child(3) { }
.view:nth-child(4):checked ~ .image img:nth-child(4) { }
.view:nth-child(5):checked ~ .image img:nth-child(5) { }
就是点击了这个找到他兄弟节点image然后他的对应个数的子元素来添加动画
然后大概的效果就出来了
你以为这样就成功了?
完成上面的后你就有了一个基本的实现了,但是在你玩的时候你会发现一个bug点击一个新的label然后背景马上变成最后一张图然后在这张图的基础上出现新的图片。按道理之前的那张图应该保留然后出现新的图片。所以还要加上
.view:not(:checked) ~ .image img{
animation: oncheck 1s linear;
}
@keyframes oncheck {
0% {
opacity: 1;
z-index: 3;
}
100% {
opacity: 1;
z-index: 3;
}
}
- 在最开始的时候所有层次都是3,初始选中的那个是4
- 在最开始所有没选中的都经历了下面的动画,保持1s的z-index: 3, 过了一秒钟后都保持到层次是2
- 然后你选择一张图片,这张图片从2变成4,同时开始动画
- 你之前选中的图片从选中到未选中,因为是新来到未选中的,所以就会执行一次未选中的动画,也就是保持1s的z-index: 3
- 这样就实现了上一张图片保持不动等新的图片来了后再恢复
总结
在最开始自己动手写的时候是用的div,然后div没有点击这个效果只有hover,所以之做了一个非常粗糙的。
然后交了作业后看到好多同学是用的js来实现的,感觉js实现是比较简单,然后一般都可以写出来的。
然后看了很多的作业后发现有位大佬采用单选框的特性来写,打开了我的新世界,然后我就参考大佬的完成了作业。
附上我的代码地址
代码
附上我的效果地址
效果
百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider的更多相关文章
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- 对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记
HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...
- 百度前端技术学院(IFE)2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
- 百度前端技术学院task1.10
任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
- 百度前端技术学院-基础-day2
2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...
随机推荐
- Mac查看与修改系统默认shell
Mac查看与修改系统默认shell 查看所有shell cat /etc/shells 输出: # List of acceptable shells for chpass(1). # Ftpd wi ...
- RF(常用关键字)
一.常用关键字 Open Browser [url | browser | alias] 打开浏览器 Close Browser 关闭当前浏览器(不是窗口) Close All B ...
- java基础知识备忘
1.java内存分配 a.寄存器cup -- 暂不涉及 b.本地方法栈 -- 虚拟机调用windows功能用的,比如创建文件夹 c.方法区 -- 存放 .class文件,负责存放方法 d.栈 -- ...
- 跟哥一起学python(4)- 数据类型之Number
本节我们开始学习python的数据类型. 什么是数据类型呢?前面我们提过,所谓的编程,就是控制一系列的数据去完成我们预设的逻辑或者功能.所以,编程语言首先要定义一系列对“数据”的处理规则.这些处理规则 ...
- D. Distance in Tree(树型Dp计数)
\(其实思路都能想到一点,就是去重这里特别麻烦,没有好的思路.\) \(设dp[i][j]为以i为根深度为j的节点数量\) \(dp[parent][j]=\sum{dp[son][j-1]}\) \ ...
- 认识mysql3个基本库
一.3个基本库 数据库初始化安装完毕会有三个基本库mysql .information_schema.performace_schema.作为应用程序开发者,平时较少关注这些数据库尤其是后两者.但是通 ...
- Spark离线日志分析,连接Spark出现报错
首先,我的代码是这样的 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} object ...
- Docker容器映射到宿主机只有tcp6没有tcp问题
问题描述: Docker容器映射到宿主机后,查询端口连接只有tcp6没有tcp,通过ipv4地址连接时无法连接成功. 处理方法: 1.检查是否开启ipv4端口转发 sysctl net.ipv4.ip ...
- 前端面试题-http和https区别
说一下http和https https的SSL加密是在传输层实现的. (1)http和https的基本概念 http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求 ...
- es6中class类的全方面理解
传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...