css3鼠标悬浮,盒子向上移动
2020-05-02 207 分享

鼠标悬浮,盒子向上移动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片悬浮向上</title>
    <style>
        #box{
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
        }
       
        #box:hover {
            -webkit-transform: translateY(-30px);
            -moz-transform: translateY(-20px);
            -ms-transform: translateY(-10px);
            transform: translateY(-15px);
        }
    </style>
</head>

<body>
<div id='box' style="width: 300px;height: 400px;margin: auto;text-align: center;background: red">
是非得失
</div>
</body>
</html>


相关推荐
css3鼠标悬浮图片左右摇晃
鼠标悬浮,图片左右摇晃
2020-05-02188分享
css3鼠标悬浮,盒子向上移动
鼠标悬浮,盒子向上移动
2020-05-02208分享
前端文字过多,以省略号自动截取
text-overflow: ellipsis;/*文本超出以...显示*/ overflow: hidden;/*超出盒子隐藏*/ white-space: nowrap;/*强制在第一行显示*/
2020-05-02216分享
CSS3 文字阴影
CSS3 文字阴影 text-shadow属性
2020-05-02176分享
HTML5表单list属性
<input type="text" list="url_list" > <datalist id="url_list">    <option value="测试">    <option value="数据">    <option value="不知道"> </datalist>
2020-05-02193分享
HTML5新增标记(有利于维护,以及浏览器解析,有利于搜索引擎爬取)
html新增常用标记(有利于维护,以及浏览器解析,有利于搜索引擎爬取)下面列出个别常用 :
2020-05-02153分享
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程,可以自定义)
CSS3的transform:scale(1.4)可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性过渡时间。 这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发.
2020-05-02190分享

联系站长 : 17620917002
站长邮箱 : 425158482@qq.com
问题咨询 : QQ 425158482
系统长期维护,放心使用

备案号:蜀ICP备19015811号-3

案例展示
电脑展示 手机展示
首页
系统
笔记
登录