css 图片慢慢缩大变小

html-css033

css 图片慢慢缩大变小,第1张

这是 图片慢慢放大和缩小

.toShop-btn{

position: fixed

top:730rpx

width: 81rpx

height:91rpx

line-height: 48px

z-index:99

right:0rpx

-moz-animation: myfirst 1s infinite

-webkit-animation: myfirst 1s infinite

-o-animation: myfirst 1s infinite

animation: myfirst 1s infinite

}

@keyframes myfirst{

0% { transform: scale(.8)}

50% { transform: scale(1)}

100% { transform: scale(.8)}

}

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:span {font-size: 0.8em}。

3、浏览器运行index.html页面,此时span的字体大小被设置h1字体大小的80%。

最简单的 就是给你看下原理 你可以自己修改

<span style="font-size:16px" onclick="this.style.fontSize=(parseInt(this.style.fontSize.replace('px',''))+2)+'px'">单击放大文字</span>

顺便说明parseInt是把字符串变数字 replace是把取得的css属性里的px去掉 原css里字体大小使用font-size控制 在js里对这种中间有横杠的都需要把横杠去掉并把第二个单词的首字母大写