首页 技术 正文
技术 2022年11月23日
0 收藏 923 点赞 2,585 浏览 2277 个字
*{
margin:;
padding:;
}
div{
margin: auto;
width: 800px;
height: 681px;
position: relative;
overflow: hidden;
}
div>img{
width: 100%;
height: auto;
position: absolute;
z-index:;
left: -100%;
animation: out 1s;
}
ul{
position: absolute;
top:560px;
margin: 0 60px;
z-index:;
}
li{
list-style: none;
float: left;
margin-right: 20px;
}
li:last-child{
margin:;
}
li a{
display: inline-block;
background-color: #000;
width: 120px;
height: 102px;
}
li a img{
opacity: 0.8;
width: 100%;
height:auto;
}
li a img:hover{
opacity:;
}
div img:target{
left:;
z-index:;
}
@keyframes sport1{
0%{left: 500px;}
100%{left:;}
}
@keyframes sport2{
0%{top:350px}
100%{top:;}
}
@keyframes sport3{
0%{transform: scale(0.1,0.1);}
100%{transform: scale(1,1);}
}
@keyframes sport4{
0%{transform: scale(2,2);}
100%{transform: scale(1,1);}
}
@keyframes sport5{
0%{transform: scale(0.1,0.1) rotate(-360deg);}
100%{transform: scale(1,1) rotate(0deg);}
}
@keyframes out{
0%{left:;}
100%{left:;}
}
#img1:target{
animation: sport1 0.5s;
animation-timing-function:ease-out;
}
#img2:target{
animation: sport2 0.5s;
animation-timing-function:ease-out;
}
#img3:target{
animation: sport3 1s;
animation-timing-function:ease-in;
}
#img4:target{
animation: sport4 1s;
animation-timing-function:ease-out;
}
#img5:target{
animation: sport5 0.7s;
animation-timing-function:ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS animation 制作一个 Slider</title>
<link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<div>
<img src="600x600bb.jpg" alt="img1" id="img1">
<img src="600x600bb (2).jpg" alt="img2" id="img2">
<img src="600x600bb (5).jpg" alt="img3" id="img3">
<img src="600x600bb (7).jpg" alt="img4" id="img4">
<img src="600x600bb (8).jpg" alt="img5" id="img5">
<ul>
<li><a href="#img1" rel="external nofollow" ><img src="600x600bb.jpg" alt="img1"></a></li>
<li><a href="#img2" rel="external nofollow" ><img src="600x600bb (2).jpg" alt="img2"></a></li>
<li><a href="#img3" rel="external nofollow" ><img src="600x600bb (5).jpg" alt="img3"></a></li>
<li><a href="#img4" rel="external nofollow" ><img src="600x600bb (7).jpg" alt="img4"></a></li>
<li><a href="#img5" rel="external nofollow" ><img src="600x600bb (8).jpg" alt="img5"></a></li>
</ul>
</div>
</body>
</html>

①relative不脱离原文档流,这是和absolute最大的区别

浅谈CSS3中display属性的Flex布局

三里屯柯南

https://www.cnblogs.com/xuyuntao/articles/6391728.html

③z-index和display

④CSS3 :target 选择器

定义和用法

URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

⑤用:hover等伪类改变样式类似于添加样式

⑥animation-fill-mode:forwards

⑦animation 100%{left:0}无过程  100%{transform:rotate(-360deg)}有过程???

⑧overflow:hidden;

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141870.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,090
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,508
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,320
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,314
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,920
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,105
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站