css有用的代码块

最新推荐文章于 2021-12-24 10:09:55 发布
最新推荐文章于 2021-12-24 10:09:55 发布
阅读量1.8k 收藏
点赞数
原文链接：http://www.cnblogs.com/wenwenli/p/6962755.html
版权

1. 箭头代码

a{
　　position:relative;
　　float:left;
　　height: 30px;
　　line-height: 30px;
　　padding: 0 20px;
　　font-size: 14px;
　　background-color: #686ce8;
　　color: #fff;
}

a:hover:after,a.active:after{
　　content: '';
　　position: absolute;
　　top: 25px;
　　left: 45%;
　　padding: 4px;
　　background-color: inherit;
　　transform: rotate(45deg);
　　border-radius: 2px;
}
a.active{
　　background: #686ce8;
　　color: #fff;
}

注意inherit属性的设置，这样也可以设置border-radius值

2. 加载动画
a.图片转动的加载动画 
/* sass写法   loading 加载动画 start */
.loading {
   position: relative;
   width:100%;
   height:100%;
   .loader {
      position: absolute;
     width: 30px;
     height: 30px;
     top: 50%;
     left: 50%;
     -webkit-transform: transition(50%, 50%);
     transform: transition(50%, 50%);
     /*-webkit-box-shadow: black 0 0 4px;*/
     /*position: relative;*/
     /*text-indent: -9999em;*/
     -webkit-animation: load5 1.1s infinite ease;
     animation: load5 1.1s infinite ease;
     background-image: url($imgUrl + 'loading.png');
     background-position: 0 0;
     background-size: cover;
   }
}



@-webkit-keyframes load5 {
  0% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(0deg);
  }
  10% {
    // background-image: url(/resource/images/base/loading_2.png);
    transform: scale(1) rotate(45deg);
  }
  20% {
    // background-image: url(/resource/images/base/loading_3.png);
    transform: scale(1) rotate(90deg);
  }
  30% {
    // background-image: url(/resource/images/base/loading_4.png);
    transform: scale(1) rotate(135deg);
  }
  40% {
    // background-image: url(/resource/images/base/loading_5.png);
    transform: scale(1) rotate(180deg);
  }
  50% {
    // background-image: url(/resource/images/base/loading_6.png);
    transform: scale(1) rotate(225deg);
  }
  60% {
    // background-image: url(/resource/images/base/loading_7.png);
    transform: scale(1) rotate(270deg);
  }
  70% {
    // background-image: url(/resource/images/base/loading_8.png);
    transform: scale(1) rotate(315deg);
  }
  80% {
    // background-image: url(/resource/images/base/loading_9.png);
    transform: scale(1) rotate(315deg);
  }
  90% {
    // background-image: url(/resource/images/base/loading_10.png);
    transform: scale(1) rotate(315deg);
  }
  100% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(360deg);
  }
}

@keyframes load5 {
  0% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(0deg);
  }
  10% {
    // background-image: url(/resource/images/base/loading_2.png);
    transform: scale(1) rotate(45deg);
  }
  20% {
    // background-image: url(/resource/images/base/loading_3.png);
    transform: scale(1) rotate(90deg);
  }
  30% {
    // background-image: url(/resource/images/base/loading_4.png);
    transform: scale(1) rotate(135deg);
  }
  40% {
    // background-image: url(/resource/images/base/loading_5.png);
    transform: scale(1) rotate(180deg);
  }
  50% {
    // background-image: url(/resource/images/base/loading_6.png);
    transform: scale(1) rotate(225deg);
  }
  60% {
    // background-image: url(/resource/images/base/loading_7.png);
    transform: scale(1) rotate(270deg);
  }
  70% {
    // background-image: url(/resource/images/base/loading_8.png);
    transform: scale(1) rotate(315deg);
  }
  80% {
    // background-image: url(/resource/images/base/loading_9.png);
    transform: scale(1) rotate(315deg);
  }
  90% {
    // background-image: url(/resource/images/base/loading_10.png);
    transform: scale(1) rotate(315deg);
  }
  100% {
    // background-image: url(/resource/images/base/loading_1.png);
    transform: scale(1) rotate(360deg);
  }
}

用法：
<div class="loading"><div class="loader"></div></div>
b. 纯css动画
/**
 * Lines
 */

.loader-inner {
   width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    z-index: 9999;
}
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } 

}

@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div {
  background-color: #ccc;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }
用法：
<div class="loader-inner line-scale" style="margin: 100px 0;" v-show="isLoading">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>
 3. border 半透明色
body{
  background-color: #ccc;
}
.border{
  width: 300px;
  height: 300px;
  border: 10px solid hsla(0,0%,100%, .5);
  background-color: white;
background-clip: padding-box;
}
<div class="border"></div>

background-clip: border-box|padding-box|content-box;
值描述测试
border-box背景被裁剪到边框盒。测试
padding-box背景被裁剪到内边距框。测试
content-box背景被裁剪到内容框。
参考：http://www.w3school.com.cn/cssref/pr_background-clip.asp

4.简单的缝边效果 
.border{
  width:  300px;
  height:  300px;
  /*border: 10px solid hsla(0,0%,100%, .5);*/
  background-color: #5f524f;
  border-radius: 5px;
  background-clip: padding-box;
outline: 1px dashed #fff;
  outline-offset: -20px;
}

转载于:https://www.cnblogs.com/wenwenli/p/6962755.html

weixin_30500473
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 全局CSS样式：代码块的引用
WangMin@汪末末
08-30 700
内联代码 通过<code>标签包裹内联样式的代码片段。如果您想要内联显示代码，那么你应该使用 标签。 <p>通过 <code>&lt;code&gt;</code> 标签包裹内联样式的代码片段。如果您想要**内联显示代码**，那么你应该使用 标签。</p> 用户输入 通过<kbd>标签标记用户通过键盘输入的内容。 <p>通过kbd标签标记用户通过键盘输入的内容。<kbd>cd</k
css 代码块
qq_35499948的博客
03-06 2687
css summary 单行缩略 word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.多行缩略 width: 4rem; overflow: hidden; font-size: .24rem; text-overflow: ellipsis; display: -web...
BootStray CSS代码
★匆匆★的专栏
08-01 620
摘自《极客学院》 1、效果图： 2、html代码： BootStrap CSS代码 For Example as inline 我现在希望能键入cmd命令 输入代码......; x = y + z
html5块元素代码,HTML5部分元素(示例代码)
weixin_34738099的博客
06-09 499
DocumentHTML4文档声明 :HTML5文档声明 :HTML4 meta :HTML5 meta :HTML5 新增元素 元素：header元素表示页面中的一个内容区块或者整个页面的标题。 元素：nav元素表示页面中的导航链接部分。 元素：article元素表示页面中的一块上下文不相关的独立内容，比如一篇文章中的文章。 元素：section元素表示页面中的一块内容区域，比如章节的页眉、页脚...
前端常用的CSS代码块
weixin_46102749的博客
06-24 3383
1、垂直居中对齐 .vc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .vc { position:absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin:-50px 0 -50px; } 2、全屏显示 html, body { posit...
CSS常用代码小集
09-25
写CSS过程中经常会使用到一些代码段，为了提供书写效率，本文整理了一些常用代码可供大家使用
CSS代码规范.pdf
04-02
2. **注释**：使用注释来标记代码块的开始和结束，方便理解和维护，例如：`/*header start*/` 和 `/*header end*/`。 3. **CSS书写规范** - 用两个空格缩进，不用tab键。 - 自闭合元素如`<img>`不应有斜线。 - ...
typora，代码块注释css更新
03-28
typora，代码块注释css更新
typora 块代码和代码块设置
07-15
方便你记笔记，没关好看
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
前端学习【03】常用CSS代码块
chenyi的博客
03-15 3381
清除浮动 .clearfix:after{ cintent:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;/*内容为小点，尽量不要空，否者旧版本浏览器有空隙*/ display:block; height:0; visibility:hidden;/*隐藏盒子*/ clear:both; } .clearfix{ *z
html5：块级元素
qq_45158336的博客
08-02 3193
最常见块级元素：div div的属性： <div title="title属性">title属性</div> title属性： 当鼠标悬停在div上时候会有一个小的提示框 <div id="div1">div1</div> id属性可以理解为为当前div提供一个唯一标识，可以理解为我们的身份证号 <div class="box1">box1</div> class属性是为当前div定义一个类名，以后学到css...
css实现github代码样式
qq_45638941的博客
09-08 2792
1、简介 前往我的私人博客 www.xysama.cn/github_style_project.html查看本内容，可能会有更好的视觉效果 这个文章来自于我的私人博客 www.xysama.cn （由于不是很会css所以除了1920x1080的电脑以外，打开之后格式会有些不正常），这是其中的一个文章的分享，在我的博客里面会经常分享一些学习中遇到的有意思的东西和奇妙的想法，虽然我可能不是第一个这么做的人，但是想法都是很不错的点子。 在制作这个页面的时候，我突发奇想，如果将代码块放入html...
html实现CSDN代码片（代码块的做法）的显示
chuck_robert的博客
07-04 8078
html实现CSDN代码片（代码块的做法）的显示介绍啰嗦制作过程效果图片代码注意如何修改语言 介绍 我是一个初中生，自学的html，有一些东西不会，所以提前说，避免遭到某些人的吐槽。 啰嗦 前几天突发奇想，想写属于自己的blog，对比了需要大佬的blog发现我需要一个可以呈现出代码的部分，于是我智障得直接 把代码输入在了div中 ，结果可想而知。 制作过程 后来在谷歌上寻找了很多方法，答案基本只有三种1、无法使用，2、太丑3、不是想要的东西。后来我凭借着“惊人”的智商，在博客园上抽取了一段简单的代码，
H5的第一个网页代码
热门推荐
编程小白，此刻开始！
06-13 1万+
主体代码。这是第一个网页代码，从这里开启网页编程之路 //网页类别识别 //在这里可以添加一些头文，一般引入外部的文件如外部样式文件.css,外部JS文件.js. //这里设置文本的编码为UTF-8，是现在网页首选编码语言。防止乱码产生。 这是第一个网页 //这里设置在游览器上方你的网页名称。 //这里才是正式开始，里面的内容才是显示在网页里的内容。我们学习网页
H5常用代码：页面框架
weixin_30359021的博客
07-12 1万+
万变不离其宗，道法自然！ 虽然H5的小项目一波又一波，但有一个东东基本没什么变化，那就是整个页面的框架结构。 我所常用的H5常用页面框架如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-wid...
Markdown马克飞象css（代码块优化）
kSummerLee的博客
03-14 7722
结合了官方给出css的代码块渲染和一个简洁的style，效果如图。 /* Google Code style (c) Aahan Krish <geekpanth3r@gmail.com> */.hljs { display: block; overflow-x: auto; padding: 0.5em; background: #fefbf0; color: black;
前端H5的代码基础写法与用法
weixin_45582846的博客
09-04 2432
常用块级标签: 1 Header:定义页面头部 2 Section:定义页面内容 3 Footer:定义页面底部 1 Nav:定义导航链接 2 Hgroup:定义标题或相关信息 3 Aside:定义侧边栏 4 Article:定义一篇文章 5 Figure:定义一组媒体内容 6 Dialog:定义对话框，类似于微信 1 Fig...
H5代码规范
学过的东西，讲不出来等于没学。
12-24 2692
代码规范 1. 概述 欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范， 以下规范是团队基本约定的内容，必须严格遵循。 HTML规范 基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。 图片规范 了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。 CSS规范 统一规范团队 CSS 代
css图片自适应块代码
最新发布
05-19
以下是一种CSS实现图片自适应块的代码： ```css .img-container { width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */ position: relative; } .img-container img { position: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值