css3实现逐渐变大的圆填充div背景的效果_html/css_WEB-ITnose
手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足。
想到css3的scale属性,就自己来实现一下。
<div id="bcd" style="width:500px;height:200px;position:relative;background-color:#aaa;overflow:hidden;border:3px solid #333;"> <div class="anim"></div> </div>
css样式,用border-radius属性设置圆,改为用背景透明的白色大圆形能达到同样的效果:
.anim{ position: absolute; border-radius: 50%; height:1200px; width:1200px; background-color: #fff; border-radius: 50%; /*background: url(1.png) 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属性的缓动效果支持标准三次方贝塞尔曲线的哦*/ } </style>
transition属性一般只说是用于两个状态间转换间的过渡,更具体的是,transition定义的是从其他状态转换到该定义所在的状态的过渡情况。以上面的代码为例,active类的transition定义的是其他类(.anim)过渡到active类的过渡情况,而anim类的transition定义的则是其他类(.active)过渡到anim类的过渡情况。
这里贴出transform和transition的浏览器兼容情况:
transform, 来自https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transition(注意ie的transition没有ms前缀的),来自https://developer.mozilla.org/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效果。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...

vue 응용 프로그램을 개발할 때 라우터 폴더 아래에 index.js 파일에 vuerouter를 등록해야 할 필요성이 있으면 종종 라우팅 구성에 문제가 발생합니다. 특별한...
