Question

我正在尝试在左上角有一个可点击的圆圈，在点击时会展开到整页。我使用比例

让它工作

.hover.opened {
    transform: scale(1);
    transition: all 0.5s ease-out;
    overflow: hidden;
}

http://jsfiddle.net/g571o6ou/

现在我希望红色圆圈的内容已经到位（即因为看起来很糟糕而没有缩放）但是不可见，红色圆圈会扩展以显示它的内容。（插图：http://i.imgur.com/tmq32uS.png如您所见，内容未按比例放大，已经是正确的比例，但只能看到红圈增长的位置）

你会怎么做？这甚至可能吗？提前谢谢。

Answer 1

我使用了与你不同的方法。

HTML：

<div class="top-circle">
    <div class="inner-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS：

html, body{
    background:#555;
    padding:0;
    margin:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
.top-circle{
    top:0;
    left:0
    position:absolute;
    width:50px;
    height:50px;
    background:red;
    overflow:hidden;
    border-radius: 0 0 5000px 0;
    transition:all 0.7s ease-out;
}
.inner-text{
    margin: 50px;
    width:500px;
}

jQuery的：

$(function(){

    $('.top-circle').click(function(){
        $(this).width($(window).width()+500);
        $(this).height($(window).height()+500);
    });
});

这是jsFiddle。

Answer 2

使用一点CSS3，你可以用不同的方式来接近它。可以把它想象成创建一个掩盖下面固定内容的面具。

因此红色不会应用于在您的情况下绘制圆的父div，而是在嵌套div的背景上。

以下是使用 clip-path ：

的代码示例

.youtube {
    -webkit-transition: scale(1);
    transition: scale(1);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-clip-path: circle(50px at left top);
    clip-path: circle(50px at left top);
    height: 100%;
}
.youtube.opened {
    -webkit-clip-path: circle(100% at center);
    clip-path: circle(100% at center);
}
.hover-content {
    background-color: red;
    width: 100%;
    height: 100%;
}

请在此处查看：http://jsfiddle.net/1cgonza/trn8oy8o/

目前它不是最常见的跨浏览器解决方案，但它可能会帮助您入门。如果您将SVG图像用作剪辑路径，它往往会更好地工作。仔细阅读本文和最后的一些链接，了解更多想法：https://css-tricks.com/almanac/properties/c/clip/

Answer 3

你想要这样的东西吗？

Fiddle

.hover.opened {
transform: scale(1);
transition: all 0.5s ease-out;
overflow: hidden;
font-size:50px;
transform: scale(0.50);

}

Updated fiddle

Answer 4

这是你期待的吗？

＆＃13;

var youtubePanel = document.querySelector(".youtube");

youtubePanel.addEventListener("click", function() {
	youtubePanel.classList.add("opened");
});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, html {
	width: 100%;
	height: 100%;
	font-family: 'Roboto', sans-serif;
	color: #BBB;
}

body {
	background-color: #3D4045;
	position: relative;
	overflow: hidden;
}

.hover {
	position: absolute;
	overflow: hidden;
}

.hover.hover-top-left {
	top: -1000px;
	left: -1000px;
	width: 2000px;
	height: 2000px;
}

.hover-content {
	position: relative;
    top: 66%;
    left: 69%;
    transform: scale(20);
    opacity: 0;
    font-size: 65px;
    width: 900px;
}

.youtube {
	background-color: #CC181E;
	border-radius: 100%;
	transform: scale(0.05);
}

.hover.opened {
	transform: scale(0.25);
	transition: all 0.5s ease-out;
	overflow: hidden;
}

.hover.opened>.hover-content {
	transform:scale(1);
	transition: opacity 0.5s ease-out;
	opacity: 1;
}

＆＃13;

<div class="hover hover-top-left youtube">
    <div class="hover-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

＆＃13;

Answer 5

试试这个 -

＆＃13;

var youtubePanel = document.querySelector(".youtube");

youtubePanel.addEventListener("click", function() {
	youtubePanel.classList.add("opened");
    setTimeout(function() {document.querySelector(".content").style.display = "block"}, 500);
});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, html {
	width: 100%;
	height: 100%;
	font-family: 'Roboto', sans-serif;
	color: #BBB;
}

body {
	background-color: #3D4045;
	position: relative;
	overflow: hidden;
}

.content {
	display: none;
}

.youtube {
	background-color: #CC181E;
	border-radius: 50%;
	width: 100px;
    height: 100px;
    position: absolute;
    top: -50px;
    left: -50px;
    transition: all 0.5s ease-out;
    z-index: 2;
}

.youtube.opened {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0;
}

＆＃13;

<div class="youtube">
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

＆＃13;

将div扩展为整页大小，内容已经存在

5 个答案: