字体扩大手机旋转

最新推荐文章于 2021-06-10 08:46:08 发布

原创最新推荐文章于 2021-06-10 08:46:08 发布 · 452 阅读

CC 4.0 BY-SA版权

本文展示了一个使用HTML和CSS创建的响应式商业落地页案例——BlueAppTemplate。该页面包含鼠标悬停时字体变大变红的效果、旋转效果及图片倾斜效果。介绍了如何通过:hover伪类和CSS3的transform属性实现这些交互效果。

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