阅读 72

有趣的前端css特效-会变色的圆珠笔

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-会变色的圆珠笔

由于上一篇纯css开发的苹果数据线特效代码的效果过于有趣,引起了许多小伙伴的兴趣,那么接下来继续更新一份圆珠笔。与上篇幅略微一丢丢不同的是,这个圆珠笔鼠标悬浮上去的时候是会从原始紫色变成橙色的哦。

实现后的效果如下图所示:

gl6az-hs00f_1.gif

1. 首先我们还是定一个div来作为此次css效果的父容器。

为了效果看起来方便,我将父容器div设置合适的宽高后全屏居中。代码如下


div{

position: absolute;

left: 50%;

top: 50%;

width: 350px;

height: 10px;

margin-left: -175px;

margin-top: -5px;

}

复制代码
2. 设置伪类元素after、before的基础属性。

div:before, div:after {

content: '';

position: absolute;

}

复制代码
3. 给伪类after设置合适的宽高后,再通过设置background-image、background-size、background-postion 等设置颜色、大小、定位。代码如下:

注释中已将定位后的image颜色各对应哪些地方备注的比较详细了,大家复制后对照修改成自己想要的颜色哦。


div:after {

width: 350px; height: 24px;

background-repeat: no-repeat;

background-image: {

//右侧金属内框

linear-gradient(to right,#c0c0c0,#808080),

//右侧金属外框

linear-gradient(to right,#c0c0c0,#c0c0c0),

//左侧光泽点

linear-gradient(to right,rgba(255,255,255,0.7),rgba(255,255,255,0.7)),

//中间光泽点

linear-gradient(to right,rgba(255,255,255,0.7),rgba(255,255,255,0.7)),

//右侧金属上光泽点

radial-gradient(ellipse at 30px 28px,rgba(255,255,255,0) 65%,rgba(255,255,255,0.6) 70%,rgba(255,255,255,0) 75%),

//右侧笔尖光泽点

radial-gradient(ellipse at right center,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 40%),

//右侧笔身整体颜色

linear-gradient(to bottom,#e141bc,#701950),

//中间笔身中央光泽度

linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%),

//中间笔身下侧阴影

linear-gradient(to top,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0) 100%),

//中间笔身上层颜色

linear-gradient(to bottom,#cd00b4,#701950),

//左侧笔头中央光泽度

linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%),

//左侧笔头光影渐变色

linear-gradient(to bottom,#e141bc,#701950);

}

background-size: 24% 21%,26% 30%,.8% 25%,1% 24%,34% 50%,1.5% 50%,35% 100%,58% 20%,56% 30%,60% 95%,8% 16%,10% 78%;

background-position: 94% 46%,95% 45%,8% 5%,65.7% 2%,100% 20%,100% center,100% center,21% 40%,20% 98%,20% center,0 32%,0 center;

}

复制代码

接下来就是见证奇迹的时刻。

界面保存刷新后,我们得到了以下效果图。

gl6az-hs00f_2.gif

一个方里方气的看起来 勉强能看出来一点圆珠笔样子的物体。

接下来修饰一下弧形,将四角都调整成合适的形状。


border-top-right-radius: 80px 7px;

border-bottom-right-radius: 80px 7px;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

复制代码

一个圆珠笔就基本完成了。

gl6az-hs00f.gif

4. 为了使效果更加实物化,还可以给它加上阴影。

div:before {

width: 75%;

height: 8px;

border-top-right-radius: 80px 7px;

border-bottom-right-radius: 80px 7px;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

box-shadow: 28px 22px 10px rgb(0 0 0 / 70%), 8px 24px 10px rgb(0 0 0 / 40%);

}

复制代码

为了使阴影看上去更像投影,这里给阴影的边框也设置成了主体笔架的等值。

用过圆珠笔的都是知道,握笔的部分是弧形的,投影的时候会投射更远,so 设置的投影宽度是75%。并且给握笔部分再重写一个稍远距离的斜向投影。


div{

box-shadow: 10px 26px 20px 8px rgb(0 0 0 / 30%);

transform: rotate(4deg);

}

复制代码

此时由于div的旋转,笔体部分则需要反向旋转,及再加上如下代码

div:after,div:before{transform: rotate(-4deg);}

5.鼠标悬浮特效

悬浮时修改background-image对应颜色即可。


 div:hover:after {

        background-image: 

            linear-gradient(to right,#c0c0c0,#808080),

            linear-gradient(to right,#c0c0c0,#c0c0c0),

            linear-gradient(to right,rgba(255,255,255,0.7),rgba(255,255,255,0.7)),

            linear-gradient(to right,rgba(255,255,255,0.7),rgba(255,255,255,0.7)),

            radial-gradient(ellipse at 30px 28px,rgba(255,255,255,0) 65%,rgba(255,255,255,0.6) 70%,rgba(255,255,255,0) 75%),

            radial-gradient(ellipse at right center,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 40%),

            linear-gradient(to bottom,#f1af65,#b24522),

            linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%),

            linear-gradient(to top,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0) 100%),

            linear-gradient(to bottom,#dc8314,#b24522),

            linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%),

            linear-gradient(to bottom,#f1af65,#b24522)

    }

复制代码

一个相似率99.99999% 的变色圆珠笔就完成啦!

手动狗头

文章分类
前端
文章标签