CSS3 的box-shadow进阶之 - 动画篇 - 制作辐射动画
本篇文章是上一篇讲box-shadow基础知识的延伸,建议先花几分钟阅读那篇文章,点击阅读,再来看这篇。
除了box-shadow属性知识外,制作动画,还需要对CSS3的animation, @keyframes制作动画有所了解。
接下来,还是那张图。。
基本思路如下:
1.写好一个div,<div class="circle"></div>
2.利用border-radius,把它变成一个圆
3.给它添加after伪类,伪类也是一个一样大小的圆(不设置背景色),跟当前的圆重叠在一起
4.鼠标移入的时候,给伪类添加animation动画
5.动画包括,opacity的变化,添加层叠阴影(关键),伪类放大2倍,就做好了我们要的效果了。
感叹一下,CSS的伪类真是厉害~~好多情况下可以使用
代码如下
<div class="circle"></div>
body {
margin:;
padding:;
background:black;
}
.circle{
width:50px;
height:50px;
border-radius:50%;
background-color:#f50ad5;
margin:80px;
}
.circle:after{
content:'';
display:block;
left:;
top:;
width:50px;
height:50px;
border-radius:50%;
} .circle:hover:after{ /*鼠标入的时候,伪类元素的动画开始,动画名称就是下面@keyframes定义的circle*/
animation: circle 1.3s ease-out 75ms;
} @keyframes circle{
0% {
opacity: 0.4;
}
40% {
opacity: 0.7;
box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8); /*三层阴影*/
}
100% {
box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8);
transform: scale(2); /*放大两倍*/
opacity:;
}
}
第二张图实现起来就更简单了
直接添加添加动画,放大阴影尺寸即可,代码如下
<button class="button">点击</button>
body {
margin:;
padding:;
background:black;
}
.button{
width:50px;
height:35px;
color:#f50ad5;
border:2px solid #f50ad5;
background-color:black;
margin:80px;
}
.button:hover{ /*鼠标移入的时候,动画开始*/
animation: shine 0.4s linear;
}
@keyframes shine{
0%{
box-shadow:0 0 0px 0px rgba(245, 10, 213,0.9);
}
100%{
box-shadow:0 0 0px 25px rgba(245, 10, 213,0);
}
}
看似炫酷的动画,就这么简单做出来了,发挥想象力,还可以做出更有趣的动画哦。
码字不易,觉得有帮助,请给个赞吧~
另外,文章为原创,如需转载,请注明出处,谢谢!
CSS3 的box-shadow进阶之 - 动画篇 - 制作辐射动画的更多相关文章
- iOS开发--动画篇之layout动画深入
"不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常 ...
- iOS动画篇:核心动画
转:http://www.cocoachina.com/ios/20160517/16290.html 基本概念 1.什么是核心动画 Core Animation(核心动画)是一组功能强大.效果华丽的 ...
- iOS动画篇:UIView动画
iOS的动画效果一直都很棒很,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用.在APP开发中实现动画效果有很多种方式,对于简单的应用场景,我们可以使用UIKit提供的动画来实现. UIView动画 ...
- ReactNative入门 —— 动画篇(上)
在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...
- 前端性能优化(css动画篇)
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 【译】SQL Server索引进阶第八篇:唯一索引
原文:[译]SQL Server索引进阶第八篇:唯一索引 索引设计是数据库设计中比较重要的一个环节,对数据库的性能其中至关重要的作用,但是索引的设计却又不是那么容易的事情,性能也不是那么轻易就 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- [转]ANDROID L——Material Design详解(动画篇)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...
随机推荐
- 力扣(LeetCode) 905. 按奇偶排序数组
给定一个非负整数数组 A,返回一个由 A 的所有偶数元素组成的数组,后面跟 A 的所有奇数元素. 你可以返回满足此条件的任何数组作为答案. 示例: 输入:[3,1,2,4] 输出:[2,4,3,1] ...
- x1c 2018 体验
总结一下: 2018对比2017优点: 1屏幕完爆:HDR WHD镜面屏完爆 FHD 雾面屏(污+雾,所谓的油腻感),还有色彩!正红色第一次觉得这么好看.别人看得出来看不出来我不知道,至少我能看出来非 ...
- (转)Linux下设置和查看环境变量
原文地址:<Linux下设置和查看环境变量> Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1. 永久的:需要修改配置文件,变量永久生效. 2. 临时的:使用e ...
- 关于编码:Unicode/UTF-8/UTF-16/UTF-32
关于编码,绕不开下面这些概念 ①Unicode/UTF-8/UTF-16/UTF-32 ②大小端字节序(big-endian/little-endian) ③BOM(Byte Order Mark) ...
- Golang简单日志类
实现简单的日志写入文件功能运行环境:golang1.4.2+win7x64golang1.4.2+centos6.5×64 package Helper import ( “fmt” “log” “o ...
- Codeforces 1076 E - Vasya and a Tree
E - Vasya and a Tree 思路: dfs动态维护关于深度树状数组 返回时将当前节点的所有操作删除就能保证每次访问这个节点时只进行过根节点到当前节点这条路径上的操作 代码: #pragm ...
- Linux下计划任务以及crontab权限问题
在Linux工作环境下,我们有时可能会需要在未来某个时间执行某个命令或脚本,但是我们又不可能定个闹钟,然后到点了再去执行吧,这多麻烦.还好我们的Linux系统这么强大,提供了任务计划这个功能,我们就不 ...
- spring security+freemarker获取登陆用户的信息
spring security+freemarker获取登陆用户的信息 目标页面之间获取 ${Session.SPRING_SECURITY_CONTEXT.authentication.princi ...
- change color3
两种方法 第一种 DataGridview1.Rows[i].DefultCellStyle.backcolor 第二种 AlternatingRowsDefutCellstyle 属性 获取或设置应 ...
- 国外(英文)——WPF较好的奇葩问题解决网站
https://stackoverflow.com/questions/6415908/c-sharp-wpf-datagrid-vertical-scroll