您没有来错地!为了更好的发展,黑基网已于9月19日正式更名为【安基网】,域名更换为www.safebase.cn,请卸载旧的APP并安装新的APP,给您带来不便,敬请理解!谢谢

黑基Web安全攻防班
安基网 首页 IT技术 办公设计 查看内容

CSS绘画

2017-8-14 12:02| 投稿: lofor |来自: 互联网

摘要: 好久没写博客了,最近一直在用React Native写公司的用户端App,感觉还不错,唯一让我感到蛋疼的便是React Native切图太蛋疼了,甚是想念写html和css的小日子。居然想玩CSS,那玩点什么好呢,想起去年在广州由w3ctech ...

好久没写博客了,最近一直在用React Native写公司的 用户端App ,感觉还不错,唯一让我感到蛋疼的便是React Native切图太蛋疼了,甚是想念写 html 和 css 的小日子。居然想玩CSS,那玩点什么好呢,想起去年在广州由w3ctech举行的第三届CSS大会中,压轴的女神现场用CSS撸出一个moustache(小胡须)惊艳了现场的每一个人。让我们先睹为快,看看我们要画的小胡须长啥样(与原版略有出入)。

大家看到这个性感的胡须,有没有想过怎么去实现呢。在开始之前,我们去温习一下相关的CSS知识。

温故

伪元素(preudo element)

每一个div都自带两个伪元素,即 before 和 after 元素,这样的话,每个div元素都提供3个可供我们操控的三个视觉元素,即三个矩形。

div::before { }
div::after {}

border-radius

border-radius 用于设置边框的圆角,使用一个半径时为圆形,使用两个半径时(长轴和短轴)为椭圆形。

border-radius 是

border-top-left-radius, 
border-top-right-radius, 
border-bottom-right-radius,
border-bottom-left-radius

的缩写属性。

box-shadow

box-shadow用于设置元素的阴影效果,一个元素可以用逗号分隔分隔列表来实现多个阴影效果。另外,若元素设置了 border-radius ,则阴影也会出现圆角效果。

box-shadow 可接受2~5个参数:

  • 两个参数, box-shadow: x y , x 为阴影区域相对于元素在X轴上的偏移量, y为阴影区域相对于元素在Y轴上的偏移量, 此时阴影的颜色与元素的字体颜色保持一致 。
  • 三个参数, box-shadow: x y color , color为阴影的颜色。
  • 四个参数, box-shadow: x y blue color , blur定义了阴影的模糊半径,从不透明到透明。
  • 五个参数, box-shadow: x y blue spred color ,spread 定义了阴影的缩放半径。

默认阴影在元素框外,使用 inset 可以使阴影在元素框内(背景之下,内容之上)

知新

根据上面的 CSS 知识,我们很容易的就可以实现上面的效果,talk is cheap, show me the code。

首先我们先定义一个 如下的 dom 结构:

class="moustache">div>

此时对应的 CSS为:

.moustache {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  position: relative;
 box-shadow: 50px 50px 0 50px black, -50px 50px 0 50px black;
}

很抱歉,这个时候页面上啥也不看见,与我们要画的东西还差的十万八千里,不要着急,我们先给 .moustache 加上一个 box-shadow ,页面上会出现如下俩个对称的黑圆圈,我们要画的东西的雏型是不是出现了?

接下来我们要绘制的是两个弯曲的部分,此刻页面上只有一个 dom 元素,没办法再在已经已经纯在 dom 画出花来了,但您别忘了,我们还有用伪元素(每个 div 元素都自带 before 和 after伪元素)来画其他的部分。

.moustache::before, .moustache::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  top: -100px;
  border-bottom: solid 100px ;
}

效果如下:

很明显现在只有右边有长方形,而且长方形的边并不在两个yuan的中心上。我们只需要将before 伪元素左移50px,after 伪元素右移50px。

.moustache::before {
  right: 50px;
  border-radius: 0 0 0 100%;
}
.moustache::after {
  left: 50px;
  border-radius: 0 0 100%;
}

接下来要做的不过是将左右伪元素按照一定的角度旋转而已,但要注意的是,默认的旋转中心,是元素的左上角。因此,我们需要调整 before 元素和 after 元素的旋转中心。

:root {
  --radius: 40deg;
}

.moustache::before {
  right: 50px;
  border-radius: 0 0 0 100%;
  transform-origin: right 150px;
  transform: rotate(calc(-1 * var(--radius)));
}
.moustache::after {
  left: 50px;
  border-radius: 0 0 100% 0;
  transform-origin: left 150px;
  transform: rotate(var(--radius));
}

最好大功告成。

也许你注意到上面 css 中的 var(--radius) 的写法,没错这就是所谓的 CSS 变量,具体使用参考 MDN 的 使用 CSS 变量 。我们可以很简单的通过 js改变 radius 变量的值,让小胡须动起来。

let root = document.documentElement;
document.addEventListener('mousemove', function (evt){
  let x = evt.clientX / innerWidth;
  const value = (x * 20 + 30);
  root.style.setProperty('--radius', value + 'deg');
});

最后,由w3ctech和前端圈联合主办的 第三届FEDAY 将于8月26与国家会议中心举行,一大波干活在等着你哦。



小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!



免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

最新

返回顶部