CSS样式上下左右渐变出现

最新推荐文章于 2024-03-15 17:40:05 发布
最新推荐文章于 2024-03-15 17:40:05 发布
阅读量4.9k 收藏 7
点赞数
分类专栏： 工作实战笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014155882/article/details/69568625
版权

CSS样式上下左右渐变出现


/**时间*/
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
}

/**从下往上进入*
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


/**从上往下进入*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/**放大出现*/
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


 
/**左到右*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


/**右到左*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}



附上整个css文件：

.animationCSS{
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
}

.animated2 {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.7s;
  -webkit-animation-delay: .7s;
}

.animated3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}

.animated4 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.animatedleida2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1.4s;
  -webkit-animation-delay: 1.4s;
}

.animatedleida3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 2.1s;
  -webkit-animation-delay: 2.1s;
}

.animatedleida4 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 2.8s;
  -webkit-animation-delay: 2.8s;
}

.animatedleida5 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}

.animatedleida6 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 4.2s;
  -webkit-animation-delay: 4.2s;
}

.animatedleida7 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.animated8 {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpNew {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpNew {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpNew {
  -webkit-animation-name: fadeInUpNew;
  animation-name: fadeInUpNew;
}

@-webkit-keyframes fadeInUpSlow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSlow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSlow {
  -webkit-animation-name: fadeInUpSlow;
  animation-name: fadeInUpSlow;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownSlow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownSlow {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownSlow {
  -webkit-animation-name: fadeInDownSlow;
  animation-name: fadeInDownSlow;
}

@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2px, 0);
    transform: translate3d(0, 2px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2px, 0);
    transform: translate3d(0, 2px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes fadeInUp3 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp3 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp3 {
  -webkit-animation-name: fadeInUp3;
  animation-name: fadeInUp3;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

@keyframes fadeInOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

.fadeInOpacity {
  -webkit-animation-name: fadeInOpacity;
  animation-name: fadeInOpacity;
}

@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
  }
}

@-webkit-keyframes bouncein {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bouncein {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bouncein {
  -webkit-animation-name: bouncein;
  animation-name: bouncein;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}


/*从中间向四边的透明度渐变*/
@keyframes fadeInScale {
    0%{
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0;
    }
    100%{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

/*从左边慢慢滑出并且带透明度*/
/*需要将本体设置为定位模式，并且opacity为0，left为负值*/
@-webkit-keyframes slideLeftFade {
  to {
    opacity: 1;
    left: 0
  }
}

@-moz-keyframes slideLeftFade {
  to {
    opacity: 1;
    left: 0
  }
}

@-o-keyframes slideLeftFade {
  to {
    opacity: 1;
    left: 0
  }
}

@keyframes slideLeftFade {
  to {
    opacity: 1;
    left: 0
  }
}

.slideLeftFade {
  -webkit-animation: slideLeftFade .3s linear .5s forwards;
  -moz-animation: slideLeftFade .3s linear .5s forwards;
  -o-animation: slideLeftFade .3s linear .5s forwards;
  animation: slideLeftFade .3s linear .5s forwards
}

@-webkit-keyframes start {
  0%,30% {opacity: 0;-webkit-transform: translate(0,2px);}
  60% {opacity: 1;-webkit-transform: translate(0,0);}
  100% {opacity: 0;-webkit-transform: translate(0,-1px);}
}
@-moz-keyframes start {
  0%,30% {opacity: 0;-moz-transform: translate(0,2px);}
  60% {opacity: 1;-moz-transform: translate(0,0);}
  100% {opacity: 0;-moz-transform: translate(0,-1px);}
}
@keyframes start {
  0%,30% {opacity: 0;transform: translate(0,2px);}
  60% {opacity: 1;transform: translate(0,0);}
  100% {opacity: 0;transform: translate(0,-1px);}
}

/*服务流程圆点一闪一闪*/
@-webkit-keyframes rotateOutDownLeft1 {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0.1
  }

  100% {
    opacity: 1
  }
}

@keyframes rotateOutDownLeft1 {

  0% {
    opacity: 1
  }

  50% {
    opacity: 0.1
  }

  100% {
    opacity: 1
  }
}

/*招标大厅的动画*/
@keyframes tenderFade{
  0%{
    transform: none;
  }
  100% {
    transform: translate3d(0, -2.5rem, 0);
  }
}
.pubAnimation {
  -webkit-animation-name: tenderFade;
  animation-name: tenderFade;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

}

木神不木
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现透明渐变特效的示例代码
12-28
知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知： 这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关 透明transparent也是一种颜色，也是渐变可以设置的 下面我把自己的代码贴出来，仅供参考 布局 <body> <div class=bg-gradient> <div class=pic></div> </div> </body> css样式 <style> .bg-gradient { margin: 0 a
css 右上角 翻开动画_css3动画（从上、左下、左、右进入页面）
weixin_39548787的博客
12-19 359
/*动画-start*/.animated{animation-duration:1.5s !important;-webkit-animation-duration:1.5s !important;animation-fill-mode:both !important;-webkit-animation-fill-mode:both !important;}.animated02{animati...
css背景从上到下颜色渐变、css背景从左到右颜色渐变、 css框线展示外阴影、css框线展示内阴影
最新发布
qq_39951524的博客
03-15 767
css背最从上到下颜色渐变、css背最从左到右颜色渐变、css框线展示外阴影、css框线展示内阴影
转: css3动画简介以及动画库animate.css的使用
dayanwu2842的博客
06-20 264
~~~ transition animation 和 animate.css 在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是...
学Web的第二十六天
Mr_MengXie的博客
08-15 371
学Web的第二十六天
HTML之CSS Animation 属性常用动画
Computer_Tech的博客
01-14 606
【代码】HTML之CSS Animation 属性常用动画。
html怎么设置左偏移量,animate.css - 如何更改位置偏移量（例如在fadeInUp中）？
weixin_34569101的博客
06-15 949
我安装了animate.css，我很满意。只有一件事我无法改变：职位变化的数量。特别是我使用动画“fadeInUp”，并希望从什么时候改变褪色开始。目前它太多了。我检查了css文件，但我发现的唯一问题是：@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: ...
使用CSS对页面加载的淡入效果
asdfgh0077的博客
05-18 627
Can CSS Transitions be used to allow a text paragraph to fade-in on page load? CSS Transitions可用于允许
HTML5滑动门动画（侧滑，上滑）
lishengko的博客
02-17 4398
HTML5的动画是通过伪类@实现的，设置动画的起始位置，结束位置，动画时间即可，中间的过度HTML会自动补齐，简单的代码就可以实现炫酷动画效果。 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画</title> <style type="text/css"> .animat
实例详解css3动画库animate.css的各种动画效果
森森
08-25 5605
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。它的老搭档wow.js，这俩好哥们，经常一起使用。 animate.css包括shake、flash、sw
十四、css动画基础知识
weixin_30487317的博客
08-04 135
引用动画的方式： 1、轻量动画： cubic-bezier(0.165, 0.840, 0.440, 1.000);//加上贝塞尔曲线使动画运动起来更加平滑 2、.scrollNews,.m-treeview{transition:all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);overflow: hidden;} 如何重复...
详解CSS制作Web页面条纹背景样式的技巧
12-13
如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条: CSS Code复制内容到剪贴板 background: linear-gradient(#fb3 50%, #58a 50%);  接下来...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图...
切图框架SLICY 1.2.rar
05-23
切图框架SLICY 1.2 更新日志：2016-06-23精简了css代码删减了基础css文档里面 加粗，下划线，斜体，删除线，上下标等纯说明性 内容文档。优化了12列栅格系统响应式尺寸调整为 960, 1200, 768 , 的情况增加了栅格填补...
JavaScript网页特效范例宝典源码
09-04
目录: 第1章 窗口/框架与导航条...实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第...
Android给控件自定义边框和阴影
热门推荐
木神不木的博客
12-27 1万+
所谓添加阴影，就是两个画布从重叠，上方的画布小于下方的画布，阴影颜色为下方的画布的颜色。 item 中shape 的属性 （rectangle:矩形；line：线性；oval：椭圆；ring：环形），默认为矩形    corners    //设置圆角幅度，必须是在shape=rectangle的时候，corners才有效                 corners   
H5图片预览及上传（WEB前端）
木神不木的博客
02-06 1万+
H5图片预览及上传 web上传图片很简单，网上有许多的demo和js，但是本人嫌弃用那些会引入许多js包，所以还是用原生的jquery来写吧。 一、html布局文件 html有一个自己的上传文件控件---input，只需要将其type属性设置为file即可上传文件，accept=“image/”是用来限制文件类型为image，input代码如下： 之后，我们还需要一个imag
Android中ImageView的图片宽度设置
木神不木的博客
11-18 5029
Android中ImageView的图片宽度设置 有一张图片，想放到ImageView中去，高度为原图片大小，宽度希望占据整个屏幕，以下是最初的设置，                   android:id="@+id/calendar_lay_2"                  android:layout_width="fill_parent"          
css 文字上下渐变
09-02
要在文字上下添加渐变效果，你可以使用 CSS 的背景渐变（`background-image`）属性来实现。下面是一个示例代码： ```css .gradient-text { background-image: linear-gradient(to bottom, #ff00ff, #00ffff); -...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值