css动画小效果

最新推荐文章于 2024-05-23 22:54:35 发布

苏七的猫

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量578

点赞数 1

分类专栏： css动画小效果文章标签： html css动画

本文链接：https://blog.csdn.net/pacholy/article/details/82345451

版权

css动画小效果专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、按钮滑动效果

这是我第一次在csdn发表博客，只是想把一些效果还有一些问题的解决方案写下来方便新手的查阅，也想通过这个方法把平常遇到的问题记录下来以便日后查看，也给大家一些参考，如果大家有更好的解决方案欢迎来评论，望与君共同进步，丘~

点击按钮可以滑动

<style>
        div{
            width: 100px;
            height: 50px;
            border-radius: 25px;
            cursor: pointer;
            background-color: lightblue;
        }
        p{
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-color: lightcoral;
            transform: translateX(0);
            transition: transform 500ms;
        }
        p.on{
            transform: translateX(50px);
            transition: transform 500ms;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>
<script>
    var p = document.querySelector('div p');
    var anniu = document.querySelector('div');
    var open = true;
    anniu.onclick = function(){
        if(open){
            p.classList.add('on');
            open = false
        }else{
            p.classList.remove('on')
            open = true;
        }
    }
</script>

2、css三角箭头点击旋转##

这里写图片描述
首先我们先用一个span空标签加上css样式写出一个三角形，下面我写的这个是箭头朝上的效果，如果需要箭头为其他方向的效果，通过改变border-bottom-color就行了，当然如果你不想用css写三角形的样式，也可以采用图片去写，然后绑定下面的点击事件就可以啦。

  <style>
      span{
        display: inline-block;
        border: 10px solid transparent;
        border-bottom-color: lightcoral;//箭头朝上
        transform: rotate(0);
        transform-origin:70% 70%;
        transition: 100ms;
        margin: 100px;
      }
      span.on{
        transform: rotate(90deg);
        transform-origin:70% 70%;
        transition: 100ms;
      }
    </style>
</head>
<body>
  <span></span>
</body>
</html>
<script>
    var span = document.querySelector('span');
    var open = true;
    span.onclick = function(){
        if(open){
            span.classList.add('on');
            open = false
        }else{
            span.classList.remove('on')
            open = true;
        }
    }
</script>

3、文字跳动效果

我这里没有动图，大致效果就是文字变大变小，像是gif动图。
这里写图片描述


<style>
  div{
      width: 100px;
      height: 50px;
      line-height: 50px;
      background-color: lightblue;
      text-align: center;
  }
</style>
</head>
<body>
    <div>
        <span>我是大魔王</span>
    </div>
</body>
</html>
<script>
    var p = document.querySelector('span');
    var da = true;
    setInterval( function(){
            if(da){
                p.style.fontSize = '18px';
                da = false
            }else{
                p.style.fontSize = '14px';
                da = true
            }
    },500)
</script>

4.无限旋转动画

这个常用于加载动画

@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.circle{
-webkit-transform: rotate(360deg);
animation: rotation 1s linear infinite;
-moz-animation: rotation 1s linear infinite;
-webkit-animation: rotation1s linear infinite;
-o-animation: rotation 1s linear infinite;
}

然后给需要旋转动画的标签加上class类名 “circle” 就可以了

苏七的猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css动画小效果

按钮滑动效果&amp;amp;amp;amp;lt;style&amp;amp;amp;amp;gt; div{ width: 100px; height: 50px; border-radius: 25px; cursor: pointer; background-color: lightblue; ...
复制链接

扫一扫