css怎么让图案上下浮动

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用animation属性和@keyframes规则给img图片元素设置上下浮动动画效果来让图案上下浮动；动画的快慢速度可以通过元素高度与animation中的秒数去调整。

本教程操作环境：Windows7系统、HTML5&&CSS3版本，Dell G3电脑。

推荐：css视频教程

css3实现一个上下浮动的动画效果（animation）

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

@keyframes movepoint {

    25% {

        top: 16px

    }

    100%,

     {

        top: 50px

    }

}

 

.shade-button-point {

    display: inline-block;

    position: absolute;

    top: 50px;

    left: 30%;

    animation: movepoint 2s infinite;

    -webkit-animation: movepoint 2s infinite;

}

阅读剩余部分

相关阅读 >>

CSS3做出多样边框特效

CSS3中怎么调节透明度

彻底理解css中视觉格式化模型（附示例）

html5和CSS3分别是什么？

CSS3有那些内置函数

如何解决CSS3 media不起作用的问题

CSS3中text-shadow实现文字阴影效果（代码实例 ）

CSS3中如何实现图片翻转

CSS3倒影效果怎么实现

CSS3实现文字折纸效果的方法（代码示例）

更多相关阅读请进入《CSS3》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...