CSS3最简洁的轮播图

<!DOCTYPE html>
<html>
<head>
<title>CSS3最简洁的轮播图</title>
<style>
*{margin:0;padding:0;}
.ckl{
   margin:50px auto;
   overflow:hidden;
   height:300px;
   width:700px;
   position:relative;
}
ul{
   list-style:none;
   height:300px;
   width:2800px;
   position:absolute;
  animation: myfirst 20s ease-out infinite alternate;
    -webkit-animation: myfirst 20s ease-out infinite alternate; /* Safari 与 Chrome */
}
ul img{
   width:700px;
   height:300px;
}
.ckl ul li{
   float:left;
   height:300px;
   width:700px;
}
@keyframes myfirst
{
        0%,25% {        left: 0px;       }
        30%,50% {       left: -700px;    }
        55%,75% {       left: -1400px;    }
        80%,100% {      left: -2100px;    }
}
</style>
</head>
<body>
<div class="ckl">
 <ul>
  <li><img src="https://cdn.pixabay.com/photo/2016/11/13/12/52/kuala-lumpur-1820944_960_720.jpg"></li>
  <li><img src="https://cdn.pixabay.com/photo/2014/07/21/18/31/kuala-lumpur-398792_960_720.jpg"></li>
  <li><img src="https://cdn.pixabay.com/photo/2015/08/28/08/06/malaysia-911580_960_720.jpg"></li>
  <li><img src="https://cdn.pixabay.com/photo/2012/02/28/00/39/sunset-17665_960_720.jpg"></li>
 </ul>
</div>
</body>
</html>

时间： 2024-08-24 06:12:35

CSS3最简洁的轮播图的相关文章

css3实现3D切割轮播图案例

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3 3D切割轮播图</title> <style> body { margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style: none; height: 100%; wi

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的css3的3D动画,不过对于不会的人来说,应该还是蛮能唬人的吧,哈. 原理很简单,老规矩,都在注释里面,可以直接复制走代码,粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; marg

作为前端刚入门的小菜鸟,只想记录一下每天的小收获对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的动画 2.animation是一个复合属性包括很多的子属性: animation-name:用来指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes 规则.CSS 加载时会应用animation-name 指定的动画,从而执行动画. animation-duration 用来设置动画

CSS3,3D效果轮播图

---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ht

移动端原生js，css3实现轮播图

一.功能需求 1.自动播放2.滑动切换3.点击切换二.思路分析 html代码: <div class="container"> <ul class="list clearfix"> <li class="item fl item5">图5</li> <li class="item fl item1">图1</li> <li class="

css3无缝轮播图案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } div{ width: 1000px; margin:300px auto; border:1px solid #ccc; overflow: hid

JS+css3焦点轮播图PC端

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js原生web轮播图</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 list-style: none; 11 -moz-user-select: none;/*文字不可选

Web全栈之路 1.CSS3中3D立方体以及3D轮播图

1.3D坐标系 3D坐标可以用左手来模拟,其中大拇指方向默认是X轴正方向,食指方向是Y轴正方向,中指方向是Z轴正方向.注意:当设置transform:rotateX(90deg)时,相当于将X轴转动90°,此时Z轴正方向向上,所以设置transform:translateZ(150px)时,就产生了3D立方体的上面,具体原理可以通过chrome浏览器审查元素来调试. 2.3D视图 transform-style:flat(默认,二维效果) / preserve-3d(三维效果).设置一个元素的t

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=