如何使用CSS3中属性和jquery方法控制元素移动

在这么一个场景下,使用CSS3样式属性控制元素,如背景渐变、圆角、阴影等;再使用jQuery中的css()方法控制元素相对位置偏移,加个定时任务,这样就可以让元素动起来。下面利用实例说明如何实现,操作如下:

工具/原料

  • jQuery
  • CSS3
  • HTML5
  • HBuilderX
  • 浏览器
  • 截图工具

方法/步骤

  1. 第一步,双击打开HBuilderX工具,新建一个HTML5模板的页面,插入一个div标签元素,并设置对应的ID属性,操作如下:

  2. 第二步,利用ID选择器设置div元素的样式,宽度、高度、字体样式和背景渐变,如下图所示:

  3. 第三步,保存代码并直接打开浏览器预览效果,可以看到文字内容水平垂直居中显示,如下图所示:

  4. 第四步,再在样式选择器中添加border-radius和box-shadow,椭圆角和阴影,如下图所示:

  5. 第五步,再次保存代码并预览界面效果,可以发现出现圆形,并带有阴影,如下图所示:

  6. 第六步,引入jquery核心文件,使用jquery中控制样式方法css(),添加定时器,设置元素相对位置,如下图所示:

注意事项

  • 注意使用CSS3设置样式和使用jQuery控制样式的区别
  • 注意CSS3中的属性兼容不同浏览器的写法
分类:游戏/数码
标签:

站长推荐

我们猜您还喜欢

  • 如何使用CSS3中属性控制其它元素设置成按钮效果
  • 如何使用CSS3和jquery方法控制无序列表间隔显示
  • 如何使用CSS3中属性columns控制文字内容显示行
  • 如何使用CSS3中属性控制元素四个方向的边框样式
  • 如何使用CSS3中属性控制元素的背景色的几种形式
  • 如何使用CSS3中属性控制元素的显示并调整顺序
  • 如何使用CSS3中属性box-lines控制伸缩盒子换行
  • 如何使用CSS3中属性box-direction控制布局顺序
  • 如何使用CSS3中的后代选择器设置后代元素样式
  • 如何使用CSS3中的兄弟选择器设置相邻元素样式