AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS效果集锦（持续更新中）

2017-11-19 1096
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

高亮光弧效果

　　使用CSS3实现的一个高亮光弧效果，当鼠标hover到某一个元素上时，一道光弧从左向右闪过，效果如下：

代码如下：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>light</title>
    <style>
        body{
            margin: 0;
        }
        a.floor{
            display: block;
            height: 475px;
        }
        a.floor:hover:before{
            -webkit-transition: left 1.5s;
            -moz-transition: left 1.5s;
            transition: left 1.5s;
            left: 920px;
        }
        a.floor:before{
            content: "";
            position: absolute;
            width: 80px;
            height: 475px;
            top: 0;
            left: -150px;
            overflow: hidden;
            background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
            background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            -webkit-transform: skewX(-25deg);
            -moz-transform: skewX(-25deg);
        }
    </style>
</head>
<body>
<a class="floor" href="javascript:;">
    <img src="./images/girl.jpg" height="475" width="760" alt="">
</a>
</body>
</html>
复制代码

 

鼠标hover图片突出显示

　　类似于今日头条首页的图片，当鼠标hover到上面的时候会着重显示图片（放大效果）：

 

代码如下：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        body{
            margin: 0;
        }
        .img-wrap {
            width: 194px;
            height: 108px;
            float: left;
            margin-left: 6px;
            background: #e8e8e8;
            border: 1px solid #e8e8e8;
            overflow: hidden;
            cursor: pointer;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .img-wrap img {
            width: 100%;
            height: 100%;
            border: 0;
            -webkit-transition: all .5s ease-out .1s;
            transition: all .5s ease-out .1s;
        }
        .img-wrap:hover img {
            -webkit-transform: matrix(1.04,0,0,1.04,0,0);
            -ms-transform: matrix(1.04,0,0,1.04,0,0);
            transform: matrix(1.04,0,0,1.04,0,0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
<a class="img-wrap" target="_blank" href="/group/6347460154771013889/">
    <img alt="" src="http://p3.pstatp.com/list/640x360/e59000a6ecaab7d1535">
</a>
</body>
</html>
复制代码

 

鼠标hover图片移动

向上移动：

代码：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        body{
            padding: 4rem;
        }
        .img-wrap {
            width: 194px;
            height: 108px;
            display: block;
            cursor: pointer;
        }

        .img-wrap:hover img {
            -webkit-transform: translateY(-5px);
            -moz-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
        }

        .img-wrap img {
            width: 100%;
            height: 100%;
            border: 0;
             -webkit-transition: -webkit-transform .4s ease; 
             transition: -webkit-transform .4s ease; 
            -moz-transition: transform .4s ease,-moz-transform .4s ease;
             transition: transform .4s ease; 
            transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    </style>
</head>
<body>
<a class="img-wrap" href="javascript:;">
    <img alt="" src="http://p3.pstatp.com/list/640x360/11ff00027e781c4f7807">
</a>
</body>
</html>
复制代码

向左移动：

 

将上面CSS样式改成下面即可：

复制代码 
body{
    padding: 4rem;
}
.img-wrap {
    width: 194px;
    height: 108px;
    display: block;
    cursor: pointer;
}

.img-wrap:hover img {
    -webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px);
}

.img-wrap img {
    width: 100%;
    height: 100%;
    border: 0;
     -webkit-transition: -webkit-transform .4s ease; 
     transition: -webkit-transform .4s ease; 
    -moz-transition: transform .4s ease,-moz-transform .4s ease;
     transition: transform .4s ease; 
    transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
复制代码

 

晃动的计算器图标

代码如下：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        body{
            padding: 4rem;
        }
       .calculator{
            margin: -35px auto 30px;
            width: 150px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #ff7200;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 0;
       }
       .calculator:hover{
            background-color: #fb7b14;
       }
       .calculator i{
            display: inline-block;
            width: 12px;
            height: 16px;
            line-height: 1;
            margin-right: 10px;
            vertical-align: middle;
            background: url("cal.png") no-repeat;
       }
       .calculator i.tada{
            -webkit-animation: tada 2s infinite linear;
            -moz-animation: tada 2s infinite linear;
            animation: tada 2s infinite linear; 
       }

       .calculator .calculator-txt{
            line-height: 1;
            vertical-align: middle;
            color: #ff7200;
            font-size: 14px;
       }

       .calculator:hover .calculator-txt{
            color: #fff;
       }

       .calculator:hover i{
            background-position: 0 -16px;
       }
       .calculator:hover i.tada{
            -webkit-animation: ccc 2s infinite;
            -moz-animation: ccc 2s infinite;
            animation: ccc 2s infinite;
       }

       @keyframes tada{
            0% {
                -webkit-transform: none;
                -moz-transform: none;
                transform: none;
            }
            5% {
                -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
                -moz-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
                transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
            }
            10% {
                -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
                -moz-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
                transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
            }
            15% {
                -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
                -moz-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
                transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
            }
            20% {
                -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
                -moz-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
                transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
            }
            25%, 26% {
                -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
                -moz-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
                transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
            }
            100% {
                -webkit-transform: none;
                -moz-transform: none;
                transform: none;
            }
       }
    </style>
</head>
<body>
<div class="calculator">
    <i class="tada"></i><span class="calculator-txt">省钱计算器</span>
</div>
</body>
</html>
复制代码

 

转动的地球

代码如下：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global</title>
    <style tyle="text/css">
        body {
            background-color: #111;
        }
        #earth {
            width: 300px;
            height: 300px;
            background: url(http://users.evtek.fi/~sampsara/3D/Earth-Spec4096.jpg);
            border-radius: 50%;
            background-size: 610px;
            box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
            animation-name: rotate;
            animation-duration: 12s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            -webkit-animation-name: rotate;
            -webkit-animation-duration: 12s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @keyframes rotate {
            from {
                background-position: 0px 0px;
            }
            to {
                background-position: 610px 0px;
            }
        }
        @-webkit-keyframes rotate {
            from {
                background-position: 0px 0px;
            }
            to {
                background-position: 610px 0px;
            }
        }
    </style>
</head>
<body>
    <div id="earth"></div>
</body>
</html>
复制代码

地图图片下载

 

点赞效果

代码如下：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>like</title>
    <style type="text/css">
        img{ 
            /*width: 20px; 
            height: 20px;*/ 
            position: absolute; 
            bottom: 100px; 
            left: 50%; 
            margin-left: -12.5px; 
        }
        .btn{ width: 100px; height: 30px; border:0; background: red; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }
    </style>
    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").on('click', function(){
                $(".demo").append("<img src='love-r.png'>");
                $("img").animate({
                    bottom:"200px",
                    width: "50px",
                    marginLeft: "-25px",
                    opacity:"0"
                }, 1000, function(){
                    $(".demo").empty();
                });
            });
        });
    </script>
</head>
<body>
    <div class="demo"></div>
    <input id="btn1" type="button" class="btn" value="点赞">
</body>
</html>
复制代码

爱心图标下载


本文转自Jaxu博客园博客，原文链接：http://www.cnblogs.com/jaxu/p/5946947.html，如需转载请自行联系原作者


文章标签：
前端开发
JavaScript
Web App开发
关键词：
CSS效果
浣熊干面包
目录
相关文章
夜斗(dou)
|
Web App开发 编解码 移动开发
详细前端面试题CSS篇--持续更新 3
详细前端面试题CSS篇--持续更新
夜斗(dou)
184 0
夜斗(dou)
|
存储 移动开发 前端开发
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新6
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
319 0
夜斗(dou)
|
存储 资源调度 前端开发
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新8
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
386 0
夜斗(dou)
|
存储 Web App开发 移动开发
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新 2
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
576 0
游客yygmekjm7fjue
|
6月前
|
前端开发 JavaScript 容器
CSS保姆级别教程(持续更新)
CSS保姆级别教程(持续更新)
游客yygmekjm7fjue
58 0
夜斗(dou)
|
Web App开发 编解码 弹性计算
详细前端面试题CSS篇--持续更新 2
详细前端面试题CSS篇--持续更新
夜斗(dou)
84 0
夜斗(dou)
|
Web App开发 移动开发 前端开发
详细前端面试题CSS篇--持续更新 1
详细前端面试题CSS篇--持续更新
夜斗(dou)
82 0
夜斗(dou)
|
存储 JSON 缓存
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新7
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
347 0
夜斗(dou)
|
Web App开发 编解码 移动开发
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新 5
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
358 0
夜斗(dou)
|
Web App开发 编解码 弹性计算
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新 4
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
夜斗(dou)
352 0

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    165
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    167
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • HTML5 新特性教程
  • jQuery开发教程

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • JS零基础入门教程（上册）
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    无影云桌面