代码
<link rel="stylesheet" href="css/style.css">
<title>开门大吉</title>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
css代码
section {
width: 450px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
background: url("../images/timg.jpg") no-repeat;
position: relative;
perspective: 1000px;
}
.door-l,
.door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s;/*两个门都做过度效果*/
}
.door-l {
left: 0;
border-right:1px solid red;
transform-origin:left;/*左侧盒子按左边翻转*/
}
.door-r {
right: 0;
border-left:1px solid red;
transform-origin:right;/*右侧盒子按右边翻转*/
}
.door-l::before,
.door-r::before {/*伪元素就是插入一个元素标签*/
content:"";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50px;/*圆角*/
transform: translateY(-50%);
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
/*鼠标经过section盒子，两个门 盒子，翻转 ratateY*/
section:hover .door-l {
transform: rotateY(-130deg);
}
section:hover .door-r {
transform: rotateY(130deg);
}
结果
image.png
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div>
<img src="images/pu.jpg" height="224px" >
<img src="images/pu1.jpg" height="224px">
</div>
css代码
div {
width: 224px;
height: 224px;
margin: 100px auto;
position:relative;
}
div img {
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);
}
结果
image.png
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div></div>
css代码
div {
width: 100px;
height: 100px;
background-color: pink;
/*animation: go 2s ease 0s infinite alternate; /*引用动画*/
animation: go 5s infinite; /*引用动画*/
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
/*动画名称自定义*/
/*infinite 无限循环*/
}
/*@keyframes 动画名称{} 定义动画*/
@keyframes go {
0% { /*起始位置 等价于刚才的from*/
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(800px, 0, 0);
}
50% {
transform: translate3d(800px, 400px, 0);
}
75% {
transform: translate3d(0, 400px, 0);
}
100% {
transform: translate3d(0, 0, 0);/*100%相当于结束*/
}
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<hr>
<img src="images/qi.jpg" width="100px" >
<hr>
css代码
img {
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向*/
animation: car 5s infinite;
}
/*定义动画*/
@keyframes car {
0% {
transform:translate3d(0, 0, 0);
}
50% {
transform:translate3d(1000px, 0, 0);
}
51% {/*车要掉头，翻转*/
transform:translate3d(1000px, 0, 0) rotateY(180deg); /*如果有多组变形都属于transform 那我们用空格隔开就好了*/
}
99% {
transform:translate3d(0, 0, 0) rotateY(180deg);
}
100% {
transform:translate3d(0, 0, 0) rotateY(180deg);
}
}
结果
image.png
