CSS is awesome!

无意间看到《css揭秘》这本书，感觉书挺好的，想看的可以看一下。里面有很多有意思的动画，平常是我们很难想到的，如果能用到其中的，必然是不错的。我截取了部分好玩又实用的代码，作为记录。

1.多个边框

示意图：
代码：

.Multiple_borders{width:  100px;height:  60px;margin:  25px;background: yellowgreen;box-shadow:  0  0  0  10px  #655,0  0  0  15px deeppink,0  2px  5px  15px  rgba(0,0,0,.6);
}

2.图片背景位置

示意图：
代码：

.background-position{background:  url(http://csssecrets.io/images/code-pirate.svg)no-repeat  bottom  right  #58a;background-position:  right  20px  bottom  10px;/* Styling */width:  10em;min-height:  5em;padding:  10px;color:  white;font:  100%/1  sans-serif;
}

3.内圆角

示意图：

代码：

.Inner_rounding{outline:  .6em  solid  #655;box-shadow:  0  0  0  .4em  #655; /* todo calculate max of this */max-width:  10em;border-radius:  .8em;padding:  1em;margin:  1em;background: tan;font:  100%/1.5  sans-serif;
}

4.圆锥曲线梯度

示意图：

代码：

.Conic_gradients{background:  red;background:  conic-gradient(limegreen,  green, limegreen);min-height:  100%;width:  10em;height:  7em;
}

5.边框图像

示意图：

代码：

.border-image{border:  40px  solid  transparent;border-image:  33.334%  url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \
<circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \
<circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \
<circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \
<circle cx="25" cy="15" r="5" fill=" %23655"%2F><circle cx="5" cy="25" r="5" fill="%23fb3"%2F> \<circle cx="15" cy="25" r="5" fill=" %23655"%2F><circle cx="25" cy="25" r="5" fill="%2358a"%2F><%2Fsvg>');padding:  1em;max-width:  10em;font:  130%/1.6 Baskerville, Palatino,  serif;
}

示意图：

代码：

.border-image2 {border:  40px  solid  transparent;border-image:  33.334%  url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \
<circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \
<circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \
<circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \
<circle cx="25" cy="15" r="5" fill=" %23655"%2F><circle cx="5" cy="25" r="5" fill="%23fb3"%2F> \<circle cx="15" cy="25" r="5" fill=" %23655"%2F><circle cx="25" cy="25" r="5" fill="%2358a"%2F><%2Fsvg>');padding:  1em;max-width:  10em;font:  130%/1.6 Baskerville, Palatino,  serif;margin-top:  1em;border-image-repeat:  round;
}

6.复古信封主题边框

示意图：

代码：

.Vintage_envelope_themed_border{padding:  1em;border:  1em  solid  transparent;background:  linear-gradient(white,  white) padding-box,repeating-linear-gradient(-45deg,  red  0,  red  12.5%,  transparent  0,  transparent  25%,#58a  0,  #58a  37.5%,  transparent  0,  transparent  50%) 0 / 6em  6em;max-width:  20em;font:  100%/1.6 Baskerville, Palatino,  serif;
}

7.折角

示意图：

代码：

.Folded_corner{width:  12em;background:  #58a; /* Fallback */background:linear-gradient(to  left  bottom,  transparent  50%,  rgba(0,0,0,.4) 0) 100%  0  no-repeat,linear-gradient(-135deg,  transparent  1.5em,  #58a  0);background-size:  2em  2em,  auto;padding:  2em;color:  white;font:  100%/1.6 Baskerville, Palatino,  serif;
}

8.蚂蚁行军边界

示意图：

代码：

.Marching_ants_border{padding:  1em;border:  1px  solid  transparent;background:  linear-gradient(white,  white) padding-box,repeating-linear-gradient(-45deg,  black  0,  black  25%,  transparent  0,  transparent  50%) 0 / .6em  .6em;animation: ants 12s  linear  infinite;max-width:  20em;font:  100%/1.6 Baskerville, Palatino,  serif;
}
@keyframes  ants { to { background-position:  100%  100% } }

9.菱形图像

示意图：
代码：

.Diamond_images{width:  100px;height:  100px;transform:  rotate(45deg);overflow:  hidden;margin:  20px;
}
.Diamond_images  img {max-width:  100%;transform:  rotate(-45deg) scale(1);z-index:  -1;position:  relative;transition:  1s;
}
.Diamond_images  img:hover {transform:  rotate(0deg) scale(1.42);
}

10.剪辑路径

示意图：

代码：

.clip-path  img{max-width:  100px;margin:  20px;-webkit-clip-path:  polygon(50%  0,  100%  50%,  50%  100%,  0  50%);clip-path:  polygon(50%  0,  100%  50%,  50%  100%,  0  50%);transition:  1s;
}
.clip-path  img:hover {-webkit-clip-path:  polygon(0  0,  100%  0,  100%  100%,  0  100%);clip-path:  polygon(0  0,  100%  0,  100%  100%,  0  100%);
}

11.饼图

示意图：

代码：

.pie {width:  100px; height:  100px;border-radius:  50%;background: yellowgreen;background-image:  linear-gradient(to  right,  transparent  50%, currentColor 0);color:  #655;
}
.pie::before {content:  '';display:  block;margin-left:  50%;height:  100%;border-radius:  0  100%  100%  0 / 50%;background-color:  inherit;transform-origin:  left;animation: spin 3s  linear  infinite, bg 6s  step-end  infinite;
}

12.全景的图片预览

示意图：

代码：

.panoramic {width:  150px; height:  150px;background:  url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');background-size:  auto  100%; animation: panoramic 10s  linear  infinite  alternate;animation-play-state:  paused;
}
.panoramic:hover,  .panoramic:focus {animation-play-state:  running;
}

CSS is awesome!相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
前端之css基础学习（更正版）
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
CSS单位分析及CSS颜色表示法、颜色表（调色板）
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

CSS is awesome!

1.多个边框

2.图片背景位置

3.内圆角

4.圆锥曲线梯度

5.边框图像

6.复古信封主题边框

7.折角

8.蚂蚁行军边界

9.菱形图像

10.剪辑路径

11.饼图

12.全景的图片预览

CSS is awesome!相关推荐

最新文章

热门文章