223
文章
5
说说
65
评论
113855
访问

个人博客网站:prettywordpress.com(吃饭用大碗的程序猿)

最新评论
qq_avatar
1月前,”ヘル”在《码农=新生代农民工》
说:打卡@[huaixiao]
qq_avatar
2月前,”肋巴骨”在《Win10系统桌面一直闪屏自动刷新怎么办》
说:不错啊,这是谁写的教程,真棒
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:大佬不考虑加个灯箱吗,图片不能放大
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:pjax失效咋办,F12显示已取消
qq_avatar
3月前,”热爱”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:测试Markdown语法加表情 OωO@(暗地观察)@[哈哈]@[ganga]
A+

使用animation实现图片放大缩小

标签:   最后编辑:2020年8月27日

前言:

在新开发模板的时候看到别人家的网站有个小爱心跳动,于是好奇的去搜索了一下CSS的animation属性,做了类似的一个放大缩小的案例。

HTML代码

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <div class="demo"></div> 

CSS代码

@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0% { transform:scale(1); /*开始为原始大小*/ } 25% { transform:scale(1.1); /*放大1.1倍*/ } 50% { transform:scale(1); } 75% { transform:scale(1.1); } }.demo { width:200px; height:200px; background-color: red; -webkit-animation-name:scaleDraw; /*关键帧名称*/ -webkit-animation-timing-function:ease-in-out; /*动画的速度曲线*/ -webkit-animation-iteration-count:infinite; /*动画播放的次数*/ -webkit-animation-duration:5s; /*动画所花费的时间*/ } 

总结

程序猿什么都得学啊

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表一下你的评论呗

回复评论代表你同意网站的 隐私政策

... 友情提示 请保留版权标识
复制成功!
目录