`
zlpx
  • 浏览: 153006 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用CSS3生成简单的属性动画

    博客分类：
  • css
CSS3 
阅读更多

使用CSS3动画/过渡,transition-duration和transition-property,transition-timing-function风格。

<!DOCTYPE html>
<html>
<head>
    <title>Creating simple property animations using CSS3</title>
    <style type="text/css">
        a {
            color: #F00;
            font-size: 4em;
            font-weight: bold;
            -webkit-transition-property: color;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease;
        }
        a:hover {
            color: #0F0;
        }
        a:active {
            color: #00F;
        }
    </style>
</head>
<body>
 
    <a id="header">-webkit-transition</a>
 
</body>
</html>

 源码下载：

 使用CSS3生成简单的属性动画.zip

分享到：
| 使用CSS3生成一个inset盒子阴影（带透明度 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3动画属性边框属性等

    CSS3 动画属性（Animation） CSS 边框属性（Border 和 Outline） CSS 背景属性（Background） Color 属性 Box 属性 CSS 尺寸属性（Dimension） 内容生成（Generated Content） 可伸缩框属性（Flexible Box） Grid ...

    micron.js可生成炫酷CSS3动画的js动画库的插件

    micron.js是一个可生成炫酷CSS3动画的js动画库的插件。通过micron.js插件，你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。简单实用，欢迎下载！本...

    可生成炫酷CSS3动画的js动画库插件micron.js

    micron.js是一款可生成炫酷CSS3动画的js动画库插件。通过micron.js插件，你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。

    实用的CSS3 菜单生成器

    CSS3为Web设计师和开发者创建伟大的作品带来了极大的可能...通过CSS3中的3D变换、动画等属性，即使不使用JavaScript，你也能创造出令人印象深刻的动画效果。 你可以通过下面的CSS菜单生成器来快速打造精美的纯CSS菜单。

    CSS3圆点冒泡背景动画特效.zip

    CSS3圆点冒泡背景动画特效是一款js基于css3属性绘制随机生成的圆形变大消失，类似圆点冒泡慢慢变大消失的动画过程特效。

    16个超酷的CSS3动画按钮

    一组十分美妙的CSS3动画按钮集合，一共16个动画按钮，这16个按钮都会在鼠标滑过时生成不同的动画特效，有3D阴影、外框变幻、3D翻转、发光发亮等等。这些按钮的实现都是通过CSS3动画属性来完成的。

    CSS弹簧：为您选择CSS或普通CSS生成基于物理学CSS关键帧动画。

    可使用简单的数字css属性（带或不带单位），组合的属性（例如padding和rgb十六进制颜色）使用。 消除重复值和未使用的关键帧以优化动画大小。〜3kb压缩。 import spring , { toString } from 'css-spring'const ...

    hellworldcss3d:一个css3d生成的伪3d模型插件

    第一次写自己的插件，主要功能是用css 3d的属性生成伪3d的模型。 之前从没接触过css 3d ，css做动画就是我的弱项，一直以为要玩3d就得用webGL之类的,直到后来看到淘宝造物节，被经验到了，花了2天时间去研究怎么写。...

    CSS3 立方体链接特效 带3D旋转动画.rar

    响应式链接特效，鼠标放在上面，立方体就会旋转，同时链接是旋转显示出来，可上下旋转，也可左右旋转，两个都是这样的，我们可以学习用HTML5 css3技术生成立方体特效，另外是一些CSS3中动画属性元素的使用方法，...

    CSS3圆点冒泡背景动画特效特效代码

    CSS3圆点冒泡背景动画特效是一款js基于css3属性绘制随机生成的圆形变大消失，类似圆点冒泡慢慢变大消失的动画过程特效。

    tailwindcss-animations:[已弃用] Tailwind CSS插件以生成动画实用程序

    Tailwind CSS动画插件 要求 此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新1.x版本（ npm install tailwindcss-animations@1.x ）。 安装 npm install ...

    css3进阶之less实现星空动画的示例代码

    本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下： 效果动图如下：   预览链接和代码在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde  知识点预览 这篇文章的 less技巧 + ...

    css_animation.dart:在Dart中动态构建CSS3动画规则

    在撰写本文时，似乎还没有一种简单的方法可以动态地生成Dart动画所必需CSS3关键帧。 因此，必须手动构建适当的规则并将其注入样式表。 CssAnimation提供了一个具有不同控制程度的简单界面，可以动态构建动画规则并...

    CSS3 渐变（Gradients）

    但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： ...

    css入门笔记

    独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...

    tween.js可生成平滑动画效果的js动画库

    tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    HTML和CSS实现的简单春节烟花代码示例

    通过animation属性，定义了一个名为explode的动画，使烟花从初始状态逐渐扩大并逐渐消失。 在JavaScript部分，使用createFirework函数创建一个烟花元素，并将其添加到页面中。通过setInterval函数每500毫秒调用一次...

    tween.js 可生成平滑动画效果的js动画库

    tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    Ixhibition:JS库提供CSS3动画支持的图像库

    Ixhibition是一个用Javascript生成并由CSS3动画提供支持的图像库，它的另一个优点是可以使用CSS3动画支持的属性来设置自定义动画和所需动画。 Ixhibition还旨在用作一个核心库，可以在其上开发其他程序包，以实现...

    CSS 参考手册

    CSS 参考手册 软件开发网的 CSS 参考手册在所有主流浏览器中测试通过. CSS 属性 CSS 属性组： ...动画 ...“CSS” 列指示属性是在哪个 CSS 版本中定义的 (CSS1, CSS2, 或者 CSS3). 动画属性 属性

Magicbox
Global site tag (gtag.js) - Google Analytics