按钮开门效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
height: 100%;
padding: 0 24px;
margin: 0;
color: #515151;
background-color: #FFF9F2;
overflow: hidden;
}
main {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 63px auto;
-webkit-transition: -webkit-transform 0.8s 0.61s ease-out;
transition: -webkit-transform 0.8s 0.61s ease-out;
transition: transform 0.8s 0.61s ease-out;
transition: transform 0.8s 0.61s ease-out, -webkit-transform 0.8s 0.61s ease-out;
}
.hexagon {
position: relative;
width: 80px;
height: 46.19px;
margin: auto;
background-color: #00B4FF;
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 2;
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 23.09px solid #00B4FF;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 23.09px solid #00B4FF;
}
.circle {
position: absolute;
bottom: -12px;
right: -12px;
margin: auto;
width: 24px;
height: 24px;
background-color: #515151;
border-radius: 100%;
z-index: 3;
box-shadow: #FFF9F2 0 0 0 4px;
}
h1 {
opacity: 0;
position: relative;
font-family: "Fredoka One", sans-serif;
font-size: 36px;
text-align: center;
margin: 30px 0 60px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
-webkit-transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out;
transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;
z-index: 1;
}
h1 span {
color: #00B4FF;
}
.open h1 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;
transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;
transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out;
transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;
}
.panel {
position: fixed;
width: 50%;
height: 100%;
background-color: #00B4FF;
z-index: 6;
visibility: visible;
-webkit-transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out;
transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
}
.panel.left {
left: 0;
}
.panel.left:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
content: '';
border-right: 40px solid #FFF9F2;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
height: 46px;
width: 0;
}
.panel.right {
right: 0;
}
.panel.right:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
content: '';
border-left: 40px solid #FFF9F2;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
height: 46px;
width: 0;
}
.panel.right:after {
content: '';
position: absolute;
top: 0;
bottom: -46px;
left: 28px;
margin: auto;
width: 24px;
height: 24px;
background-color: #FFF9F2;
border-radius: 100%;
z-index: 3;
box-shadow: #00B4FF 0 0 0 4px;
}
.open .panel {
opacity: 0.2;
-webkit-transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out;
transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;
}
.open .panel.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.open .panel.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
button {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 80px;
height: 80px;
color: white;
background-color: transparent;
padding: 0 24px;
font-size: 18px;
border: 0;
z-index: 6;
border-radius: 100%;
-webkit-tap-highlight-color: transparent;
}
button:focus {
outline: none;
}
</style>
</head>
<body class=""><!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<main>
<div class="hexagon">
<div class="circle"></div>
</div>
<h1>开门<span>效果</span></h1>
</main>
<div class="panel left"></div>
<div class="panel right"></div>
<button></button>
<script type="text/javascript">
$('button').on('click', function () {
$('body').toggleClass('open');
});</script>
</body>
</html>
.
相关推荐
在实现这个“自动开门”效果时，主要运用了以下几个CSS3的关键技术： 1. **伪类选择器**：CSS3引入了更多的伪类选择器，如`:hover`，用于定义元素在鼠标悬停时的状态。在这个例子中，`:hover`被用来改变按钮的样式...
2. **3D开门效果** (3d-doors.html)：这种效果利用CSS3的`transition`和`transform`属性，使按钮像门一样从中间开启，给人一种新颖的互动感受。 3. **折纸效果** (paper-flip.html)：折纸效果模拟了纸张在三维空间...
1. **HTML结构**：创建HTML页面的基本框架，包括一个按钮元素和用于显示开门效果的门元素。按钮上设置一个唯一的ID，方便JavaScript获取并绑定事件监听器。 2. **CSS样式**：定义门元素的初始状态和动画关键帧。...
【标题】"鼠标悬停开门CSS3动画特效.zip"是一个包含使用CSS3技术实现的鼠标悬停时开启门形动画效果的资源包。这个特效在网页设计中常常用于导航菜单、按钮或者其他交互元素，能够为用户提供更为生动和有趣的互动体验...
本资源提供了一个独特的“鼠标悬停开门”动画效果的源码，适用于网页元素交互，如导航菜单、卡片或者按钮等。这个特效在用户将鼠标悬停在元素上时，会呈现出类似门开启的动态视觉效果，增加了用户体验的趣味性和互动...
`js`目录下的文件可能包含了实现动画效果的JavaScript代码，`css`目录则包含样式表文件，其中定义了3D动画的样式规则。 此外，`fonts`目录可能包含了自定义字体资源，用于提升设计的视觉效果。`images`目录则可能...
综上所述，"带左右控制按钮的jQuery选项卡滑动门特效插件"不仅提供了一种富于交互性的网页组件，还展示了jQuery在实现复杂动态效果方面的强大能力。对于前端开发者来说，掌握此类插件的使用和原理，有助于提升网页的...
创建两个按钮，分别触发开门和关门事件，然后用JavaScript改变车门图片的状态，模拟开闭动作。 7. **事件监听与交互**： 添加事件监听器以响应用户的交互，例如鼠标点击或触摸滑动。这可以用来控制360度旋转的速度...
- 在实现翻书效果时，CSS3的3D变换起着至关重要的作用。通过`transform`属性，我们可以创建出逼真的翻页效果。例如，使用`rotateY()`和`perspective()`可以模拟纸张的翻转角度和深度感。 2. **JavaScript基础**： ...
在本文中，我们将深入探讨如何使用JavaScript（JS）和CSS3技术实现一款滚筒式洗衣机清洗特效。这个特效模拟了真实洗衣机的操作流程，包括填充衣物、开关门、启动和暂停清洗过程，为用户带来生动有趣的交互体验。 ...
总的来说，"jQuery视频网站背景开关灯效果"是一种利用jQuery、CSS和HTML实现的交互式Web特效，旨在优化视频观看体验。开发者可以通过学习这个案例，掌握如何使用JavaScript响应用户操作，并动态改变页面的视觉样式。
这种效果通过JS编程实现了类似卷帘窗缓缓升起或降下的动画，使图片以一种有趣的方式展现出来。 实现JS图片卷帘门效果的核心原理是利用JavaScript控制DOM元素（通常是`<img>`标签）的样式属性，如高度、透明度等，来...
实现这样的开门效果，开发者可能需要用到CSS3的动画和过渡属性。CSS3允许我们创建复杂的动态效果，而无需JavaScript。例如，可以设置两个半扇形的图片或背景，分别代表门的左右两部分，然后通过改变其旋转角度来模拟...
#### 二、CSS伪类实现鼠标效果 除了直接使用HTML事件外，还可以利用CSS伪类来实现类似的鼠标悬停效果。这种方式更加简洁且易于维护。 1. **`:hover` 伪类**： - 描述：表示当鼠标指针悬停在元素上时的状态。 - ...
"芝麻开门博客网.zip"这个压缩包文件似乎包含了一个名为"芝麻开门博客网"的博客网站的资料。虽然没有提供具体的标签，我们可以假设这个博客主要关注的是IT行业的相关内容，特别是可能涉及技术分享、编程知识、网络...
总之，HTML5货车交互订单按钮特效结合了HTML5的语义化标签、CSS3的动画效果和JavaScript的交互功能，提供了一种独特且引人入胜的购物体验。这种技术不仅提升了用户的参与度，也展示了现代网页设计的无限可能性。通过...
1. **ActionScript**：Flash中的编程语言，用于实现动画的交互性和动态效果。在"开门迎福对联flash动画"中，可能用ActionScript编写了点击按钮、动画播放控制等交互功能。 2. **矢量图形**：Flash基于矢量图形，这...
4. **动画和过渡**：CSS的`transition`和`animation`属性可以实现元素状态改变时的平滑过渡和自定义动画效果。在电梯演示中，电梯上下移动、开门关门等动作可以通过动画来增强用户体验。 5. **伪类和伪元素**：`:...
1. **开门**：这个功能模拟了洗衣机门打开的视觉效果，可能通过改变门的透明度、旋转角度或者添加开门动画来实现。例如，使用CSS的`transition`属性可以平滑地改变门的状态。 2. **加满**：这个环节可能是表示向...