资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/记一些css 3效果

记一些css 3效果

only_do / 2006人阅读

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

半透明边框 
</>复制代码 
  1. background-clip: 规定背景的绘制区域
</>复制代码 
  1. .div {
  2.     width: 200px;
  3.     height: 200px;
  4.     background: blue;
  5.     border: 10px solid rgba(255, 170, 170, 0.3);
  6.     background-clip: padding-box;
  7. }

效果如图

平行四边形 
</>复制代码 
  1. // 方法一
  3.   
    平行四边形
  5. .skew-ex {
  6.     width: 200px;
  7.     height: 40px;
  8.     line-height: 40px;
  9.     background: tomato;
  10.     color: white;
  11.     transform: skewX(-45deg);
  12.     >div {
  13.       transform: skewX(45deg);
  14.     }
  15.   }
  16. // 方法二
  18.   平行四边形
  20. .skew-ex {
  21.     width: 200px;
  22.     height: 40px;
  23.     line-height: 40px;
  24.     color: white;
  25.     position: relative;
  26.     &::before {
  27.       content: "";
  28.       position: absolute;
  29.       left: 0;
  30.       right: 0;
  31.       top: 0;
  32.       bottom: 0;
  33.       background: tomato;
  34.       z-index: -1;
  35.       transform: skewX(-45deg);
  36.     }
  37.   }
毛玻璃效果 
</>复制代码 
  2.   
  3.   
    时间慢慢地带走了本不该留下的，我已经快要想不起来你笑起来的样子，你穿的什么衣服牵着谁的手，突然难过了。我知道自己喜欢你，但我不知道将来在哪，因为我知道，无论在哪里，你都不会带我去，而记忆打亮你的微笑，要如此用力才变得欢喜。
  4.   
</>复制代码 
  1. // 主要是main标签的伪元素，设置跟大盒子一样的背景，再把z-index层级小于main，让字在背景上，有个要注意的就是
  2. // 在使用负的z-index来把一个子元素移动到它的父元素下层时，如果父元素的上级元素有背景，则该子元素将出现在他们之后
  3. .glass-ex {
  4.     width: 500px;
  5.     height: 400px;
  6.     background-size: cover;
  7.     margin-top: 30px;
  8.     display: flex;
  9.     display: -webkit-flex;
  10.     justify-content: center;
  11.     align-items: center;
  12.     position: relative;
  13.     .main {
  14.       width: 440px;
  15.       height: 300px;
  16.       background: rgba(255, 255, 255, 0.3);
  17.       font-size: 14px;
  18.       line-height: 32px;
  19.       display: flex;
  20.       display: -webkit-flex;
  21.       justify-content: flex-start;
  22.       align-items: center;
  23.       padding: 2%;
  24.       position: relative;
  25.       z-index: 9;
  26.       overflow: hidden;
  27.       &::before{
  28.         content: "";
  29.         position: absolute;
  30.         left: 0;
  31.         top: 0;
  32.         bottom: 0;
  33.         right: 0;
  34.         background: url(../../static/img/chai.jpg) no-repeat;
  35.         background-size: cover;
  36.         filter: blur(10px);
  37.         z-index: -1;
  38.         margin: -15px;
  39.       }
  40.     }
  41.     .glass-bg {
  42.       position: absolute;
  43.       left: 0;
  44.       top: 0;
  45.       width: 100%;
  46.       height: 100%;
  47.       background: url(../../static/img/chai.jpg) no-repeat;
  48.       background-size: cover;
  49.     }
  50.   }

效果如图

闪烁效果 
</>复制代码 
  1. 闪烁效果
</>复制代码 
  1. .blink-ex {
  2.   color: #009a61;
  3.   animation: 1s blink-smooth 6 alternate; // 缓动闪烁
  4.   animation: 1s blink-smooth 3 steps(1); // 生硬闪烁
  5. }
  6. @keyframes blink-smooth {
  7.   50% {
  8.     color: transparent;
  9.   }
  10. }
轮船背景图移动 
</>复制代码 
  1. 轮船过渡效果
</>复制代码 
  1. .panoramic {
  2.   width: 100%;
  3.   height: 100%;
  4.   background: url(../../static/img/ship.jpg) no-repeat;
  5.   background-size: auto 100%;
  6.   text-indent: -200%;
  7.   animation: panoramic 10s linear infinite alternate;
  8.   animation-play-state: paused;
  9. }
  10. .panoramic:hover,
  11. .panoramic:focus {
  12.   animation-play-state: running;
  13. }
  14. @keyframes panoramic {
  15.   to {
  16.     background-position: 100% 0;
  17.   }
  18. }

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

沿环形路径移动的动画效果 
</>复制代码 
  2.   
  3.     
  4.   
</>复制代码 
  1. .path {
  2.   width: 300px;
  3.   height: 300px;
  4.   border-radius: 50%;
  5.   background: #F2AE43;
  6.   padding: 10px;
  7.   .avatar {
  8.     width: 40px;
  9.     height: 40px;
  10.     border-radius: 50%;
  11.     transform-origin: 50% 150px; /* 150px == 路径的半径 */
  12.     background: tomato;
  13.     display: inline-block;
  14.     animation: spin 6s infinite linear;
  15.     >img {
  16.       width: 100%;
  17.       height: 100%;
  18.       border-radius: 50%;
  19.       animation: inherit;
  20.       animation-direction: reverse;
  21.     }
  22.   }
  23. }
  24. @keyframes spin {
  25.   to {
  26.     transform: rotate(1turn);
  27.   }
  28. }

效果如图

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

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

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

相关文章

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

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

    szysky 评论0 收藏0

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

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

    xuweijian 评论0 收藏0

  • 小丸子成长记---在stylus下用DIV+CSS一步一步打造小丸子

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

    muzhuyu 评论0 收藏0

  • 匠心打造Vue侧滑菜单组件

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

    sutaking 评论0 收藏0

发表评论

登陆后可评论

0条评论

only_do

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<