如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
html+css3+jquery环形3D立体围绕方式旋转
html css3 jquery环形3D立体围绕方式旋转
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
书写hmtl代码。
h1>/h1>
ul>
li class="monolith">span>Other Things/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
li class="mover">span>Thing/span>/li>
/ul>
书写css代码。
* { margin: 0; padding: 0; }
html { padding: 0; margin: 0; }
body { font-family: Palatino, Georgia, "Times New Roman", serif; padding: 0; margin: 0; font-size: 1em; }
h1 { font-size: 4em; letter-spacing: -1px; margin: 1em 0 0.5em; text-align: center; }
.interact { border-top: 1px solid #ccc; margin-top: 3em; margin-bottom: 4em; padding-top: 1.5em; text-align: center; }
.interact a { background-color: #2179b6; border-bottom: 1px solid #084d7d; color: #eee; font-family: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Arial, sans-serif; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; text-decoration: none; padding: 8px 14px; margin: 0 1em; }
.interact p { font-style: italic; color: #666; }
.return { font-size: 1.5em; text-align: center; }
.return a { color: #2179b6; text-decoration: none; }
.return a:hover { text-decoration: underline; }
ul { list-style: none; padding: 0; margin: 0 auto; width: 36em; height: 26em; }
li { height: 8em; width: 8em; background-color: #fff; text-align: center; cursor: pointer; border: 1px solid #bbb; -webkit-border-radius: 4em; -moz-border-radius: 4em; -ms-border-radius: 4em; -o-border-radius: 4em; border-radius: 4em; }
li.roundabout-in-focus { cursor: default; }
li span { display: block; padding-top: 3.5em; }
.monolith { background-color: #222; color: #fff; text-align: center; width: 300px; height: 400px; position: absolute; z-index: 260; left: 135px; border-color: #222; opacity: 0.92; }
#carbonads-container { clear: both; margin-top: 1em; }
#carbonads-container .carbonad { margin: 0 auto; }
书写并添加js代码。
script src="js/jquery.js">/script>
script src="js/a.js">/script>
script>
$(document).ready(function() {
$('ul').roundabout({
minZ: 100,
maxZ: 300,
minOpacity: 1,
minScale: 0.6,
childSelector: '.mover',
tilt: -4
});
});
/script>
代码整体结构。
查看效果。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 438 HTML