html和css结合简单效果

来源：互联网发布：入门红酒知乎编辑：程序博客网时间：2024/05/13 07:44
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>    /* 字体变大  变红*/       span.change:hover{          color: red;           font-size: 50px;       }   /* 旋转*/        a.change:hover{            color: indigo;            -webkit-transform: rotate(-360deg);            -moz-transform: rotate(-360deg);            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);            display:block;            transition:2s;        }        /* 手机旋转半圈*/       img.change:hover{           -webkit-transform: rotate(-25deg);           -moz-transform: rotate(-25deg);           filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);       }    </style></head><body background="imgs/bg.jpg">     <div style="width: 100%">         <div style="width: 50%;float: left">             <h1 style="padding-top: 100px;margin-left: 100px;color: cadetblue"><span class="change">Blue App Template</span></h1>             <h3 style="padding-top: 100px;margin-left: 100px;color: cadetblue"><a class="change" >One page Responsive HTML5 parallax<br> business landing page</a></h3>             <h4 style="padding-top: 100px;margin-left: 100px ;color: snow">Lorem ipsum dolor sit amet,                 consectetur adipisicing elit. Similique autem,<br>atque in voluptatibus repellat nostrum iustoarchitecto vel placeat<br> numquam omnis assumenda.</h4>             <a href="http://frg.wan.360.cn" target="_blank">                 <img style="margin-left: 100px" src="imgs/001.png" height="70" width="286" onmouseover="this. src='imgs/001.png'" onmouseout="this. src='imgs/003.png'"/>             </a>         </div>         <div style="width: 50%;float: left;text-align: center">             <img src="imgs/phone.png" class="change">         </div>     </div></body></html>
阅读全文
0 0