为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3图片动态提示效果

jack.xu Web前端工程师
难度初级
时长 1小时12分
学习人数
综合评分9.53
159人评价 查看评价
9.9 内容实用
9.3 简洁易懂
9.4 逻辑清晰

已采纳回答 / 慕圣3658614
是你的图片宽度不够吧,演示用的图片比较宽,取了33%的宽度然后超出部分隐藏,就有了多余的宽度

已采纳回答 / 一枫红叶QIU
在head中可以将样式写到style标签中,或者外部引入,专门新建 样式名.css 文件,通过link引入

已采纳回答 / qq_玲玲的大_04311806
你的transform效果本来就是写在hover伪类属性里面的,移开之后,没有应用这个样式,肯定没有了撒。

已采纳回答 / V小队
<!DOCTYPE html><html> <head>     <meta charset="UTF-8">     <title>V小队出品,可随时私聊~</title>      <style type="text/css">         #div{         width: 500px;         height: 500px;         background: dar...

已采纳回答 / V小队
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>V小队出品,可随时私聊~</title>  <style type="text/css"> #div{ width: 500px; height: 500px; background: darkcyan; margin: 20px auto; position: rel...

已采纳回答 / 青春有阵叛逆的风
@media screen and (max-width: 600px){ figure{width:100%} } @media screen and (min-width: 601px) and (max-width: 1000px){ figure{width: 50%} }    @media screen and (min-width: 1001px){          figure{width: 33.33%}    }有可能是你在max-width:600px后面加了";"号导致响应事...

已采纳回答 / tyc1
那是因为,你没有给每个figure设置position:relative吧,如果设置了的话。应该每个figure下的子元素会相对它的父元素绝对定位的

已采纳回答 / 我想做前端大牛
在两个div外再包一层div<div class='wrap'><div class="one"></div><div class="two"></div></div>然后在父级元素使用hovor。transition要用在变形的元素上,不是用在hover的时候,transition是一个状态,当某元素变形时进行的属性比如.one类选择器的元素变形就用在这个选择器的css样式里.one{transition:all 1s ease;}...

已采纳回答 / 啃着西瓜晒太阳
不一样的概念,hover悬停的p更详细点,p标签是html所有标签

已采纳回答 / PARADISELIN
你自己给figure的类名是text1,你写成text了

已采纳回答 / 倾昀
是的,第一个延迟0.05秒就是从开始0.05秒执行,第二个延迟0.1秒就是从0.1秒开始执行,单个对象的延迟超过0.35秒就不执行了

已采纳回答 / zhangxs
    需要在p不是hover状态的时候同样设置transition属性,这样就不是同时全部消失了       .test1 p {          transform: translate(-150px, 0);          transition: all 1s;       }       .test1:hover p {          transform: translate(0, 0);          transition: all 1s;       }       .test1...
首页上一页12下一页尾页
课程须知
1、您要具备HTML和CSS基础知识 2、了解CSS3中的动画。
老师告诉你能学到什么?
1,学会两个HTML5新标签figure以及figcaption 2,学会使用CSS的transform 3,学会使用CSS3的transition 4,学会利用属性配合制作出绚丽的动画效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消