CSS3过渡(transition)-圆球随鼠标点击而移动

最新推荐文章于 2024-02-05 11:42:40 发布
最新推荐文章于 2024-02-05 11:42:40 发布
阅读量365 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/YutaoZhou/p/6675839.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        #foo{
            border-radius: 50px;
            width: 50px;
            height: 50px;
            background-color: #c44;
            position: absolute;
            top:-100px;
            left: -100px;
            -webkit-transition:all 1s;//1S完成移动
        }
    </style>
</head>
<body>
    <div id="foo"></div>
    <script type="text/javascript">
        var f=document.getElementById('foo');
        document.addEventListener('click',function(ev){
            f.style.left=(ev.clientX-25)+'px';
            f.style.top=(ev.clientY-25)+'px';
        },false);
    </script>

</body>
</html>

 另外，可对事件进行监听：

el.addEventListener("webkitTransitionEnd",updateTransition,true)；

转载于:https://www.cnblogs.com/YutaoZhou/p/6675839.html

weixin_30663471
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 平滑过渡（transition）效果
摆渡人
07-26 4452
京东促销广告过渡(transition)效果和结构
CSS 3 过渡（transition）操作
Bohn的博客
08-26 1506
1.什么是过渡     使得css属性值，在一段时间内平缓变化的效果 2.过渡语法     1.指定过渡属性       属性：transition-property       取值：          1.all 能使用过渡的属性，一律用过渡体现      2.具体属性名        ex:        transition-property:background        当背景的属...
常见的css3动画样式
weixin_30835923的博客
09-05 541
6、3D转换 属性: perspective : 设置假定人眼到投影平面的距离 只影响3D元素，不影响2D元素 设置位置：加在父元素上，设置好后，其子元素就可以完成3D的转换。 1、3d位移 改变元素在z轴上的位置 属性：transform: 函数：translateZ(z); transla...
html的过渡、平移、旋转与3d属性
azkhx的博客
08-17 2207
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
mysql 小球_JavaScript canvas实现跟随鼠标移动小球
weixin_42527401的博客
02-18 132
本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下canvas{border: 1px solid #000;}// 创建画布var canvas = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");// 球类function Ball(x, y) {this.x = x;this...
[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
nqxcwl的专栏
11-03 299
综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的canvas教程 1 <head> 2 <meta charset='utf-8' ...
使用HTML、CSS和JavaScript来创建一个粒子效果，粒子会跟随鼠标点击位置生成
最新发布
日常笔记/总结/系列知识梳理
02-05 1870
JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展成为一种功能强大且广泛使用的语言。CSS与HTML结合使用，用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。JavaScript是一种功能强大且灵活的编程语言，用于为网页添加交互和动态性，并且已经成为Web开发的基础之一。这只是HTML的一些基本概念，HTML有很多其他的标签和功能，可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念，CSS还有更多的属性和功能，可以根据需要进一步学习和掌握。
CSS3过渡transition效果实例介绍
09-24
主要为大家详细介绍了CSS3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯css3 transition动画过渡属性制作鼠标悬停图片标题
11-24
纯css3 transition动画过渡属性制作鼠标悬停图片标题
CSS3使用transition属性实现过渡效果
09-24
CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果，需要的朋友参考下本
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
圆随鼠标点击移动
05-04
圆随鼠标点击移动 if (m_Shape==0) { rect.left=m_x-50; rect.right=m_x+50; rect.top=m_y-50; rect.bottom=m_y+50; pDC->Ellipse(&rect;); } else { rect.left=m_x-50; rect.right=m_x+50; rect.top=m_y-30; rect.bottom=m_y+30; pDC->Rectangle(&rect;); }
CSS3-hover-transition-effect:CSS3-hover-transition-effect
06-30
CSS3-hover-transition-effect | 密码技巧CSS3 悬停过渡效果请参阅此处的教程 - 演示 -
纯CSS3 transition属性鼠标经过酷炫按钮动画特效
09-13
纯CSS3 transition属性鼠标经过酷炫按钮动画特效
JavaScript案例（四）：鼠标移动跟随；html+css+js实现鼠标移动时小球跟随鼠标移动
小张小张的博客
03-07 999
鼠标移动跟随案例 js知识点：JavaScript事件 详见上一篇文章： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例：鼠标跟随</title> <style> img { width: 40px; height: 40px;
css3中的动画特效--跳动的篮球
qq_53983648的博客
11-11 2339
html+css实现有趣的动画案例
transition属性实现div点击拉伸，再点击收回效果
baidu_33163851的博客
09-28 6418
html> html lang="en"> head> meta charset="UTF-8"> title>004title> style> div { width: 80px; height: 50px; background-color: #90FF8E; transition: width 4s; /* 改变宽度，时间4
transition参数css,CSS3 - CSS3之Transition（变换过渡）
weixin_29071809的博客
08-03 251
知道了CSS3三剑客之一的transform可以用来让原本规规矩矩的元素产生变形，平移，旋转一样的旋转，接下来使用第二个特性，transition属性，增加变化过程中的过渡效果。Transition允许CSS的 属性值 在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法如下：transition-proper...
CSS 中 transition 的使用（实现过渡效果）
热门推荐
weixin_45631453的博客
10-21 1万+
首先给出 <body>和 <style>中的基础代码 <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> <style> .box1 { width: 500px; heig..
css3过渡transition
09-11
3. `transition-timing-function`：指定过渡的速度曲线。常见的取值有`ease`（默认值）、`linear`、`ease-in`、`ease-out`等。 4. `transition-delay`：指定过渡的延迟时间。可以使用毫秒或秒作为单位。 例如，要在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值