HTML连载78-3D播放器下、背景尺寸属性

2020-03-28 16:00:37来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML连载78-3D播放器下、背景尺寸属性

一、继续完善之前的页面

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D188_3DPlayerXia</title>

    <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_AttributeOfBackgroundSize</title>

    <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>cover</li>

    <li>contain</li>

</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/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

 

 


原文链接:https://www.cnblogs.com/ruigege0000/p/12585316.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Cookie SameSite属性介绍及其在ASP.NET项目中的应用

下一篇:html有序无序自定义列表