一、继续完善之前的页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D188_3DPlayerXiatitle><style>*{margin:0px;padding:0px;}body{background:url("image/taobaoFocusPicture.jpg") no-repeat;background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页，无论图片的大小*/overflow:hidden;/*代表的就是超出屏幕不会出现滚动条*/}ul{height: 200px;width: 200px;/*background-color: red;*/top:150px;position:absolute;left:50%;margin-left:-100px;transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*//*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/animation:sport 10s linear 0s infinite normal;/*动画效果*/}ul li {background-color: black;list-style: none;width: 200px;height: 200px;font-size:60px;text-align: center;line-height:200px;position:absolute;left:0;top:0;}ul li:nth-child(1){/*background-color: grey;*/transform:rotateY(60deg) translateZ(200px);/*分别代表Y轴旋转60度，沿着Z轴移动200个像素*/}ul li:nth-child(2){/*background-color: blue;*/transform:rotateY(120deg) translateZ(200px);}ul li:nth-child(3){/*background-color: yellow;*/transform:rotateY(180deg) translateZ(200px);}ul li:nth-child(4){/*background-color: green;*/transform:rotateY(240deg) translateZ(200px);}ul li:nth-child(5){/*background-color: skyblue;*/transform:rotateY(300deg) translateZ(200px);}ul li:nth-child(6){/*background-color: purple;*/transform:rotateY(360deg) translateZ(200px);}ul li image{width: 200px;height: 200px;border:5px solid skyblue;box-sizing:border-box;}ul:hover{animation-play-state: paused;/*鼠标放到上面就停了*/}ul:hover li img{opacity:0.5;/*鼠标放到ul上时，li添加蒙版*/}ul li:hover img{opacity: 1;/*这个就是鼠标放到某个li标签，不添加蒙版*/}@keyframes sport {from {
transform: rotateX(-20deg) rotateY(0deg);}to{transform: rotateX(-20deg) rotateY(360deg);}}
.heart{position:absolute;left:100px;bottom:100px;animation: move 1s linear 0s infinite normal;}@keyframes move {0%{
left:100px;bottom:100px;opacity:1;}50%{left:300px;bottom:300px;opacity: 0;}100%{left:600px;bottom:600px;opacity: 1;}}style>head><body><ul><li><img src="image/play_tennis2.jpg">li><li><img src="image/play_tennis.jpg">li><li><img src="image/line_left.jpg">li><li><img src="image/26alphabet.jpg">li><li><img src="image/content_aside.jpg">li><li><img src="image/wangyi_center.jpg">li>ul><img src="image/baidu_logo.png" class="heart"alt=""><audio src="某一首歌" autoplay="autoplay" loop="loop">audio>自动无限循环播放一个音乐-->body>html>
二、背景尺寸属性
1.定义：背景尺寸属性时CSS3中新增的一个属性，专门用于设置背景图片大小
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D189_AttributeOfBackgroundSizetitle><style>*{margin:0px;padding:0px;}ul{width: 800px;height: 800px;border:1px solid black;margin:0 auto;}ul li{list-style: none;width: 200px;height: 200px;float: left;margin:30px 30px;border:1px solid black;line-height: 200px;text-align: center;}ul li:nth-child(1){background:url("image/mountain.jpg" ) no-repeat;}ul li:nth-child(2){background:url("image/mountain.jpg" ) no-repeat;background-size:200px 100px;/*背景图片的宽度 高度*/}ul li:nth-child(3){background:url("image/mountain.jpg" ) no-repeat;background-size:50% 50%;/*当前这个“框”的宽度和高度的一半*/}ul li:nth-child(4){background:url("image/mountain.jpg" ) no-repeat;background-size:auto 180px;/*宽度的等比拉伸（图片的比例）*/}ul li:nth-child(5){background:url("image/mountain.jpg" ) no-repeat;background-size:180px auto;/*高度的等比拉伸（图片的比例）*/}ul li:nth-child(7){background:url("image/mountain.jpg" ) no-repeat;background-size:content/*首先是等比拉伸，直到宽度和高度有一个占满了这个“框”*/}ul li:nth-child(6){background:url("image/mountain.jpg" ) no-repeat;background-size:cover;/*这张图片首先需要等比拉伸，然后图片必须要覆盖整个“框”*/}style>head><body><ul><li>默认li><li>具体像素li><li>百分比li><li>宽度等比拉伸li><li>高度等比拉伸li><li>coverli><li>containli>ul>body>html>
三、源码：
D188_3DPlayerXia.html
D189_AttributeOfBackgroundSize.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D188_3DPlayerXia.html
https://github.com/ruigege66/HTML_learning/blob/master/D189_AttributeOfBackgroundSize.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
