CSS实例：翻转图片、滚动图片栏、打开大门
CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。
效果图如下：
具体的步骤如下：
1、写出页面主体，
<div>
<img src="Images/b.jpg" alt="">
<img src="Images/c.jpg" alt="">
</div>2、通过定位使两张图片叠加在一起
div img {
width: 250px;
height: 170px;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}3、设置第一张图片背面不可见
div img:first-child {
z-index: 1;
backface-visibility: hidden;
}4、添加旋转180度
div:hover img {
transform: rotateY(180deg);
}完整代码：
<!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=edge">
<title>Document</title>
<style>
/* backface-visibility */
div {
width: 250px;
height: 170px;
margin: 100px auto;
position: relative;
}
div img {
width: 250px;
height: 170px;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="Images/b.jpg" alt="">
<img src="Images/c.jpg" alt="">
</div>
</body>
</html>更多项目实战视频，免费分享，加入我的前端学习qun：784783012 点击：加入
CSS 滚动的图片栏
网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。
主要原理是通过动画向左移动。
首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，
这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。
具体步骤如下：
1、设置主体代码各处两组一样的图片
<nav>
<ul>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
</ul>
</nav>2、设置nav的大小，宽度为一组图片相加的宽度，高度为图片的高度。
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
}3、设置ul大小，宽度为nav的两倍，高度与nav相同，并指定动画相关属性
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}4、定义动画，主要是向左移动一组图片的长度
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}5、增加鼠标悬停，动画暂停的效果
ul:hover {
animation-play-state: paused;
}6、最后给nav 增加 overflow：hidden 使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了
完整代码如下：
<!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=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
img {
width: 250px;
height: 170px;
float: left;
}
ul:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
</ul>
</nav>
</body>
</html>CSS 打开大门
主要运用到了3D旋转和定位技术。
效果如下：
具体步骤如下：
1、首先在页面主体加三个很简单的div标签：
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>2、给外层盒子（.door） 加上基本的属性、背景、视距以及相对定位（子盒子要用到绝对定位，所以父盒子最好 加上相对定位）。
.door {
width: 450px;
height: 450px;
border: 1px solid #000000;
margin: 100px auto;
background: url(Images/men.png) no-repeat;
background-size: 100% 100%;
position: relative;
perspective: 1000px;
}3、给左右的门设置相关属性，这里给出左盒子的 相关属性。右盒子只需将定位改为右边距离为0，以及将旋转轴改为右侧即可。
.door-l {
width: 50%;
height: 100%;
background-color: brown;
position: absolute;
top: 0;
transition: all 0.5s;
left: 0;
border-right: 1px solid #000000;
transform-origin: left;
}4、添加门上的 小圆环，在这里是使用伪元素 before 进行添加的。
（1）、设置大小与边框
（2）、设置border-radius 为50% 让其变成圆形。
（3）、设置定位 垂直居中并靠里面有一定距离。
.door-l::before {
content: "";
border: 1px solid #000000;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
right: 5px;
}5、最后设置旋转度数，我这里是设置了120度（注意度数的正负代表旋转方向）
.door:hover .door-l {
transform: rotateY(-120deg);
}完整代码如下：
<!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=edge">
<title>Document</title>
<style>
.door {
width: 450px;
height: 450px;
border: 1px solid #000000;
margin: 100px auto;
background: url(Images/men.png) no-repeat;
background-size: 100% 100%;
position: relative;
perspective: 1000px;
}
.door-l,
.door-r {
width: 50%;
height: 100%;
background-color: brown;
position: absolute;
top: 0;
transition: all 0.5s;
}
.door-l {
left: 0;
border-right: 1px solid #000000;
transform-origin: left;
}
.door-r {
right: 0;
border-left: 1px solid #000000;
transform-origin: right;
}
.door-l::before,
.door-r::before {
content: "";
border: 1px solid #000000;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
.door:hover .door-l {
transform: rotateY(-120deg);
}
.door:hover .door-r {
transform: rotateY(120deg);
}
</style>
</head>
<body>
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
</html>更多项目实战视频，免费分享，加入我的前端学习qun：784783012 点击：加入
CSS实例：翻转图片、滚动图片栏、打开大门的更多相关文章
- !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- 实例源码--Android图片滚动切换效果
下载源码 技术要点: 1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- CSS hack前传——背景图片全屏
在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...
- 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径，滚动图片(网上找的,未经试验,但觉得比较好)
获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
随机推荐
- MySQL：Win10系统中设置默认编码为UTF-8
Win10 系统下 Mysql 字符集(utf8)的设置 补充: 在[mysqld]下添加语句:init_connect='SET collation_connection = utf8_unicod ...
- 解决select 下拉框运行时总会有一个空值(空选项)的问题
项目中用到很多下拉选项都会多出一个空选项,如图运行结果 总会有一个空值出现,解决办法如下: 效果如下: 添加图中框选的代码即可,我是在Angularjs中使用的,在不用框架的情况下: <opti ...
- linux添加串口权限
通过添加到用户组的方式实现1.由于tty属于"dialout"组别,比如你的用户名是blue, 先命令查看下用户隶属的组别 groups blue 2.如果没有隶属"di ...
- LeetCode-022-括号生成
括号生成 题目描述:数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https ...
- Linux CentOS7.X- 添加用户
1.创建用户 useradd username 其中,username是要创建用户的用户名(root使用): 2.设置密码 passwd username 其中,username是指定要修改密码的用户 ...
- CentOS安装时，软件选择（Software Selection）项介绍
要指定软件包将被安装,选择软件时选择安装摘要屏幕.包组分为基础环境.这些环境是预先定义的一组具有特定用途的软件包:例如,在虚拟化主机环境中包含的一组所需的系统上运行的虚拟机软件程序包.只有一个软件环境 ...
- git报错error: RPC failed; HTTP 500 curl 22 The requested URL returned error: 500
报错 $ git push; Enumerating objects: 1002, done. Counting objects: 100% (1002/1002), done. Delta comp ...
- Laravel-多条件检索方案
控制器 public function index(Request $request) { $status = $request->input('status'); $title = $requ ...
- LGP4001题解
题目大意 给定一张无向图,需要消耗代价才能使一条边被[数据删除],求使这张图不连通的最小代价. 一看就是最小割的应用啊... 从 \(u\) 到 \(v\),边权为 \(w\) 的边,建两条:一条从 ...
- Windows下载安装RabbitMQ教程-------报错卸载重新安装 （要卸载干净 -看下文）
Could not update enabled plugins file at c:\Users\忙聸鹿忙聳掳忙聰戮\AppData\Roaming\RabbitMQ\enabled_plugins ...