案例-开门效果CSS3
<style>
.door {
width: 288px;
height: 153px;
border: 2px solid #333;
margin: 150px auto;
background: url(../img/01.png) no-repeat;
position: relative;
perspective: 500px; /* 设置盒子透明 */
}
.door-l,
.door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: pink;
transition:all 1s; /* 盒子过渡效果 */
}
.door-r{
right: 0;
border-left: 2px solid #333;
transform-origin:right; /* 设置盒子沿right边旋转 */
}
.door-l {
left: 0;
border-right: 2px solid #333;
transform-origin:left; /* 设置盒子沿left边旋转 */
}
.door-l::before,
.door-r::before {
content: "";
position: absolute;
top:50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform:translateY(-50%); /* 设置盒子垂直方向 */
}
.door-r::before{
left:5px;
}
.door-l::before{
right:5px; /* 设置门扣的位置 */
}
.door:hover .door-l{
transform:rotateY(-130deg); }
.door:hover .door-r{
transform:rotateY(130deg); /* 设置门沿Y轴旋转的角度 */ }
</style>
</head> <body>
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
案例-开门效果CSS3的更多相关文章
- flip 翻转效果 css3实现
1.实现代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
- 图片触及翻转效果 css3
实现图片由左向右飞入回到最初设定位置 ,鼠标浮上去旋转显示另一张图片效果: html: <!DOCTYPE HTML> <html> <head> <meta ...
- 遮罩效果 css3
CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...
- 简单的圆形图标鼠标hover效果 | CSS3教程
演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...
- Javascript进阶篇——总结--DOM案例+选项卡效果
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...
- css案例 - 评分效果的星星✨外衣
纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名) ...
随机推荐
- Synchronized 与 ReentrantLock 的区别！
来源:cnblogs.com/baizhanshi/p/7211802.html 之前栈长分享了重入锁的概念:<到底什么是重入锁,拜托,一次搞清楚!>,今天现来深入了解下 Synchron ...
- 关于软件IntelliJ IDEA的使用技巧（二）
二,IntelliJ IDEA的工具栏介绍 2,IntelliJ IDEA菜单栏 (5)code编码 ✌1.Override Methods:覆盖方法 ✌2.Implement Methods:实现方 ...
- 36-python基础-python3-字典与列表的区别
(1)不像列表,字典中的表项是不排序的.名为 spam 的列表中,第一个表项是 spam[0].但字典中没有“第一个”表项. (2)确定两个列表是否相同时,表项的顺序必须相同,但在字典确定两个字典是否 ...
- docker部署一个简单的mian.py项目文件
安装docker yum install -y docker 启动docker systemctl start docker 查询可安装的Python版本,默认centos python 2.7 ...
- 案例-2D会旋转的盒子（rotate）， 会缩放的盒子（scale），动画（animation）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MNIST多图显示--Python练习
在学习TensorFlow框架时,提到用MNIST手写数字数据库进行练习,为了更直观看下里面的数据到底长啥样,用OpenCV(cv2)中的imshow函数来进行显示. 默认已经安装: numpy.te ...
- shell script test指令的测试功能 &和&&,|和|| 区别 变量名赋值=号前后的空格问题（天坑）
小程序告一段落,达到阶段性目标.下一步继续Linux的学习....脑子不够用啊...真费... 书中介绍..检测系统某些文件或者相关属性时,用test指令.. 例如.测试某个文档目录是否存在可以 t ...
- 【学术篇】CF932E Team Work && bzoj5093 图的价值
两个题的传送门 对于CF这道题, 分别考虑每种可能的集合大小, 每个大小为\(k\)的集合数量有\(\binom nk\)个, 所以最后的答案就是 \[\sum_{i=0}^n\binom{n}{i} ...
- DBCP重连的问题及解决办法（转）
本文转载:http://lc87624.iteye.com/blog/1734089,欢迎大家阅读原文. 使用数据库连接池时,免不了会遇到断网.数据库挂掉等异常状况,当网络或数据库恢复时,若无法恢复连 ...
- JAVA二分插入排序