css小球落地阴影,CSS3球体掉落动画带阴影效果

CSS

语言：

CSSSCSS

确定

#zhuti {

height: 500px;

width: 600px;

background-image: url(/uploads/user_upload/46900/001.jpg);

background-repeat: no-repeat;

background-size: 100% 100%;

}

#qq {

height: 100px;

width: 100px;

margin: 0 auto;

background-image: url(/uploads/user_upload/46900/002.jpg);

border-radius: 50%;

background-size: 100px;

/* background-position: 50% 50%; */

animation: kk 5s infinite linear;

}

footer {

width: 70px;

height: 70px;

border-radius: 50%;

background-color: black;

opacity: 0.5;

position: absolute;

bottom: 210px;

margin: 0 auto;

transform: rotateX(70deg);

left: 285px;

filter: blur(5px);

animation: yinying 5s infinite linear;

}

@keyframes kk {

0% {

transform: translateY(0);

}

20% {

transfrom: translateY(150px);

}

40% {

transform: translateY(300px);

}

60% {

transform: translateY(150px);

}

80% {

transform: translateY(255px);

}

100% {

transform: translateY(300px);

}

@keyframes yinying {

0% {

width: 20px;

height: 20px;

}

20% {

width: 70px;

height: 70px;

}

40% {

width: 35px;

height: 35px;

}

60% {

width: 70px;

height: 70px;

}

80% {

width: 55px;

height: 55px;

}

100% {

width: 70px;

height: 70px;

}

css小球落地阴影,CSS3球体掉落动画带阴影效果相关推荐

css 霓虹灯转动效果,CSS3霓虹灯文字动画特效
这是一个完全由CSS3实现的霓虹灯文字动画特效,虽然看起来有flash的质感和js驱动的错觉,但事实上你可以看到所有代码如下:html> CSS3霓虹灯文字特效 .text-effect { o ...
CSS入门八、CSS3动画
零.文章目录文章地址个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
android落下动画,Android应用开发android 购物车小球掉落动画
本文将带你了解Android应用开发android 购物车小球掉落动画,希望本文对大家学Android有所帮助. 先贴效果图对自定义View小红球的绘制 public class BallView ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
css 涟漪,CSS3水波涟漪动画定位样式如何制作
CSS3水波涟漪动画定位样式如何制作宝剑锋从磨砺出,梅花香自苦寒来.以下是小编为大家搜索整理的'CSS3水波涟漪动画定位样式如何制作,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网 ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
css3雨滴掉落水面网页动画
下载地址 css3雨滴掉落水面网页动画,鼠标点击的时候触发雨滴掉落 dd:
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画发布 ...
php 图片圆角透明,CSS_使用CSS3实现圆角,阴影,透明，CSS实现圆角,阴影,透明的方法 - phpStudy...
使用CSS3实现圆角,阴影,透明 CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆 ...

css小球落地阴影,CSS3球体掉落动画带阴影效果

css小球落地阴影,CSS3球体掉落动画带阴影效果相关推荐

最新文章

热门文章