您的位置：首页 > Web前端 > HTML5

HTML5动画和鼠标移动

2017-11-05 18:37 211 查看

鼠标移动上去字体变色中间有图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul,li{

            list-style: none;

        }

        .clear:after{/*在每个.class之后插入新内容*/

            content: "\200B";

            display: block;/*使段落生成行内框，每个框是一个块级元素*/

            height: 0;

            clear: both;/*是图像的左侧和右侧均不出现浮动*/

        }

  /*定义最外层盒子*/

        .box{

            padding: 10px;

            border: 1px solid #000;

        }

  /*定义左侧大图片的样式*/

        .big_pic{

            width: 400px;

            height: 400px;

            background: #999;

            float: left;

            margin: 5px 0;

        }

  /*定义小图片集合样式*/

        .list{

            float: left;

            width: 700px;

        }

  /*定义每一个小图片集合样式*/

        .list li{

            width: 200px;

            height: 200px;

            background: red;

            float: left;

            margin:5px 5px 0;

            text-align: center;

        }

  /*定义小图片下方文字样式*/

        p{

            color: #fff;

            text-align: center;

            margin-top: 30px;

        }

  /*定义每一小个图片样式*/

        .btn{

            display: inline-block;/*定义行内块元素*/

            width: 70px;

            height: 70px;

            border-radius: 50%;/*向块级元素添加圆角边框*/

            background: rgba(0,0,0,.5);/*rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低*/

            margin-top: 50px;

            opacity: 0;/*透明度*/

            transition: all 1s ease;/*变形(transform)、转换(transition)和动画(animation)*/

        }

        li:hover .btn{

            opacity: 1;

        }

        li:hover p{

            color: blue;

        }

    </style>

</head>

<body>

<div class="box clear">

    <div class="big_pic"></div>

    <ul class="list clear">

        <li><span class="btn"></span><p>大国外交</p></li>

        <li><span class="btn"></span><p>大国外交</p></li>

        <li><span class="btn"></span><p>大国外交</p></li>

        <li><span class="btn"></span><p>大国外交</p></li>

        <li><span class="btn"></span><p>大国外交</p></li>

        <li><span class="btn"></span><p>大国外交</p></li>

    </ul>

</div>

</body>

</html>

动画

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#qw{

width:400px; height:300px;}

.div1{

  width:200px; height:100px;

  transform:translate(100px,20px);

  background-color:#E90C10;}

.mydiv{

  width:200px; height:100px;

  background-color:#E90C10;

  transform:rotate(-20deg);

  }

.mydiv2{

  width:200px; height:100px;

  background-color:#E90C10;

  transform:skew(20deg,15deg);

  }



.mydiv3{

  width:200px; height:100px;

  background-color:#E90C10;

  transform:scale(2,0.5);

  }

  #id{

   text-align:center;

   line-height:200px;

   width:200px; height:200px;

   border:1px solid #999;

   padding:0 20px;

   border-radius:100%;

   box-shadow:3px 3px 4px 5px #18A15F;

   text-shadow:7px 7px 5px #EF2A05;

   font-size:28px;

   background-color:#49ADD6;

   }



</style>

</head>

<body>



<div id="id">

文字

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航