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款很好 ...
随机推荐
- ASP.NET Core 6框架揭秘实例演示[15]：针对控制台的日志输出
针对控制台的ILogger实现类型为ConsoleLogger,对应的ILoggerProvider实现类型为ConsoleLoggerProvider,这两个类型都定义在 NuGet包"M ...
- .NET 6: New DateOnly and TimeOnly strcuts
Background and Motivation .NET 目前有用于处理日期和时间的DateTime和DateTimeOffset.但在许多情况下,用户需要处理日期而根本不关心时间部分,也存在需要 ...
- 【故障公告】龙卷风来袭：突增的并发请求，撑不住的CPU
(上图是数据库连接数监控图) 非常抱歉,今天下午 16:50-17:40 期间,一场龙卷风突袭园子,突增的并发请求狂卷博客站点的 pod,由于风力巨大(70%左右的增量),pod 的 cpu 不堪重负 ...
- CodeReview规范
目标和原则 提高代码质量,及早发现潜在缺陷,降低修改/弥补缺陷的成本 促进团队内部知识共享,提高团队整体水平 评审过程对于评审人员来说,也是一种思路重构的过程,帮助更多的人理解系统 是一个传递知识的手 ...
- V8 引擎的垃圾回收机制
V8 引擎将内存分为新生代和老生代 由于不同对象的生存周期不同,只用一种回收策略来解决问题,这样效率会很低.所以V8采用了一种代回收的策略,将内存分为两个生代:新生代(new generation)和 ...
- LGP6667题解
既然看到了这道"板子",那还是来写一下题解吧... 如果有机会希望能推一下 载谈binominial sum 的做法. \[\sum_{k=0}^nf(k)\binom n kx^ ...
- 女朋友问我深浅copy到底是什么？
深浅拷贝 列表存放值的时候,是先申请一块内存空间,存放索引和内存地址的对应关系,其实通俗的来说列表内不存真正的值,是一种间接存放的对应关系: 列表内存不可变类型的数据 就比如说,如果现在将L列表索引0 ...
- ClickHouse镜像在阿里云镜像站首发上线
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 简介 ClickHouse是开源.高性能的列式OLAP的数据库管理系统(DBMS).使用SQL进行实时分析. ClickHouse可以做用户行为分析 ...
- 【Jenkins】基于Windows系统安装Jenkins
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.Jenkins简介 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种 ...
- ESP8266 NodeMCU引脚说明，CH340和CP2102两款
开发ESP8266 NodeMCU GPIO功能时,虽然知道ESP8266 NodeMCU丝印引脚编号如下图所示(CP2102款),但是和实际对应的GPIO编号完全不一样. CP2102款 引脚说 ...