CSS3——制作图片翻页的小动画
觉得还挺有意思的嘻嘻~
这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug:
这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法:
在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg) 这句话就好啦!要给他一个初始的位置,这样他就不会乱飞啦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片翻面</title>
<style type="text/css">
.con{
width:249px;
height:299px;
margin:100px auto 0;
position:relative;
transform-style: preserve-3d;
} .pic, .info{
width:249px;
height:299px;
position:absolute;
left:0;
top:0;
/*隐藏背面图片*/
backface-visibility: hidden;
transition: all 1s ease;
/*防止跳变bug*/
transform:perspective(800px) rotateY(0deg) ;
} .info{
width:249px;
height:299px;
background-color: rgb(80,143,22);
text-align: center;
line-height: 299px;
transform: translateZ(2px) rotateY(180deg);
} .con:hover .pic{
transform: perspective(800px) rotateY(180deg);
} .con:hover .info{
transform: perspective(800px) rotateY(0deg);
}
</style>
</head> <body>
<div class="con">
<div class="pic"><img src="data:images/login.jpg" alt="小鸭子"></div>
<div class="info">图片文字说明</div>
</div>
</body>
</html>
效果图:
CSS3——制作图片翻页的小动画的更多相关文章
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- Vue 左右翻页,点赞动画
因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...
- android viewpager 图片翻页例子
使用ViewPager这个类可以轻松实现多个页面的滑动功能 viewpager默认在工具界面上是找不到的,需求添加android-support-v4.jar包: 如果没有找到,需要打开Android ...
- jq小demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序中实现左右滑动图片翻页
页面代码 <swiper class="container" indicator-dots="{{indicatordots}}" autoplay=&q ...
- HTML5+CSS3实现图片可倾斜摆放的动画相册效果
先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...
- vue-router自动判断左右翻页转场动画
前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作 ...
- 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
随机推荐
- 阶段3 1.Mybatis_05.使用Mybatis完成CRUD_2 Mybatis的CRUD-保存操作
增加的方法 修改映射配置 id是方法名 按照原来jdbc的写法 values里面应该是一堆问号,现在这里不能再去写问号了因为要取值 从我们要执行的方法传的参数里面去取值 所以参数的类型我们必须要告诉这 ...
- 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_1 今日课程内容介绍
- HTML真是好东西!
HTML真是好东西! 学习HTML已经两天了,别小看这两天哦,这短短的两天估计要比学校的四周还要长.不仅有教学,还有同学与老师之间的交流,最重要的是自己上机实践的过程.在这个过程中,不仅知道了在HTM ...
- 【Fiddler】开启手机的http或https抓包
fiddler安装 下载fiddler最新版: 默认安装: 打开fiddler工具,默认界面: 选择上方,Tools-→options General界面 HTTPS界面 CONNECTIONS,po ...
- 关于win10系统如何调用debug查看CPU汇编指令和内存
下载安装DOSBox.网上提供下载地址:DOSBOX Debug是DOS(Disk Operating System,磁盘操作系统).windows提供的实模式(8086方式)程序的调试工具.使用它, ...
- scala 使用case 关键字定义类不需要创建对象直接调用
1.必须是使用case 定义object类 package config import org.apache.spark.sql.SparkSession import org.apache.spar ...
- javascript 异常处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Mailx安装与使用
1.卸载sendmail与postfix yum -y install mailx 2.安装mailx yum -y remove sendmail postfix 3.配置mail.rc vim / ...
- 【系统】win10锁屏后,护眼绿自动恢复解决
针对自己电脑(其他人的不晓得),win10锁屏后,重新登录,护眼绿会自动恢复成白色,查询资料需要修改注册表两个地方: 1.计算机\HKEY_CURRENT_USER\Control Panel\Col ...
- [LeetCode] 164. 最大间距
题目链接 : https://leetcode-cn.com/problems/maximum-gap/ 题目描述: 给定一个无序的数组,找出数组在排序之后,相邻元素之间最大的差值. 如果数组元素个数 ...