安科网

Web前端制作炫酷特效和动态icon

quguang

quguang

2019-12-31

关注 关注

1.box-shadow属性除了常用于阴影效果、卡片等基础使用外，还可以用于实现比较炫酷的特效；

Web前端制作炫酷特效和动态icon类似这样的想过都是可以通过box-shadow属性制作的；资料来源于CSDN：很小白的小白 

附上他的代码，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
    body{
      background: #000;
    }
  div{
    width: 300px;
    height: 300px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    border-radius: 50%;
    box-shadow: inset 0px 0px 50px #fff,
                inset 10px 0px 80px #f0f,
                inset -10px 0px 80px #0ff,
                inset 0px 0px 150px #f0f,
                inset -10px 0px 150px #0ff,
                0px 0px 50px #fff,
                -10px 0px 50px #f0f,
                10px 0px 50px #0ff;
  }
  </style>
</head>
<body> 
  <div></div>
  
</body>
</html>
————————————————
版权声明：本文为CSDN博主「很小白的小白」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35401191/article/details/86666497

通过inset属性，制造内阴影和不加inset属性制作外阴影；然后对等的10PX -10PX 用不同的颜色，可以让左右效果对称又炫彩；第三个PX我调了一下，应该是spread 阴影的大小；

他这个调的已经挺好看的，我是直接拿来用了；

2.CSS+DIV可以制作动态的很可爱的icon图样，如图所示Web前端制作炫酷特效和动态icon

其中下雨的效果代码：

STEP1: 整体HTML架构

<div class="icon rainy">

<div class="cloud"></div>

<div class="rain"></div>

</div>

STEP2: 用CSS绘制云朵图标

CSS代码如下

body {

max-width: 42em;

padding: 2em;

margin: 0 auto;

color: #161616;

font-family: ‘Roboto‘, sans-serif;

text-align: center;

background-color: currentColor;

}

.icon {

position: relative;

display: inline-block;

width: 12em;

height: 10em;

font-size: 1em; /* control icon size here */

}

.cloud {

position: absolute;

z-index: 1;

top: 50%;

left: 50%;

width: 3.6875em;

height: 3.6875em;

margin: -1.84375em;

background: currentColor;

border-radius: 50%;

box-shadow:

-2.1875em 0.6875em 0 -0.6875em,

2.0625em 0.9375em 0 -0.9375em,

0 0 0 0.375em #fff,

-2.1875em 0.6875em 0 -0.3125em #fff,

2.0625em 0.9375em 0 -0.5625em #fff;

}

.cloud:after {

content: ‘‘;

position: absolute;

bottom: 0;

left: -0.5em;

display: block;

width: 4.5625em;

height: 1em;

background: currentColor;

box-shadow: 0 0.4375em 0 -0.0625em #fff;

}

.cloud:nth-child(2) {

z-index: 0;

background: #fff;

box-shadow:

-2.1875em 0.6875em 0 -0.6875em #fff,

2.0625em 0.9375em 0 -0.9375em #fff,

0 0 0 0.375em #fff,

-2.1875em 0.6875em 0 -0.3125em #fff,

2.0625em 0.9375em 0 -0.5625em #fff;

opacity: 0.3;

transform: scale(0.5) translate(6em, -3em);

animation: cloud 4s linear infinite;

}

.cloud:nth-child(2):after { background: #fff; }

.rain{

position: absolute;

z-index: 2;

top: 50%;

left: 50%;

width: 3.75em;

height: 3.75em;

margin: 0.375em 0 0 -2em;

background: currentColor;

}

.rain:after {

content: ‘‘;

position: absolute;

z-index: 2;

top: 50%;

left: 50%;

width: 1.125em;

height: 1.125em;

margin: -1em 0 0 -0.25em;

background: #0cf;

border-radius: 100% 0 60% 50% / 60% 0 100% 50%;

box-shadow:

0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

-1.375em -0.125em 0 rgba(255,255,255,0.2);

transform: rotate(-28deg);

animation: rain 3s linear infinite; /*设置动画 rain */

}

STEP3: 下雨动画

/* 下雨动画 Animations */

@keyframes rain {

0% {

background: #0cf;

box-shadow:

0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

-1.375em -0.125em 0 #0cf;

}

25% {

box-shadow:

0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

-0.875em 1.125em 0 -0.125em #0cf,

-1.375em -0.125em 0 rgba(255,255,255,0.2);

}

50% {

background: rgba(255,255,255,0.3);

box-shadow:

0.625em 0.875em 0 -0.125em #0cf,

-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

-1.375em -0.125em 0 rgba(255,255,255,0.2);

}

100% {

box-shadow:

0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),

-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),

-1.375em -0.125em 0 #0cf;

}

}

代码来源于：https://mp.weixin.qq.com/s?src=3&timestamp=1577761115&ver=1&signature=ORKpJuGleWEShD7zQ-50LmtGSsjAQK-kiHIFR7PY8TKMcMKiJjPrIPOMwPx4P4a-IsnECk6ZtSToTlqzLytFsSShJHVYbU*LNKcdviDybbM7Qbs0ud5-aJv1VPp0bZ77YcIEZBz4BAMIKyaXDNULjwySojjEEJbH0dkmYAnMGBo=

不过好像复制打开过期了，是来源于微信推送的；

这个效果使用的地方目前我还没有用到，其实感觉代码挺多的，嗯就不是很方便使用；然后，现在前端的图片基本都是直接PS抠图或者iconfont里面找的图片放上去的，可能是目前的工作环境如此，也许以后能用到吧。

web前端 前端架构 动态

quguang

quguang

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

移动前端开发和Web前端开发的区别是什么？

前端这门技术，从诞生发展至今不过寥寥十余年。如果说前十年是 PC 前端的时代，那后十年一定是属于移动前端的时代。特别是随着网络制式的发展，移动设备在全球范围内得到了空前的普及，在前端领域，Hybird Web、React Native、Weex、Flutt

PncLogon 2020-09-24

快速入门Web前端开发的正确姿势

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular

颤抖吧腿子 2020-09-04

Web前端学习是属于阶段性的吗？

相信前端的学习会给大家带来可观的收入，在前端行业发光发热。其中的内容包含了三个方面,一个是网站的布局,一个是基础项目,另一个是页面布局的项目。第二个阶段是高级程序的设计,有以下几个内容1.原生Java的交互项目开发功能,2.面向对象进阶,3.ls6、ls5

liangjielaoshi 2020-08-19

Web前端学习是属于阶段性的吗？

相信前端的学习会给大家带来可观的收入，在前端行业发光发热。其中的内容包含了三个方面,一个是网站的布局,一个是基础项目,另一个是页面布局的项目。第二个阶段是高级程序的设计,有以下几个内容1.原生Java的交互项目开发功能,2.面向对象进阶,3.ls6、ls5

viewerlin 2020-08-19

Web前端学多久能参加工作呢？

爱创课堂在各地开设了分校，很多慕名来的学员到爱创来学习前端，都能找到一份不错的工作。并且爱创对学员是非常负责任的，我们爱创学员就业有保障，入学签订就业协议，就业问题不用担心。爱创在学习中通过全面实战的教学理念，结合多个用人单位的项目对学员进行教学，学成后直

SHINESUNNY 2020-08-11

框架主要是基于.net core 进行的后端Web API的开发二

简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP后端接口信息，实现对前端界面的开发工作。ABP框架主要还是基于领域驱动的理念来构建整个架构的，其中领域驱动包含的概念有 域对象Entities、仓储

xxuncle 2020-07-04

工作后转行Web前端程序员是否可行？年龄大了怎么办？

最近网上关于“30岁是否还应该转行程序员”的话题又火了，程序员丰厚的薪资使许多人蠢蠢欲动，但是年龄的限制仿佛一道门槛，阻挡住了去路，家庭，工作许多责任不断充斥着你的大脑提问“万一失败了怎么办”？但其实30岁对于大多数人而言，并不算太晚，不要因为年龄而限制自

xxuncle 2020-06-02

Web前端和后端的区别是什么？如何区分？

从前端和后端两者工作内容和负责项目是完全不同。前后端开发的相似点：函数式编程、模块化思想、分层思想、单元测试、lint、assert 方法、日志、声明式和命令式的实践经验、数据处理的本质实践与思考、部分库的使

杏仁技术站 2020-09-18

Web前端 Web前端和Web后端的区分

为什么jsp是后端呢？主要是jsp的运行原理是在tomcat服务器运行的。

元元 2020-07-30

2020最为关注的前端技术

跨端，IOS,安卓，web。支持C++、C#、Rust、Go、nodejs等语言。

学习web前端 2020-07-27

WEB前端第十三课——浏览器内核、位置

　　在CSS中新的属性标准尚未明确的情况下，各浏览器厂商对新属性的支持情况也不相同，这个阶段会对属性加厂商前缀进行区分。　　根据不同的浏览器内核，CSS前缀有所不同，最基本的浏览器内核有四种，其他内核都是基于此四种进行再研发的。　　②Webkit内核，前缀

RainyX 2020-07-26

WEB前端第五课——HTML表单

　　iframe为内联框架，iframe元素是可以创建包含另外一个文档的行内框架，是body的子集。<iframe src="" name="topframe" frameborder="0"

haohong 2020-07-18

web前端程序员代码编辑器推荐

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增php语法高亮。支持html、css、js、php的

学习web前端 2020-07-18

面试WEB前端如何才能通过？

从事web前端工作七年时间，因为一直是非常热爱编程的，从小就有兴趣，大学就是学计算机的，技术应该比一般同龄的都要好一些，今天我想给大家讲述一下，目前想要做web前端开发，面试成功应该如何去学习，要具备哪些技术。但是机会只会留给有准备的人。

quanquanxiu 2020-07-04

Web前端必备基础知识点分享

今天跟新手朋友们分享Web前端必备基础知识点，希望对你们有所帮助！一来可以提高后端处理的效率，二来可以提高后端数据的安全。后端不要动态sql语句，使用存储过程查询语句。限制用户访问数据库权限。后端如果出现异常的话，要使用自定义错误页，防止用户通过服务器默认

liangjielaoshi 2020-06-25

如何自学编程，零基础适合学习Java或者Web前端吗，非科班的能学java吗？

很多人都会选择自学Java或者前端，相信有在校的大学生，有正在上班想转行的，也有已经在自学的。下面通过几个问题我来给大家分析学习编程的难易程度。通俗的理解，编程就是编写程序，哪什么是程序呢，程序这个分类很大，我们目前接触的比较多的就是java和web前端了

quanquanxiu 2020-06-12

新技术新框架不断涌现，目前学习web前端开发都要掌握什么？

web前端开发由网页制作演变而来，随着web2.0的发展，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。前端开发市场仍然有着大量的需求。而随着H5、微信小程

RainyX 2020-06-12

转行Web前端工程师要掌握的学习知识汇总

今天小编要跟大家分享的文章是关于转行web前端要掌握的学习知识汇总。下面小编要跟大家谈谈Web和前端开发过程中需要学习什么?也简单介绍前端开发前景和薪水。前端工程师在不同的公司有不同的功能，但性质相似。CSS必须掌握浮、位置、宽度和高度，以及最大值和最小值

haohong 2020-06-10

2020最新中级web前端面试题库（含详细答案，15k级别）你会几道呢？

百度ife的h5语义化文章，讲得很好，很多不错的公司都会问语义化的问题。CSS基础有的公司很重视，在面试前还是需要好好复习一遍的。能不能讲一讲Flex布局，以及常用的属性？。Flex布局是高频考点，而且是平常开发中最常用的布局方式之一，一定要熟悉。Weak

starzhangkiss 2020-06-10

Web前端MVC框架的意义分析

　　Web前端开发是Web技术发展中的一个重要组成部分，在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点，即以页面为主体来展示界面中的信息。然而随着科学技术的不断进步，Web前端开发形式上变得更为复杂，但是其功能方面也逐渐实现了与用户间

学习web前端 2020-06-07
quguang

quguang

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号