记一些css 3效果

only_do 发布于2019-08-30 15:54 / 1887人阅读

摘要：半透明边框规定背景的绘制区域效果如图平行四边形方法一平行四边形方法二平行四边形毛玻璃效果时间慢慢地带走了本不该留下的，我已经快要想不起来你笑起来的样子，你穿的什么衣服牵着谁的手，突然难过了。

半透明边框

background-clip: 规定背景的绘制区域

.div {
    width: 200px;
    height: 200px;
    background: blue;
    border: 10px solid rgba(255, 170, 170, 0.3);
    background-clip: padding-box;
}

效果如图

平行四边形

// 方法一

  平行四边形


.skew-ex {
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: tomato;
    color: white;
    transform: skewX(-45deg);
    >div {
      transform: skewX(45deg);
    }
  }

// 方法二

  平行四边形

.skew-ex {
    width: 200px;
    height: 40px;
    line-height: 40px;
    color: white;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: tomato;
      z-index: -1;
      transform: skewX(-45deg);
    }
  }

毛玻璃效果


  
  时间慢慢地带走了本不该留下的，我已经快要想不起来你笑起来的样子，你穿的什么衣服牵着谁的手，突然难过了。我知道自己喜欢你，但我不知道将来在哪，因为我知道，无论在哪里，你都不会带我去，而记忆打亮你的微笑，要如此用力才变得欢喜。

// 主要是main标签的伪元素，设置跟大盒子一样的背景，再把z-index层级小于main，让字在背景上，有个要注意的就是
// 在使用负的z-index来把一个子元素移动到它的父元素下层时，如果父元素的上级元素有背景，则该子元素将出现在他们之后
.glass-ex {
    width: 500px;
    height: 400px;
    background-size: cover;
    margin-top: 30px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .main {
      width: 440px;
      height: 300px;
      background: rgba(255, 255, 255, 0.3);
      font-size: 14px;
      line-height: 32px;
      display: flex;
      display: -webkit-flex;
      justify-content: flex-start;
      align-items: center;
      padding: 2%;
      position: relative;
      z-index: 9;
      overflow: hidden;
      &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: url(../../static/img/chai.jpg) no-repeat;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
        margin: -15px;
      }
    }
    .glass-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(../../static/img/chai.jpg) no-repeat;
      background-size: cover;
    }
  }

效果如图

闪烁效果

闪烁效果

.blink-ex {
  color: #009a61;
  animation: 1s blink-smooth 6 alternate; // 缓动闪烁
  animation: 1s blink-smooth 3 steps(1); // 生硬闪烁
}
@keyframes blink-smooth {
  50% {
    color: transparent;
  }
}

轮船背景图移动

轮船过渡效果

.panoramic {
  width: 100%;
  height: 100%;
  background: url(../../static/img/ship.jpg) no-repeat;
  background-size: auto 100%;
  text-indent: -200%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}
.panoramic:hover,
.panoramic:focus {
  animation-play-state: running;
}

@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}

效果如图，鼠标移上去轮船滚动

沿环形路径移动的动画效果

.path {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #F2AE43;
  padding: 10px;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform-origin: 50% 150px; /* 150px == 路径的半径 */
    background: tomato;
    display: inline-block;
    animation: spin 6s infinite linear;
    >img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: inherit;
      animation-direction: reverse;
    }
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

效果如图

GPU云服务器云服务器 css效果效果显示 css jquery 气球css js效果 js和css效果图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116985.html

【转】CSS 那么多属性，而且每个属性都有多个值怎么记？

摘要：题主说属性太多，其实就是去控制样式而已，网页样式是借鉴于传统的报纸等印刷品的排版。常用基础样式如图常用属性和的取值是基于包含块离元素最近的块级祖先元素的宽注意是宽。这些属性只有用在定位元素除了为值上才有效。 CSS的本质可以分为宏观与微观两方面。宏观上它的存在就是为了控制页面的显示样式。包括布局，颜色，字体等。微观上则是实现这种控制功能的各种属性的定义和工作原理。了解定义就能干活，...

szysky 2019-08-19 17:53 评论0 收藏0
【转】CSS 那么多属性，而且每个属性都有多个值怎么记？

摘要：题主说属性太多，其实就是去控制样式而已，网页样式是借鉴于传统的报纸等印刷品的排版。常用基础样式如图常用属性和的取值是基于包含块离元素最近的块级祖先元素的宽注意是宽。这些属性只有用在定位元素除了为值上才有效。 CSS的本质可以分为宏观与微观两方面。宏观上它的存在就是为了控制页面的显示样式。包括布局，颜色，字体等。微观上则是实现这种控制功能的各种属性的定义和工作原理。了解定义就能干活，...

xuweijian 2019-08-30 12:51 评论0 收藏0
小丸子成长记---在stylus下用DIV+CSS一步一步打造小丸子

摘要：小丸子成长记程序员没有对象怎么办一个呀但是如果没妹妹呢跟母猴子生一个呀哈哈哈那么怎么用打造一个天真无邪的小丸子呢最后效果一直有种错觉这是旺仔准备工作安装在项目目录下新建和并在上引入命令行切换至项目目录启动实时刷新启小丸子成长记程序员没有对象怎么办? --new 一个呀但是如果没妹妹呢? --跟母猴子生一个呀哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢? 最后效果(一...

muzhuyu 2019-08-29 15:06 评论0 收藏0
匠心打造Vue侧滑菜单组件

摘要：本文介绍一个简单的类似的布局组件的实现，基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

sutaking 2019-08-22 11:20 评论0 收藏0