下面的代码只可以在chrome浏览器下运行才看到效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆角，阴影，旋转，缩放，移动</title>
<style type="text/css">
#box{
position:relative;
width: 120px;
height: 100px;
margin: 10px auto;
top: 200px;
padding: 20px;
background: rgba(204,204,51,.7);
text-align: center;
-webkit-border-radius: 18px; /*设置元素的border的圆角半径，值越大半径就越圆*/
-webkit-box-shadow: 10px 5px pink inset; /*设置元素的阴影效果，距离left 10px top 10px 转换的颜色，inset让阴影在上面显示*/
-webkit-transition:-webkit-transform 1s ,opacity 1s;
}
#box:hover{
/*类似于a标签的hover事件*/
/*-webkit-transform:rotate(360deg),scale(1.2,1.4) ,skew(0.2,0.6) ,translate(100px,50px);*/
-webkit-transform: rotate(360deg);
-webkit-transform: scale(0.5,0.5);
-webkit-transform: translate(50px,30px); /*上面的rotate，scale，translate同时用，后者的会生效，前面的几个不会起作用*/
opacity: 0.5;
}
</style>
</head>
<body>
<div id="box">
<p id="text">this is text;</p>
</div>
</body>
</html>
分享到：
相关推荐
本示例“jquery+css3圆角动画导航”利用了JavaScript库jQuery和CSS3的新特性，为网页创建了一个具有动态效果的圆角导航菜单。下面将详细介绍如何实现这一功能。 首先，CSS3提供了许多新的样式规则，其中圆角边框...
这种方法比使用图像更灵活，且易于缩放和自定义颜色。 在实际应用中，这些按钮可以直接复制CSS样式并根据需要进行调整，适应各种网页设计项目。文件结构包括： 1. `index.html` - 主要展示页面，包含了所有按钮的...
4. **边框与背景**: CSS3允许边框使用渐变、圆角和阴影效果，背景可以设置多个图层，支持背景图像平铺、定位和裁剪，以及背景颜色的线性渐变和径向渐变。 5. **响应式设计**: 媒体查询是CSS3的核心特性之一，它使...
【标题】"纯CSS3实现的带阴影3D浮动按钮源码"是一个示例项目，展示了如何使用现代CSS3技术创建具有阴影效果的三维（3D）浮动按钮。这个源码包提供了一种无需JavaScript介入就能实现动态视觉效果的方法，这对于优化...
- **其他创新效果**：除了以上效果，还有可能包含其他创新的CSS3动画技术，如渐变、阴影、过渡等。 3. **HTML结构**： - 每个`index`文件代表一个特效的示例，可能包含HTML元素如`<div>`和`<img>`，以及内联或...
2. **边框与圆角**：CSS3引入了圆角边框，可以通过`border-radius`属性轻松实现优惠券的圆形或椭圆形边缘，增加设计的美观度和专业感。 3. **渐变和阴影**：使用`linear-gradient`和`box-shadow`属性可以创建出立体...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是本文所提及的“CSS3鼠标悬停按钮阴影缩放特效”。这种特效可以使用户在鼠标悬停在按钮上时，按钮呈现出突出放大并带有...
总结来说，制作一个好看的CSS3网页3D按钮特效，需要熟练掌握和运用CSS3的3D转换、过渡效果、阴影、边框半径以及背景属性。通过精心调整这些属性，我们可以创建出具有高度交互性和视觉吸引力的网页元素，提升用户体验...
- **转换效果**：`transform`属性可以实现旋转、缩放、移动等多种效果，增强交互性。 - **动画**：CSS3的`@keyframes`规则可以创建动画效果，使图标动起来，如旋转、淡入淡出等。 4. **响应式设计** CSS3的...
2D转换包括旋转、缩放、移动和倾斜，使用`transform`属性和对应的函数（如`rotate()`, `scale()`, `translate()`, `skew()`）。3D转换引入了更复杂的变换，如`perspective`和`transform-style`，可用于创建深度感和...
6. **转换（Transforms）**：允许元素进行旋转、缩放、移动和倾斜。 7. **动画（Animations）**：结合关键帧，实现平滑的元素状态过渡。 8. **过滤器（Filters）**：如模糊、饱和度调整、灰度等效果。 9. **多列...
这个“CSS3参考手册”覆盖了以上所有内容，深入浅出地解释了每一个属性的用法和示例，对于开发者来说，无论是初学者还是经验丰富的专业人士，都是一份非常宝贵的参考资料。通过深入学习和实践，你可以掌握CSS3的强大...
CSS3中的3D变换让我们可以对元素进行立体空间的操作，如旋转、缩放、平移等。主要涉及的属性有`transform`、`perspective`和`transform-style`。 - `transform`：定义元素的2D或3D转换，例如`rotateX()`, `rotateY...
6. **阴影和边框效果**：CSS3的阴影效果（box-shadow和text-shadow）可以为视频播放器增加深度感，而边框半径（border-radius）则可创建圆角效果，提升整体美观度。 7. **颜色和透明度**：CSS3支持RGBA和HSLA颜色...
本示例中，我们将深入探讨如何使用CSS3实现鼠标经过导航菜单时的动画效果。 首先，`index.html`文件是网页的主体结构，它包含了HTML元素，如`<nav>`用于创建导航菜单，`<ul>`和`<li>`用于构建菜单项。CSS3的鼠标...
同时，CSS3的transform属性在此发挥关键作用，它可以应用2D或3D转换效果，包括旋转（rotate），缩放（scale），平移（translate）等。 此外，可能还会使用到其他CSS3属性，例如： 1. `border-radius`：用于创建齿轮...
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，如选择器、动画、过渡、阴影、圆角、多列布局等。这些特性使得CSS3成为现代网页设计不可或缺的一部分。 二、CSS3 3D...
CSS3引入了选择器层级、多重背景、边框圆角、阴影、渐变、过渡和动画等新特性。其中，动画是我们在本案例中主要关注的，特别是3D转换功能。3D转换允许元素在3D空间内进行移动、旋转和缩放，从而创造出立体效果。 要...
通过学习这些示例，开发者可以了解到如何组合使用上述CSS3特性来创建自己的气泡按钮特效，并将其应用到实际项目中，提升网站或应用的用户体验。 总之，CSS3气泡按钮特效是一种创新且实用的设计技巧，结合了圆角、...