web前端|html教程
css3实现逐渐变大的圆填充div背景的效果
web前端-html教程
手机端现在的一些应用会运用上这样一个效果，就是duang的一下出现一个圆变大直到填充整个div，动感十足。
个人博客页面源码下载,vscode是开源吗,ubuntu检测问题,Tomcat信号量,pythorn 爬虫,php 判断是否手机访问,秦皇岛seo哪家实力强,网站发帖子源码,h5模板代码免费下载lzw
想到css3的scale属性，就自己来实现一下。
单页文章源码,vscode工程查找,ubuntu qpid,tomcat 最多并发,sqlite数据库多大,实时搜索插件,前端框架眼镜拍照好手机,python爬虫教程第66讲,php 邮件验证,seo专用兼职广告,手机网站登陆界面,问卷调查网页模板下载,ecshop 小米模板 横排lzw
房屋出租信息发布平台 源码,ubuntu所有终端命令,爬虫软件下载apk,ssr php,宜昌seo收费lzw
css样式,用border-radius属性设置圆，改为用背景透明的白色大圆形能达到同样的效果:
.anim{position: absolute;border-radius: 50%;height:1200px;width:1200px;background-color: #fff;border-radius: 50%;/*background: url(1.jpg) no-repeat;*/top:-550px;left:-480px;-webkit-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);transform:scale(0);-webkit-transform-origin: center center 0;-moz-transform-origin: center center 0;-ms-transform-origin: center center 0;transform-origin: center center 0;-webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s;transition:all 0.6s ease 0s; } .active{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;-moz-transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s; transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;/*transition属性的缓动效果支持标准三次方贝塞尔曲线的哦*/ }
transition属性一般只说是用于两个状态间转换间的过渡，更具体的是，transition定义的是从其他状态转换到该定义所在的状态的过渡情况。以上面的代码为例，active类的transition定义的是其他类(.anim)过渡到active类的过渡情况，而anim类的transition定义的则是其他类（.active）过渡到anim类的过渡情况。
这里贴出transform和transition的浏览器兼容情况：
transform, 来自/en-US/docs/Web/CSS/transform
transition（注意ie的transition没有ms前缀的），来自/en-US/docs/Web/CSS/transition
点击方框就能duang的出现逐渐变大的圆形填充整个div，js代码：
function $(a){ return document.getElementById(a); } $("bcd").onclick=function(){ if(this.children[0].className=="anim"){ this.children[0].className+=" active"; } else{ this.children[0].className="anim"; } }
考虑到用类来表示不同状态简洁直观，当然也可以直接用style改写，也不能忘了处理兼容性问题：
$("bcd").onclick=function(){ var t = this.children[0].style; //注意浏览器兼容性属性写法的首字母，webkit内核的w可大写也可小写，firefox是Moz和ie是ms,使用jQuery的css方法时的兼容性写法同此 if(t.transform=="scale(1)"||t.WebkitTransform=="scale(1)"||t.MozTransform=="scale(1)"||t.msTransform=="scale(1)"){ t.transform="scale(0)"; t.WebkitTransform="scale(0)"; t.MozTransform="scale(0)"; t.msTransform="scale(0)"; } else{ t.transform="scale(1)"; t.WebkitTransform="scale(1)"; t.MozTransform="scale(1)"; t.msTransform="scale(1)"; }}
趁机学习了下用ps将动画截图制作成gif动图orz，要保存为gif格式。
有32、64、128色可选，还有仿色和无仿色。仿色一般用于颜色少的图，无仿色用于丰富色彩的情况。由于用的颜色值不多，就选择“32 仿色”保存，后发现选择”gif 限制”保存占空间更小，就改为“gif 限制”保存了，动画的效果大概如下：
对于手机端来说，click事件还是可以使用的，但是可以用touchstart或touchend来代替。
只在手机端的uc浏览器测试了，发现transform和transition属性都需要webkit前缀才能使用。
另外比较有意思的是，我还测试了下:hover伪类：
#bcd:hover .anim{ -webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1);}
对于pc端来说鼠标移到上面就能出发hover效果，但是对于移动端当然是没有hover这种东西了，那到底会不会出发这个效果呢？
结果是在没有监听点击或触摸事件的情况下，用户点击div就会触发hover效果，点击其他区域就会触发hover移除的效果，
但是如果有监听点击或触摸事件的处理方法，就会覆盖掉hover效果。
