-
GIAO01
2024-08-17
- 把图片路径改为这个就可以通过了
- 0回答·104浏览
-
weixin_慕虎9268683
2024-03-12
-
住月亮上的猫
2024-01-05
- 老师，我们家这个课后作业怎么这么难啊？？？？？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>制作3D旋转导航</title>
<style>
* {
list-style: none;
}
/*任务一：引入本地字体文件*/
body {
background-color: #edecec;
}
/* basic menu styles */
.nav-menu {
display: block;
background: #74adaa;
width: 950px;
margin: 50px auto 150px;
}
.nav-menu>li {
display: inline;
float: left;
border-right: 1px solid #94c0be;
}
.nav-menu>li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*调用本地字体*/
font-family: 'sansationregular';
font-smoothing: antialiased;
text-transform: capitalize;
overflow: visible;
line-height: 20px;
font-size: 20px;
padding: 15px 30px 15px 31px;
}
.three-d {
/* 任务三、设置3D舞台布景 */
perspective: 200px;
/*任务四、设置3D舞台布景过渡效果*/
transition: all 0.7s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
transform: translateZ(-25px);
transition: all .3s ease-out;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*任务七、给导航设置3D前，与3D后变形效果*/
.front {
transform: rotateX(0deg) translateZ(25px);
}
.back {
transform: rotateX(-90deg) translateZ(25px);
color: #FFE7C4;
}
.front,
.back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #74adaa;
padding: 15px 30px 15px 31px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
background-color: #51938F;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
/*background-image: -webkit-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-ms-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-moz-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-o-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238);*/
}
.nav-menu ul {
position: absolute;
text-align: left;
line-height: 40px;
font-size: 14px;
width: 200px;
transition: all 0.3s ease-in;
transform-origin: 0px 0px;
transform: rotateX(-90deg);
backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu>li:hover ul {
display: block;
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="#" class="three-d active">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Products
<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Contact
<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
</a></li>
<li><a href="#" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>
<ul class="clearfix unstyled drop-menu">
<li><a href="#" class="three-d">
Html5
<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
</a></li>
<li><a href="#" class="three-d">
Css3
<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
</a></li>
<li><a href="#" class="three-d">
JavaScript
<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
</a></li>
<li><a href="#" class="three-d">
Videogames
<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
</a></li>
</ul>
</li>
<li><a href="#" class="three-d">
Shop On-line
<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
</a></li>
</ul>
</div>
</body>
</html>
- 1回答·287浏览
-
住月亮上的猫
2023-12-28
- 我怎么看不懂这个表格呢 ？？？
对父元素中所有子元素进行遍历，子元素个数假如有M个，n的值为从0开始，然后计算表达式的值，如果落在1到元素的总数之间有效，其它无效。往下n的值依次增1继续进行计算，直到计算出表达式的值不在1到M之间就不再算了。
- 1回答·303浏览
-
住月亮上的猫
2023-12-26
- 感觉好像白学了
伪元素（pseudo-elements）是 CSS 的一种机制，允许你通过 CSS 选择器向某些元素的特定部分添加样式。它们表示元素的特定部分或状态，并允许你在不改变 HTML 结构的情况下对其进行样式处理。
常见的伪元素包括
::before和::after。它们允许你在元素的内容前后插入虚拟的元素，并对其进行样式设置。例如：cssCopy codep::before { content: "Before text "; color: blue; }p::after { content: " After text"; color: red; }上述示例中，
p::before会在每个<p>元素的内容前插入带有蓝色文字的虚拟元素，而p::after会在内容后插入带有红色文字的虚拟元素。除了
::before和::after之外，还有其他伪元素，如::first-line（选择元素的第一行文本）、::first-letter（选择元素的第一个字母）等，它们允许你更精确地控制元素的特定部分而无需修改 HTML 结构。伪元素可以在页面中创建虚拟元素，并通过 CSS 对其进行样式设置，这样可以为元素添加装饰、修饰或特殊效果，同时保持 HTML 结构的清晰和完整。
- 1回答·353浏览
-
住月亮上的猫
2023-12-23
- 帮我看看我的代码问题，还有20这个取值是自己定的吗？
啊这！！！我没看到border-imagn后面的值被我不小心删掉了，但是我在任务那里没掉，对比好几次也没错，可是提交他显示出错，为什么啊，还有切割图片这个宽度值为什么是20呢
- 1回答·326浏览
-
恭喜发财兔
2023-05-14
- .wrapper>div:后面没填为什么会影响到.wrapper>p:nth-of-type(2n)
而且，即使在div后面补充好了nth-of-type,仍然会被判断成在全部元素里计算奇数的div并为之赋予背景颜色
- 1回答·552浏览
-
qq_慕UI9250496
2022-12-16
- 这里背景可以用渐变色吗？
测了下，不行
- 1回答·532浏览
-
Prette
2022-08-23
- 感觉这种比较难，马一下
嗯嗯，全部css操作还是很麻烦的。
- 1回答·591浏览
-
qq_慕无忌4562556
2022-08-09
- 使用角度改变渐变方向也可以吧
可以，效果是一模一样的
- 1回答·644浏览
-
让我们结伴而行
2022-07-29
- 为何div的第二行没显示出来呢？
因为有个空格。：empty只针对什么都没有的，包括空格
- 2回答·649浏览
-
qq_慕娘2321139
2022-06-22
- word-wrap怎么用
p.test { word-wrap:break-word; /* 换行 */ word-wrap: nowrap; /* 不换行 */ }- 1回答·675浏览
-
weixin_慕函数4443977
2022-06-01
- 如果想规定超过多少个字就出现省略号怎么办呢？
.line-limit-length {
/* 1.文字不换行 */
white-space: nowrap;
/* 2.溢出的部分隐藏 */
overflow: hidden;
/* 3.文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
}
你可以补充一个width进去，就可以控制超出文字就出现省略号
- 1回答·648浏览
-
慕哥0459333
2022-05-02
- 是默认多少字节换行还是可以设置的
和文本的大小还有容器的大小有关吧
- 1回答·644浏览
-
a8236171
2021-09-21
- 不了解这一行代码的用处
- 1回答·794浏览
-
SwainShao
2021-07-21
- 不太理解哪里错了
11行打错了。。。
- 2回答·683浏览
-
粥可温Ni
2021-04-15
- 两者之间的区别
- 1回答·630浏览
-
这是一个安静的晚上
2021-04-13
- 求大佬解释一下，为什么超出部分不能影藏
- 已采纳 qq_慕标0297594 的回答
因为你是在box1里插入的背景图片，但是把overflow属性写到box2里。但如果把overflow写到box1里，图片高度没有溢出bo1的高度所以也不会隐藏。可以直接把图片插入box2里，如果觉得这样图片不好看，可以试试把图片作为一个单独的元素用定位方式调整位置
- 1回答·582浏览
-
qq_慕标8478427
2021-04-02
- 结构性伪类选择器能用于单标签吗，为什么我的第一个Input是给了值的，第二个是没给值得，为什么都没有改变颜色
:empty伪类选择器匹配没有任何子元素的元素，而input标签里的有没有值和元素内有没有子元素是不同的。
- 1回答·642浏览
-
别喷了我很菜
2021-04-02
- Z轴的方向
- 已采纳 慕梦前来 的回答
是的，就是正对着你的脸的方向
- 1回答·1008浏览
-
星栎
2021-03-25
- 这编程得学多久才能实习？
- 1回答·658浏览
-
入幕三分
2021-03-24
- 我这个为什么没有效果？
- 已采纳 慕先生7352805 的回答
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
第一个去掉center就可以了，第二个由于是默认值，所以把ellipse center去掉就好了
- 3回答·750浏览
-
慕数据3446481
2021-03-19
- 两个并列的class同时用@media只有一个生效，另一个不生效且审查元素找不到相应CSS。
right-contant选择器的两个媒体特性都是max-width: 768px ？这不对吧？
- 1回答·616浏览
-
入幕三分
2021-03-16
- 为什么这个类没有效果？把类换成“div”却可以
- 已采纳 慕田峪8131879 的回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.cc:before {
content: "今天";
}
</style>
</head>
<body>
<div class="cc">吃什么呢</div>
</body>
</html>
- 3回答·620浏览
-
weixin_慕九州9449883
2021-02-23
- 矩阵这一节的内容
因为css3在历史浏览器中会有不兼容的情况，所以
-moz- 是兼容firefox火狐浏览器的
-ms代表IE浏览器私有属性;
-webkit代表chrome、safari私有属性;
-o代表Opera
- 1回答·524浏览
-
ieouewpdfij
2021-02-21
- 怎么改变字体颜色
color
- 1回答·595浏览
-
qq_慕莱坞9224316
2021-02-20
- 动画怎么制作？
看看你属性有没有写漏了
- 1回答·505浏览
-
weixin_慕容6229135
2021-01-24
- 最底下的图一直都是第五张图吗？
为什么我的图片不出来
- 1回答·652浏览
-
weixin_慕容6229135
2021-01-22
- href还有跳转页面的效果了吗？
href值是盒子的id，可以形成一个锚点。在一篇文章中，多个这样的锚点组合起来就相当于书的目录，当我点击它时时，就可以跳转到我需要的位置。
- 2回答·618浏览
-
恰逢暮雪
2021-01-20
- 动画还是不够流畅，感觉有所卡顿。
???????????????
<!DOCTYPE HTML><htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/css"> @importurl("http://www.w3cplus.com/demo/css3/base.css"); @importurl("http://fonts.googleapis.com/css?family=Yesteryear"); html,body { height: 100%; } /*设置背景图片全屏显示，并且居中*/ img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto !important; height: 100%; position: fixed; top: 0; left: 50%; z-index:1; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); } /*设置背景图片从左向右移入显示的动画效果*/ /* Slide Left */ @-webkit-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @-moz-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @-o-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @-ms-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } /*设置背景图像从底部向顶部移入的动画效果*/ /* Slide Bottom */ @-webkit-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @-moz-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @-ms-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @-o-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } /*设置背景图片由小到大放大动画效果*/ /* Zoom In */ @-webkit-keyframes 'zoomIn' { 0% { -webkit-transform: scale(0.1); } 100% { -webkit-transform: none; } } @-moz-keyframes 'zoomIn' { 0% { -moz-transform: scale(0.1); } 100% { -moz-transform: none; } } @-ms-keyframes 'zoomIn' { 0% { -ms-transform: scale(0.1); } 100% { -ms-transform: none; } } @-o-keyframes 'zoomIn' { 0% { -o-transform: scale(0.1); } 100% { -o-transform: none; } } @keyframes 'zoomIn' { 0% { transform: scale(0.1); } 100% { transform: none; } } /*设置背景图像由大到小缩小动画效果*/ /* Zoom Out */ @-webkit-keyframes 'zoomOut' { 0% { -webkit-transform: scale(2); } 100% { -webkit-transform: none; } } @-moz-keyframes 'zoomOut' { 0% { -moz-transform: scale(2); } 100% { -moz-transform: none; } } @-ms-keyframes 'zoomOut' { 0% { -ms-transform: scale(2); } 100% { -ms-transform: none; } } @-o-keyframes 'zoomOut' { 0% { -o-transform: scale(2); } 100% { -o-transform: none; } } @keyframes 'zoomOut' { 0% { transform: scale(2); } 100% { transform: none; } } /*背景图像旋转出现动画效果*/ /* Rotate */ @-webkit-keyframes 'rotate' { 0% { -webkit-transform: rotate(-360deg) scale(0.1); } 100% { -webkit-transform: none; } } @-moz-keyframes 'rotate' { 0% { -moz-transform: rotate(-360deg) scale(0.1); } 100% { -moz-transform: none; } } @-ms-keyframes 'rotate' { 0% { -ms-transform: rotate(-360deg) scale(0.1); } 100% { -ms-transform: none; } } @-o-keyframes 'rotate' { 0% { -o-transform: rotate(-360deg) scale(0.1); } 100% { -o-transform: none; } } @keyframes 'rotate' { 0% { transform: rotate(-360deg) scale(0.1); } 100% { transform: none; } } /*设置背景图像不显示动画效果*/ @-webkit-keyframes 'notTarget' { 0% { z-index: 75; } 100% { z-index: 75; } } @-moz-keyframes 'notTarget' { 0% { z-index: 75; } 100% { z-index: 75; } } @-ms-keyframes 'notTarget' { 0% { z-index: 75; } 100% { z-index: 75; } } @-o-keyframes 'notTarget' { 0% { z-index: 75; } 100% { z-index: 75; } } @keyframes 'notTarget' { 0% { z-index: 75; } 100% { z-index: 75; } } .slider { position: absolute; width: 100%; text-align: center; z-index: 9999; bottom: 100px; } .slider li { display: inline-block; width: 170px; height: 130px; margin-right: 15px; } .slider a { display: inline-block; width: 170px; padding-top: 70px; padding-bottom: 20px; position: relative; cursor: pointer; border: 2px solid #fff; border-radius: 5px; vertical-align: top; color: #fff; text-decoration: none; font-size: 22px; font-family: 'Yesteryear', cursive; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3); } /*任务一、设置不同列表的背景色*/ 写入正确选择器{ background-color: #02646e; } 写入正确选择器{ background-color: #eb0837; } 写入正确选择器{ background-color: #67b374; } 写入正确选择器{ background-color: #e6674a; } 写入正确选择器{ background-color: #e61061; } /*任务二、设置缩略图形状*/ 写入正确选择器{ content:""; display: block; height: 120px; width: 120px; border: 5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -60px; z-index: 9999; top: -80px; } /*任务三、设置缩略图背景图像*/ 写入正确选择器{ background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center; } 写入正确选择器{ background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center; } 写入正确选择器{ background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center; } 写入正确选择器{ background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center; } 写入正确选择器{ background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center; } /*任务四、给缩略图添加蒙板效果*/ 写入正确选择器{ content:""; display: block; height: 120px; width: 120px; border: 5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -60px; z-index: 99999; top: -80px; background: rgba(0,0,0,0.3); } /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/ 写入正确选择器{ opacity:0; } /*任务六、点击综略图，切换背景图*/ /*背景图从左向右出现*/ 写入正确选择器{ z-index: 100; -webkit-animation-name: slideLeft; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name: slideLeft; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name: slideLeft; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -o-animation-name: slideLeft; -o-animation-duration: 1s; -o-animation-iteration-count: 1; animation-name: slideLeft; animation-duration: 1s; animation-iteration-count: 1; } /*背景图从下向上出现*/ 写入正确选择器{ z-index: 100; -webkit-animation-name: slideBottom; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name: slideBottom; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name: slideBottom; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -o-animation-name: slideBottom; -o-animation-duration: 1s; -o-animation-iteration-count: 1; animation-name: slideBottom; animation-duration: 1s; animation-iteration-count: 1; } /*背景图由小到大出现*/ 写入正确选择器{ z-index: 100; -webkit-animation-name: zoomIn; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name: zoomIn; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name: zoomIn; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -o-animation-name: zoomIn; -o-animation-duration: 1s; -o-animation-iteration-count: 1; animation-name: zoomIn; animation-duration: 1s; animation-iteration-count: 1; } /*背景图由大到小出现*/ 写入正确选择器{ z-index: 100; -webkit-animation-name: zoomOut; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name: zoomOut; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name: zoomOut; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -o-animation-name: zoomOut; -o-animation-duration: 1s; -o-animation-iteration-count: 1; animation-name: zoomOut; animation-duration: 1s; animation-iteration-count: 1; } /*背景图旋转出现*/ 写入正确选择器{ z-index: 100; -webkit-animation-name: rotate; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name: rotate; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name: rotate; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -o-animation-name: rotate; -o-animation-duration: 1s; -o-animation-iteration-count: 1; animation-name: rotate; animation-duration: 1s; animation-iteration-count: 1; } /*任务七、设置不显示的背景图层级*/ /* Not Target */ 写入正确选择器{ -webkit-animation-name: notTarget; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name: notTarget; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name: notTarget; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -o-animation-name: notTarget; -o-animation-duration: 1s; -o-animation-iteration-count: 1; animation-name: notTarget; animation-duration: 1s; animation-iteration-count: 1; } </style> </head> <body> <div class="slider"> <ul class="clearfix"> <li><a href="#bg1">Hipster Fashion Haircut </a></li> <li><a href="#bg2">Cloud Computing Services & Consulting</a></li> <li><a href="#bg3">My haire is sooo fantastic!</a></li> <li><a href="#bg4">Eat healthy & excersice!</a></li> <li><a href="#bg5">Lips so kissable I could die ...</a></li> </ul> </div> <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" /> <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" /> <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" /> <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" /> <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" /> </body></html><!DOCTYPE HTML><htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/css"> @importurl("http://www.w3cplus.com/demo/css3/base.css"); @importurl("http://fonts.googleapis.com/css?family=Yesteryear"); html,body { height: 100%; } /*设置背景图片全屏显示，并且居中*/ img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto !important; height: 100%; position: fixed; top: 0; left: 50%; z-index:1; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); } /*设置背景图片从左向右移入显示的动画效果*/ /* Slide Left */ @-webkit-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @-moz-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @-o-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @-ms-keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } @keyframes 'slideLeft' { 0% { left: -500px; } 100% { left: 0; } } /*设置背景图像从底部向顶部移入的动画效果*/ /* Slide Bottom */ @-webkit-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @-moz-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @-ms-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @-o-keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } @keyframes 'slideBottom' { 0% { top: 350px; } 100% { top: 0; } } /*设置背景图片由小到大放大动画效果*/ /* Zoom In */ @-webkit-keyframes 'zoomIn' { 0% { -webkit-transform: scale(0.1); } 100% { -webkit-transform: none; } } @-moz-keyframes 'zoomIn' { 0% { -moz-transform: scale(0.1); } 100% { -moz-transform: none; } } @-ms-keyframes 'zoomIn' { 0% { -ms-transform: scale(0.1); } 100% { -ms-transform: none; } } @-o-keyframes 'zoomIn' { 0% { -o-transform: scale(0.1); } 100% { -o-transform: none; } } @keyframes 'zoomIn' { 0% { transform: scale(0.1); } 100% { transform: none; } } /*设置背景图像由大到小缩小动画效果*/ /* Zoom Out */ @-webkit-keyframes 'zoomOut' { 0% { -webkit-transform: scale(2); } 100% { -webkit-transform: none; } } @-moz-keyframes 'zoomOut' { 0% { -moz-transform: scale(2); } 100% { -moz-transform: none; } } @-ms-keyframes 'zoomOut' { 0% { -ms-transform: scale(2); } 100% { -ms-transform: none; } } @-o-keyframes 'zoomOut' { 0% { -o-transform: scale(2); } 100% { -o-transform: none; } } @keyframes 'zoomOut' { 0% { transform: scale(2); } 100% { transform: none; } } /*背景图像旋转出现动画效果*/ /* Rotate */ @-webkit-keyframes 'rotate' { 0% { -webkit-transform: rotate(-360deg) scale(0.1); } 100% { -webkit-transform: none; } } @-moz-keyframes 'rotate' { 0% { -moz-transform: rotate(-360deg) scale(0.1); } 100% { -moz-transform: none; } } @-ms-keyframes 'rotate' { 0% { -ms-transform: rotate(-360deg) scale(0.1); }- 1回答·597浏览
