HTML5旋转放大综合练习

最新推荐文章于 2021-09-25 14:56:19 发布

Gemini_骑士

最新推荐文章于 2021-09-25 14:56:19 发布

阅读量328

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_39923392/article/details/78443904

版权

<style>
/*这是写的一些样式*/
            body{
                margin: auto;
                background-image: url(img/qweqeqeq.jpg);
            }
            #bg{
                margin: auto;
                width: 1420px;
                height: 760px;

            }
            .bgimg{
                margin-top: 75px;

            }
            .kw{
                width: 520px;
                height: 40px;
                margin-top: 25px;
            }
            .kw:hover{
                transform: scaleY(1.5);
            }
            .tu:hover{
                transform: scale(1.5,1.5);
            }
            .btn{
                width: 100px;
                height: 45px;
                color: white;
                background-color: #3388ff;
                margin-left: -8px;
                border: none;
            }
            .btn:hover{
                transform: scale(2,2);
                color: red;             
            }
            #imgs_1{
                margin-top: 100px;
                margin-bottom: 10px;
                padding-left: 5px;
            }
            #imgs_2{

                padding-left: 5px;
            }
            .feng:hover{
                transform: scale(1.5);
            }
            .qing:hover{
                transform: skew(50deg);
            }
            .zhuan_shun{
                animation: move 3s infinite linear;

            }
            @keyframes move{
                from{}
                to{
                    transform: rotate(360deg);
                }
            }
            .zhuan_ni{
                animation: begin 3s infinite linear;

            }
            @keyframes begin{
                from{}
                to{
                    transform: rotate(-360deg);
                }
            }
        </style>

    <script>

/*定义的一些方法*/
            function move(){
                var div=document.getElementById("imgs_1");
                div.setAttribute("class","zhuan_shun");
            }
            function none(){
                var div=document.getElementById("imgs_1");
                div.setAttribute("class","first");
            }
            function begin(){
                var div=document.getElementById("imgs_2");
                div.setAttribute("class","zhuan_ni");
            }
            function end(){
                var div=document.getElementById("imgs_2");
                div.setAttribute("class","second");
            }
        </script>

</head>
<body>
    <center>
    /*这是大的一个背景*/
        <div id="bg" >
            <img class="bgimg" src="img/baidu.png" /><br />
            /*输入框*/
            <input type="text"  class="kw"/>
            <img src="img/1_07.jpg" class="tu" style="position: absolute;top: 380px;left: 1145px;"/>
            <input class="btn" type="button" value="百度一下" />
            <div id="imgs_1" class="first">
                <img src="img/1_11.jpg" onmouseover="move()" onmouseleave="none()"/>
                <img src="img/1_13.jpg" />
                <img src="img/1_15.jpg" />
                <img src="img/1_17.jpg" />
                <img src="img/1_19.jpg" />
            </div>
            <div id="imgs_2" class="second">
                <img src="img/1_26.jpg" onmouseover="begin()" onmouseleave="end()" />
                <img src="img/1_27.jpg" />
                <img src="img/1_28.jpg" class="feng" />
                <img src="img/1_29.jpg" class="qing"/>
                <img src="img/1_30.jpg" />
            </div>
        </div>
    </center>
</body>

如果图片不是一样大的话还可以在<style></style>中定义一个属性来规定图片的大小

这里写图片描述

就是这样的来给图片设置宽高

Gemini_骑士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5旋转放大综合练习

第一周周考模拟<style>/*这是写的一些样式*/ body{ margin: auto; background-image: url(img/qweqeqeq.jpg); } #bg{ margin: auto;
复制链接

扫一扫