CSS效果:图片切换
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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="imgBox"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> </div> </body> </html>
CSS:
body{ margin:; padding:; display: flex; justify-content:center; align-items: center; min-height:100vh; } .imgBox{ position: relative; height: 500px; width:500px; overflow: hidden; } .imgBox img{ position: absolute; top:; left:; width:100%; height:100%; background-size: cover; transition: 0.5s; } .imgBox:hover img:nth-child(2){ transform: translateX(-50%) scaleX(2); opacity:; filter: blur(10px); } .imgBox img:nth-child(1){ transform: translateX(50%) scaleX(2); opacity:; filter: blur(10px); } .imgBox:hover img:nth-child(1){ transform: translateX(0) scaleX(1); opacity:; filter: blur(0px); }
效果图:
CSS效果:图片切换的更多相关文章
- css实现图片切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...
- jQuery带缩略图轮播效果图片切换带缩略图
以上为效果图 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行
这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- JS图片切换效果
源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- CSS学习------之简单图片切换
最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
随机推荐
- JS:Window
ylbtech-JS:Window 1.返回顶部 1.happy.js ; (function () { var happyUi = { initHappy: function (type) { ut ...
- Mongodb 副本集的节点详细操作
副本集操作 官方文档:https://docs.mongodb.com/v3.2/reference/method/js-replication/ 1 rs.add(){ _id: <int&g ...
- Drools学习笔记2—Conditions / LHS 匹配模式&条件元素
Rule的LHS由条件元素(Conditional Elements—CE)和匹配模式(Patterns)组成 Patterns被用来指示出fact的字段约束 每个约束必须为true才能让RHS的ac ...
- 使用 Github 和 Hexo 快速搭建个人博客
导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...
- java 多线程系列基础篇(二)
概要 本章,我们学习“常用的实现多线程的2种方式”:Thread 和 Runnable.之所以说是常用的,是因为通过还可以通过java.util.concurrent包中的线程池来实现多线程.关于线程 ...
- 简单cpu web flask mysql
转:http://blog.csdn.net/u010663768/article/details/60632133 python 2.7 cpu入库 #!/usr/bin/python # -*- ...
- C#高级参数params的使用
params,可变参数,使用十分简单,看代码吧. using System; using System.Collections.Generic; using System.Linq; using Sy ...
- Linux系统的安装(centos的下载地址:http://mirror.symnds.com/distributions/CentOS-vault/6.3/isos/i386/,选择:CentOS-6.3-i386-bin-DVD1.iso 这个下载并进行安装)
1.首先打开虚拟机: 在上面的那个按钮旁有一个下拉的符号,点开后会看到一个进入固件的按钮,直接点击进去. 便会进入这个界面: 在这个界面其实我们不需要该任何的东西,但是我们需要进入boot界面看一眼, ...
- memset,memcpy,strcpy的使用与区别
1.memset 原型: extern void *memset(void *buffer, int c, int count); 功能: 把buffer所指内存区域的前count个字节设置成 ...
- queue队列模块
import Queue myqueue = Queue.Queue(maxsize = 10) Queue.Queue类即是一个队列的同步实现.队列长度可为无限或者有限.可通过Queue的构造函数的 ...