前端入门（雷云特效，css）

（推荐个别人写的css特效网站CSS3的奇思妙想，感觉有好多蛮好玩的功能，这个特效是在里面偏下面一点的位置）

（最好还是看一下动画的演示效果，直接复制粘贴就行了）
实现原理其实很简单，三个部分，云层，阴影和闪电

云层部分的实现可以通过一个圆球加上阴影（这样就可以制造很多圆），多个圆通过设置位置进行堆叠就可以显示出云层的样子，然后让云层上下移动就可以了

阴影部分的实现就是通过一个动画，一个边框为弧形的矩形（现在好像应该称呼它为椭圆形），让它不断进行缩放，并改变背景颜色深浅即可

闪电部分的实现，大家应该都懂怎么用边框搞出一个三角形吧（就比如把div设为 0 宽 0 高，上边框设为有颜色的 30px ，右边框设为透明的 30px ，就可以看到一个三角形），而闪电就可以看成一个矩形加一个三角形，三角形有了，再用阴影弄一个矩形就可以了（我感觉三角形太尖了不太好看，就把 div 的宽高设为 3px ）。然后设置闪电是绕哪个点旋转的，其中适当调节角度和位置就可以了。最后就是设置闪电的动画，注意要把 animation-timing-function 设为 steps(1, end); 让它一步一步做（不然这闪电就在里面转起了圈）

<!DOCTYPE html>
<html><head><style>#weather_thunder_div{position: absolute;width: 200px;height: 300px;left: 50vw;top: 50vh;border-radius: 30px;background-color: grey;transform: translate(-100px, -150px);}#weather_thunder{position: absolute;left: 20px;top: 80px;width: 50px;height: 50px;border-radius: 50%;background-color: #333333;box-shadow:30px -20px 0px 5px #333333,25px 20px 0px -3px #333333,50px 0px 0px 2px #333333,75px -12px 0px 7px #333333,90px 12px 0px -4px #333333,105px -3px 0px 3px #333333;animation-name: cloud_move;animation-duration: 3s;animation-iteration-count: infinite;animation-direction: alternate;animation-timing-function: ease-in-out;}#weather_thunder::before{content: "";position: absolute;left: 80px;top: 65px;width: 3px;height: 3px;border-top: 38px solid yellow ;border-right: 8px solid transparent;border-left: 0px;box-shadow: -7px -25px 0px -1px yellow;transform-origin: 30px -80px;animation-name: thunder_change;animation-duration: 6s;animation-timing-function: steps(1, end);animation-iteration-count: infinite;}#weather_thunder::after{content: "";position: absolute;left: 17.5px;top: 145px;width: 125px;height: 25px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.3);animation-name: cloud_shadow;animation-duration: 3s;animation-iteration-count: infinite;animation-direction: alternate;animation-timing-function: ease-in-out;}@keyframes cloud_move {to { transform: translateY(30px) ;}}@keyframes cloud_shadow {to {background-color: rgba(0, 0, 0, 0.6);transform: scale(1.25) translateY(-30px);}}@keyframes thunder_change {0% { transform: rotate(30deg) translate(-10px, 20px); opacity: 1}5% { transform: rotate(-45deg) translate(-10px, -20px); opacity: 1}10% { transform: rotate(20deg) translate(-10px, 20px); opacity: 1}90% { transform: rotate(-15deg) translate(10px, -10px); opacity: 1}95% { transform: rotate(0deg) translate(0px, -3px); opacity: 1}15% { opacity: 0;}}</style></head><body><div id = "weather_thunder_div"><div id = "weather_thunder"></div></div></body>
</html>

（感觉没事练练这种特效，css确实熟悉了不少，佩服这些大佬的代码水平，越学越感觉自己啥都不会）

前端入门（雷云特效，css）相关推荐

前端入门教程(七)CSS属性设置
宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性文字字体 font-family可以把多个字体名称作为一 ...
前端入门：用css设置文字样式。
转自:微点阅读 https://www.weidianyuedu.com 经过前面的文章,相信大家已经基本了解了前端最基本的一些规则了: html搭建结构,承载内容 css则可以利用选择器,来为相应 ...
前端入门之特效、动画
变形.过渡.渐变.滤镜.阴影.动画阴影 shadow CSS 阴影效果 (w3school.com.cn) 可以在文本和元素上添加阴影阴影不会对布局产生影响 box-shadow: 给元素添加阴影 ...
学习笔记(01):【孙伟老师UID课堂】设计师也能会的-WEB前端入门基础HTML+CSS视频教程-09综合表单标签讲解-1...
立即学习:https://edu.csdn.net/course/play/6853/136357?utm_source=blogtoedu 8-9接不上啊少了几节课吧?
免费直播！真.零基础能学会的前端入门教程，还带实操抖音风格字体特效！
茫茫职海中,有没有那么一个又简单又赚钱的行业呢? 答案:前端!!! 前端是进入技术行业的一个捷径,规划好能事半功倍. 1.前端门槛低,简单易学: 2.应用场景广泛,现已涉及到了各个领域: 3.市场需求 ...
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
python和html可以同时学吗_web前端入门：css+html5+javascript同时学可以吗？
HTML+CSS+JS是前端基础核心知识,肯定是都要学的.在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可.说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂 ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...

前端入门（雷云特效，css）

前端入门（雷云特效，css）相关推荐

最新文章

热门文章