css3动画效果

最新推荐文章于 2024-05-23 22:54:35 发布
最新推荐文章于 2024-05-23 22:54:35 发布
阅读量1.5k 收藏 5
点赞数
文章标签： css3 动画 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly821760648/article/details/81626810
版权

为了方便开发，笔者写了几个css3的动画效果，并用gulp压缩一下。直接在animation引用class即可，目前适配了IE8~10，火狐以及谷歌。链接：https://pan.baidu.com/s/1RCVmRmwAEiMv-DUbRsSokw 密码：j2si。

演示gif图

这里写图片描述

使用代码

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/model.min.css" />
        <title></title>
    </head>
    <style>
        *{
            color: #FFFFFF;
        }
        .t-box{
            height: 78px;
            width: 78px;
            padding: 5px;
            background: linear-gradient(to right bottom,#a1c3f9,#4a86e8);
            border: 2px solid #3d7ce5;
            border-radius: 10px;
            float: left;
            margin: 5px 10px;
            box-sizing: border-box;
        }


    </style>
    <body>
        <div align="center">
            <div class="model-main">
                <div style="overflow: hidden;">
                    <div class="t-box" style="animation: 2s left ease;">左入</div>
                    <div class="t-box" style="animation: 2s left-transparent ease;">左入、透明</div>
                    <div class="t-box" style="animation: 2s left-transparent-bounce ease;">左入、透明、反弹</div>
                    <div class="t-box" style="animation: 2s right ease;">右入</div>
                    <div class="t-box" style="animation: 2s right-transparent ease;">右入、透明</div>
                    <div class="t-box" style="animation: 2s right-transparent-bounce ease;">右入、透明、反弹</div>
                    <div class="t-box" style="animation: 2s top ease;">上入</div>
                    <div class="t-box" style="animation: 2s top-transparent ease;">上入、透明</div>
                    <div class="t-box" style="animation: 2s top-transparent-bounce ease;">上入、透明、反弹</div>
                    <div class="t-box" style="animation: 2s bottom ease;">下入</div>
                    <div class="t-box" style="animation: 2s bottom-transparent ease;">下入、透明</div>
                    <div class="t-box" style="animation: 2s bottom-transparent-bounce ease;">下入、透明、反弹</div>
                    <div class="t-box" style="animation: 2s rotate-transparent-bounce ease;">旋转、透明、反弹</div>
                    <div class="t-box" style="animation: 2s rotate-transparent ease;">旋转、透明</div>
                    <div class="t-box" style="animation: 1.5s roll-always infinite linear">一直摆动</div>
                    <div class="t-box" style="animation: 2s roll-scale-always infinite linear">一直摆动、缩放</div>
                    <div class="t-box" style="animation: 2s roll-scale-half-always infinite linear">一直摆动、半缩放</div>
                    <div class="t-box" style="animation: 2s roll-scale-little-always infinite linear">一直摆动、小缩放</div>
                    <div class="t-box" style="animation: 2s roll-scale-two-always infinite linear">一直摆动、双缩放</div>
                    <div class="t-box" style="animation: 2s roll-scale-half-two-always infinite linear">一直摆动、双半缩放</div>
                    <div class="t-box" style="animation: 2s roll-scale-little-two-always infinite linear">一直摆动、双小缩放</div>
                    <div class="t-box" style="animation: 1s rotate infinite linear">一直旋转</div>
                    <div class="t-box" style="animation: 1s rotate-top-left infinite linear">一直左上角旋转</div>
                    <div class="t-box" style="animation: 2s rotate-scale ease">旋转</div>
                    <div class="t-box" style="animation: 2s scale ease">缩放</div>
                    <div class="t-box" style="animation: 2s scale-half ease">半缩放</div>
                    <div class="t-box" style="animation: 2s scale-little ease">小缩放</div>
                    <div class="t-box" style="animation: 2s scale-transparent ease">缩放、透明</div>
                    <div class="t-box" style="animation: 2s scale-transparent-half ease">半缩放、透明</div>
                    <div class="t-box" style="animation: 2s scale-transparent-little ease">小缩放、透明</div>
                    <div class="t-box" style="animation: 1s scale-always infinite linear">一直缩放</div>
                    <div class="t-box" style="animation: 1s scale-half-always infinite linear">一直半缩放</div>
                    <div class="t-box" style="animation: 1s scale-little-always infinite linear">一直小缩放</div>
                    <div class="t-box" style="animation: 2s rotate-transparent ease">旋转、透明</div>
                    <div class="t-box" style="animation: 2s rotate-transparent-bounce ease">旋转、透明、反弹</div>
                    <div class="t-box" style="animation: 2s rotate-scale ease">旋转、缩放</div>
                    <div class="t-box" style="animation: 2s rotate-scale-bounce ease">旋转、缩放、反弹</div>
                    <div class="t-box" style="animation: 2s rotate-transparent-scale ease">旋转、透明、缩放</div>
                    <div class="t-box" style="animation: 2s rotate-transparent-scale-bounce ease">旋转、透明、缩放、反弹</div>
                    <div class="t-box" style="animation: 2s transparent-all ease">全透明</div>
                    <div class="t-box" style="animation: 2s transparent-half ease">半透明</div>
                    <div class="t-box" style="animation: 2s transparent-little ease">小透明</div>
                </div>

            </div>
        </div>
    </body>
</html>
小羽曜努力
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
常用的CSS动画效果
happy81997的博客
03-21 2875
【代码】常用的CSS动画效果。
CSS3 动画效果
weixin_52915467的博客
09-08 144
css动画效果 想提升的朋友可以关注我，不懂的地方私信必回，我们一起进步。 代码可直接复制，更换你想换的图片，运行起来即可展现美丽的动画效果 以下代码内涵注释，看不懂的可以私信我 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
css3-animate动画特效大全
01-08
css3-animate动画特效大全 主要以css3 的@keyframes 规则来创建动画。
CSS动画技术（css-animation）
最新发布
Zarathusa的博客
05-23 1292
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
CSS3实现动画效果
AXDRXS的博客
12-17 1万+
CSS3实现动画效果
css有哪些动画效果怎么实现的
luoxiaonuan_hi的博客
07-06 3629
css实现动画主要有三种方式： transition实现渐变动画 transform转变动画 animation实现自定义动画 1. 语法: 1. transition: 属性是个复合属性 。 2. transition: property duration timing-function delay 3. 默认值为: transition: all 0 ease 0; 2. 属性介绍: 1. transition-property: 规定设置过渡效果的 css 属性.
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
CSS3的动画效果
weixin_45865343的博客
04-02 278
Transform功能：支持改变对象的位移，缩放，旋转，倾斜等变换操作 Transition功能：支持属性从一个值平滑过渡到另一个值，由此产生渐变的动态效果 Animations功能：通过关键帧产生序列渐变动画，每个关键帧中可以包含多个动态属性，从而可以在页面上生产多帧复杂的动画效果 transform:none;(默认值)|:transform-function transform-functi...
发现两个有趣的CSS3动画效果
09-25
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。 首先，让...
css3动画效果抖动解决方法
09-22
主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3动画效果
10-07
CSS3动画效果
深入CSS3 动画效果的总结详解
09-25
本篇文章是对,CSS3中的动画效果进行了详细的分析介绍。需要的朋友参考下
css3如何实现动画效果
daishu_shu的博客
05-05 2158
文章目录前言一、animation (动画) 属性语法值与说明[(原链接)](https://www.runoob.com/cssref/css3-pr-animation.html)二、@keyframes 规则定义和用法语法值与描述[(原链接)](https://www.w3school.com.cn/cssref/pr_keyframes.asp)三、实例总结 前言 css3提供了很方便的实现动画的效果。主要用到animation (动画) 属性和@keyframes 规则。下面就来介绍animat
CSS动画效果
weixin_53912712的博客
07-09 1922
过渡、动画】变形平移、旋转
css3特效样式库
anda9128的博客
04-20 692
直接调用样式类即可： 1 /* animation */ 2 .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} ...
这些css 动画效果你一定要收藏
weixin_53561783的博客
04-18 1307
分享一下好用涉及方面广的css动画给大家，让大家的网站更优雅 3.交错动画loading效果
css3如何实现动画？常用的动画方法总结
m0_56991207的博客
12-19 2446
在css中创建简单的过渡效果可以从以下几个步骤来实现 （1）在默认样式中声明元素的初始状态样式 （2）声明过渡元素最终状态样式，比如悬浮状态 （3）在默认样式中通过添加过渡函数，添加一些不同的样式 1. 变形 2D变形：旋转变形、缩放变形、斜切变形、位移变形 // 旋转变形，顺时针角度为正，逆时针角度为负 transform：rotate(45deg)； // 自定义变换原点： transform-origin:0 0; //以左上角为中心点旋转 transform-origin:0 100px; //以左
css动画效果
m0_51431448的博客
03-23 1万+
动画1（沿着椭圆转动） 其实是个2D转动，只不过咱们设置椭圆，然后加上scale缩放（近大远小），看上去就是3D效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
css3动画效果大全代码
07-14
CSS3动画效果是利用CSS3的动画属性来实现各种各样的动画效果。下面是一些常见的CSS3动画效果及其代码示例： 1. 平移动画效果： ```css @keyframes move { 0% {transform: translateX(0px);} 100% {transform: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值