3-13 编程练习

讲道理，我觉得这道题挺鸡肋的，五角星比这个难多了，这道题跟老师所讲的动画，图片切换效果没什么联系。

V金龙V 2016-12-22

源自：CSS3图片切换特效 3-13 编程练习

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2016-12-22 07:33:43

习题都是难易相互结合的，这道题是为了考查学生对transform: rotate(angle)、translate掌握的熟练度，祝学习愉快！

收起回答

棒棒锤皮皮虾 2016-12-22 09:18:22

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style type="text/css">
/*此处写代码*/
div{
    margin:100px auto;
    width:200px;
    height:200px;
    background:red;
    transform:rotate(45deg);
    position:relative;
}
div::before{
    content:'';
    width:200px;
    height:200px;
    border-radius:100px;
    display:block;
    position:absolute;
    background:red;
    top:0;
    left:-100px;
}
div::after{
    content:'';
    width:200px;
    height:200px;
    border-radius:100px;
    display:block;
    position:absolute;
    background:red;
    top:-100px;
    right:0;
}
</style>
</head>
<body>
<!--此处写代码 -->
<div>
    
</div>
</body>
</html>

这个挺简单的就是一个正方形转45度然后两个长宽等同正方形边长的圆相交求采纳~

收起回答

提问者 V金龙V #1

讲道理，你这个题目不大符合要求，任务要求的是使用translate，但是你却用了position定位。我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> /*此处写代码*/ *{ margin: 0; padding: 0; } body{ margin: 0 auto; } .love{ width: 100px; height: 100px; background-color: red; transform: rotate(45deg); margin: 400px auto; } .love:before{ width: 100px; height: 100px; content: ""; display: block; background-color: red; border-radius: 50%; transform: translate(-50px,0); } .love:after{ width: 100px; height: 100px; content: ""; display: block; background-color: red; border-radius: 50%; transform: translate(0,-150px); } </style> </head> <body>  <div class="love"></div> </body> </html>

2016-12-22 16:05:20